CODEWITHSUNDEEP
javascriptthree.jsrotationmesh
Matteo
Matteo

Reputation: 8142

Three js plane geometry disappears when rotating

I'm trying to create a very simple scene containing a triangular planar face continuously rotating about the x axis.

Here's the code creating the geometry object, as indicated in this previous SO question:

// create triangular plane geometry
var geometry_1 = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(3,0,0);
var v3 = new THREE.Vector3(0,3,0);
geometry_1.vertices.push(v1); 
geometry_1.vertices.push(v2); 
geometry_1.vertices.push(v3);
geometry_1.faces.push(new THREE.Face3(0, 1, 2));

The animation function renders the scene and adds a small rotation to the mesh:

function animate() {
    requestAnimationFrame( animate );
    mesh_1.rotation.x += 0.005;
    renderer.render( scene, camera );
}

Everything works fine until the value of mesh.rotation.x goes into the [Math.PI, 2*Math.PI] interval, at which point it disappears for exactly half of the cycle. This JSFiddle replicates the behavior I'm observing.

So what is going on? How can I solve it? Thanks!

Upvotes: 1

Views: 3302

Answers (2)

Matteo
Matteo

Reputation: 8142

Extending the answer from @prisoner849, the problem shown in the JSFiddle has nothing to do with the geometry or the material of the mesh, but with the shape and extension of the frustum defined by the OrthographicCamera.

As explained nicely in this video tutorial and in the documentation the frustum of an OrthographicCamera is a rectangular parallelepiped defined by the values left, right, top, bottom, near, far:

enter image description here

The camera should effectively be thought of as being attached to the surface on the near side and facing towards negative values of the z axis.

Once the frustum's shape is defined with:

FRUSTUM_SIDE = 20;
camera = new THREE.OrthographicCamera(
   -FRUSTUM_SIDE/2, FRUSTUM_SIDE/2, 
   FRUSTUM_SIDE/2, -FRUSTUM_SIDE/2,
   -FRUSTUM_SIDE/2, FRUSTUM_SIDE/2);

we will be able to see in our image all the objects in the scene which are entirely contained in it.

However, after defining the frustum the position of the camera is changed: camera.position.z = FRUSTUM_SIDE/2; (line 24 of the fiddle). This effectively moves the whole frustum and not just the location of the image, so while previously any object in (0,0,0) was in the center of the frustum, now it will lie on the very far end plane of it.

The animation function:

function animate() {
    requestAnimationFrame( animate );
    mesh_1.rotation.x += 0.005;
    renderer.render( scene, camera );
}

rotates the triangle towards the image plane, but for angles between [Math.PI, 2*Math.PI] the plane is effectively pointing outside of the frustum and thus becomes invisible.

Removing the camera.position.z = FRUSTUM_SIDE/2; line, or defining a different frustum, or moving the mesh position to the middle of the new frustum are all possible solutions. I.e. corrected fiddle.

Upvotes: 1

prisoner849
prisoner849

Reputation: 17596

Documentation says:

OrthographicCamera( left, right, top, bottom, near, far )

so, set your camera like this:

camera = new THREE.OrthographicCamera(-FRUSTUM_SIDE/2, FRUSTUM_SIDE/2, 
                                       FRUSTUM_SIDE/2, -FRUSTUM_SIDE/2);

thus you'll have default near and far camera frustrum planes (0.1 and 2000).

Explanation: You set your cam at z-position, which is equal to FRUSTRUM_SIDE/2 and also you set your far camera frustrum plane with the same value. So you see everything between your cam position and the distance from it, which is FRUSTRUM_SIDE/2. In world coordinates, your far plane is at point (0, 0, 0). That's why your triangle disappears when it goes further then the distance of FRUSTRUM_SIDE/2 from your cam.

Upvotes: 2

Related Questions