Question

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

以下是创建几何对象的代码，如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;可以让我观察到所需的结果，因为这两个几何现在正在消失在{{1}的相对的两半中间隔。然而，这是一个hacky并不理想的解决方案。

那是怎么回事？我该如何解决？谢谢！

Answer 1

Documentation说：

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

所以，将相机设置为：

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

因此你将拥有默认的near和far相机截头飞机（0.1和2000）。

说明：您将凸轮设置在z位置，该位置等于FRUSTRUM_SIDE/2，并且您还将far相机截头体平面设置为相同的值。因此，您可以看到凸轮位置与其距离之间的所有内容，即FRUSTRUM_SIDE/2。在世界坐标中，您的远平面位于点（0,0,0）。这就是为什么当三角形距离你的凸轮距离FRUSTRUM_SIDE/2时，你的三角形会消失。

Answer 2

从@ prisoner849扩展答案，JSFiddle中显示的问题与网格的几何或材质无关，但与{{1}定义的截头体的形状和扩展名无关。 }。

正如video tutorial和documentation中所解释的那样，OrthographicCamera的平截头体是由OrthographicCamera值定义的长方体：

相机应该被认为是附着在近侧表面并面向left, right, top, bottom, near, far的负值。

截头锥的形状定义为：

z axis

我们将能够在我们的图像中看到场景中完全包含在其中的所有对象。

然而，在定义平截头体之后，相机的位置发生了变化：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);（小提琴的第24行）。这有效地移动了整个平截头体而不仅仅是图像的位置，所以虽然先前camera.position.z = FRUSTUM_SIDE/2;中的任何物体都位于平截头体的中心，但现在它将位于它的最远端平面上。

动画功能：

(0,0,0)

将三角形朝向图像平面旋转，但对于function animate() { requestAnimationFrame( animate ); mesh_1.rotation.x += 0.005; renderer.render( scene, camera ); }之间的角度，平面有效地指向平截头体之外，因此变得不可见。

删除[Math.PI, 2*Math.PI]线，或定义不同的平截头体，或将网格位置移动到新平截头体的中间都是可能的解决方案。即corrected fiddle

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

2 个答案: