Parts of object disappear during rotation

Questions
1

Hi everyone,
I just managed to get my 3D model positioned within the canvas area. However, whenever I rotate the model manually using standard controls, parts of it disappear as if there was an invisible wall or curtain.

shot1
shot1466×508 50.1 KB

shot2
shot2466×508 31.2 KB

I’ve tried two promising approaches I found here, including
model.traverse(function(obj) { obj.frustumCulled = false; });
and changing the near value of the camera, but both did not help.
Do you have any idea what to try next or what I parts of the code I should look at?
My script is rather simple, as it is based on a standard tutorial:

import * as THREE from '/fk-test/3d-test4/js/three.module.js';
import {OrbitControls} from '/fk-test/3d-test4/js/OrbitControls.js?dsgdfgdrgd';
import {GLTFLoader}    from '/fk-test/3d-test4/js/GLTFLoader.js?fdf';
  
const canvas = document.querySelector( '#canvas' );
let renderer = new THREE.WebGLRenderer({canvas});

const camera = new THREE.PerspectiveCamera( 86, 2, 1, 100 );
camera.position.set( -5.9, 38, 101 );
const controls = new OrbitControls( camera, canvas );
const scene = new THREE.Scene();
const mixers = [];
const clock = new THREE.Clock();

function main() {
   {      
      const ambientLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 5 );
      const mainLight = new THREE.DirectionalLight( 0xffffff, 5 );
      mainLight.position.set( 10, 10, 10 );
      scene.add( ambientLight, mainLight );                
   }
   
   {
      // WebGLRenderer 
      renderer.setSize( canvas.clientWidth, canvas.clientHeight );
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.gammaFactor = 2.2;
      renderer.gammaOutput = true;
      renderer.physicallyCorrectLights = true;
   }
   
   loadModels();

   function render() {
      renderer.render( scene, camera );
      //console.log(camera.position);
   }
   
   function update() {
      const delta = clock.getDelta();
      for ( const mixer of mixers ) {
         mixer.update( delta );
      }
   }
   
   renderer.setAnimationLoop( () => {
      update();
      render();
   });
   
}

function loadModels() {
   const loader = new GLTFLoader();
   const onLoad = ( gltf, position ) => {     
      const model = gltf.scene;      
      model.position.copy( position ); 
      //model.traverse(function(obj) { obj.frustumCulled = false; }); // tried to fix parts being cut off during rotation
      scene.add( model );          
   };

   const onProgress = (message) => {console.log( "loading models" );};
   const onError = ( errorMessage ) => { console.log( errorMessage ); };
   const modelPosition = new THREE.Vector3( 0,-90, 0);  
   loader.load( 'ST9640_MAB.gltf', gltf => onLoad( gltf, modelPosition ), onProgress, onError );
         
}

main();
2 
const camera = new THREE.PerspectiveCamera( 86, 2, 1, 100 );
camera.position.set( -5.9, 38, 101 );

with this setup (if you disregard xy offsets) the visible frustum z-range is from 100(near plane) to 1(far plane).

const modelPosition = new THREE.Vector3( 0,-90, 0);

if you put your shirt at z = 0, there is only a sliver of frustum that intersects with the model.

try something like

const camera = new THREE.PerspectiveCamera( 86, 2, 1, 200 );
camera.position.set( -5.9, 38, 101 );
1 Like
3

That did the trick, thanks a lot! :slight_smile:
I expected something far more complicated than this, but I would never have found that solution myself.

1 Like