I am attempting to create a simple scene with a triangular plane continuously rotating around the x-axis.
Below is the code to create the geometry object, based on a previous question on Stack Overflow:
// 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 animates the scene and applies a slight rotation to the mesh:
function animate() {
requestAnimationFrame( animate );
mesh_1.rotation.x += 0.005;
renderer.render( scene, camera );
}
Everything works well until the value of mesh.rotation.x reaches the [Math.PI, 2*Math.PI] range, causing it to disappear for half of the cycle. You can see this behavior in this JSFiddle.
- This issue is not related to lighting, as there are ambient and directional lights supposed to illuminate the mesh throughout its rotation.
- The problem is not with the material either, since I have set its
sideproperty toTHREE.DoubleSide, and both faces are visible within the[0, Math.PI]range. - I have attempted to add another face to the geometry using
, but the problem persists.geometry_1.faces.push(new THREE.Face3(0, 2, 1)); - As a workaround, I added a second geometry with an opposite face using
and reversed the rotation withgeometry_2.faces.push(new THREE.Face3(0, 2, 1));mesh_2.rotation.x -= 0.005;to achieve the desired result. However, this is not an ideal solution.
Any insights on what might be causing this issue and how to resolve it would be greatly appreciated. Thank you!