Search code examples
three.jscamerarender

ThreeJS STL facets disappearing as object or camera rotates

I'm new to ThreeJS and object rendering in general. I'm working on basically combining the material explorer example https://threejs.org/docs/scenes/material-browser.html#MeshStandardMaterial

with the default STL Loader code

* Usage:
 *  const loader = new STLLoader();
 *  loader.load( './models/stl/slotted_disk.stl', function ( geometry ) {
 *    scene.add( new THREE.Mesh( geometry ) );
 *  });

I'm using an orthographic camera, but changing the bounds doesn't seem to have any effect.

const camera = new THREE.OrthographicCamera( -400, 400, 400, -400, 0.1, 2000 );

Whenever the sides of the object get nearest to the camera, they become see-through (not transparent, because I'm controlling the transparency property). I've tried rotating the camera (OrbitControls) and rotating the object (childMesh.rotation.y += 0.005;), and it makes no difference.

I did find that if I have two STLs loaded with the same XY footprint, and I reduce the size of the inner STL, only the outer STL is "clipped". That makes me think that it really is an interaction between the camera and the "extents" of the object. I also checked the mesh.material.clippingplane and it is disabled / empty.

As far as I can tell, the STLs are well-behaved. I just grabbed this fun lego container box from Thingiverse to test: https://www.thingiverse.com/thing:5510962/files

Please let me know if you have any ideas!

See-through at the corner

Solution

  • I stumbled across the answer, although I don't understand the why of it.

    The material browser example uses an initial camera position camera.position.z = 35

    This doesn't play nicely with the size of the STLs and the camera settings. Note, changing the Perspective / Orthographic settings involving the frustrum location didn't have any effect. Raising this camera position setting eliminated the issue. Also note that I was rotating / panning / zooming the camera with OrbitControls and couldn't fix the effect.

    *** Doesn't work ***

    // Either camera
// const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 500 );

const camera = new THREE.OrthographicCamera( window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 0.1, 1000 );

camera.position.z = 35;

    *** Does work, for now... ***

    // Either camera
// const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 500 );

const camera = new THREE.OrthographicCamera( window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 0.1, 1000 );

camera.position.z = 200;

    I fully expect to encounter the problem again when working with different sizes of STL, especially as some are created in inch units, and others in mm units (25.4 x difference in scale).