javascript - 三个js平面几何体旋转时消失

Question

我正在尝试创建一个非常简单的场景，其中包含一个围绕 x 轴连续旋转的三 Angular 形平面。

这是创建几何对象的代码，如 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));

动画函数渲染场景并向网格添加小旋转:

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

一切正常，直到 mesh.rotation.x 的值进入 [Math.PI, 2*Math.PI]间隔，此时它恰好消失了一半的周期。这个JSFiddle复制我正在观察的行为。

• 这不是 light问题，因为环境光和定向光应该照亮网格旋转的所有点。
• 这不应该是 material问题，因为我确实设置了它的 side属性至THREE.DoubleSide事实上在区间 mesh.rotation.x进入[0, Math.PI]我已经观察过两张脸了。
• 我尝试使用 geometry_1.faces.push(new THREE.Face3(0, 2, 1)); 将另一个面添加到相同的几何体中但这仍然没有解决问题。
• 添加具有相对面的第二个几何体 geometry_2.faces.push(new THREE.Face3(0, 2, 1));并使网格负向旋转 mesh_2.rotation.x -= 0.005;让我能够观察到所需的结果，因为这两个几何图形现在消失在 [0, 2*Math.PI] 的相对两半中间隔。然而，这是一个老套的解决方案，并不是理想的解决方案。

所以这是怎么回事？我该如何解决？谢谢!

Answer 1

Documentation说:

正交相机(左、右、上、下、近、远)

所以，像这样设置你的相机:

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

因此，您将拥有默认的近和远相机平截头平面(0.1 和 2000)。

解释:您将相机设置在 z 位置，该位置等于 FRUSTRUM_SIDE/2，并且您将 far 相机平截头平面设置为相同的值。因此，您可以看到凸轮位置和距它的距离(FRUSTRUM_SIDE/2)之间的所有内容。在世界坐标中，您的远平面位于点 (0, 0, 0)。这就是为什么当您的三 Angular 形距离您的摄像头超过 FRUSTRUM_SIDE/2 的距离时，它就会消失。