回転すると3つのjs平面の形状が消えます

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問題ではありません。私はすでに両方の面を観察[0, Math.PI]に間隔mesh.rotation.xにTHREE.DoubleSideに、実際にそのsideプロパティを設定しなかったよう
• これは、material問題になることはありません。
• 別の顔をgeometry_1.faces.push(new THREE.Face3(0, 2, 1));と同じジオメトリに追加しようとしましたが、それでも問題は解決しませんでした。
• 逆の面を持つ第2のジオメトリを追加すると、のメッシュが負に回転すると、[0, 2*Math.PI]間隔の反対側の半分で2つのジオメトリが消えているため、希望の結果が観測されます。しかしこれはハッキリで理想的な解決策ではありません。

何が起こっているのですか？どうすれば解決できますか？ありがとう！

Answer 1

Documentationは言う：そう

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

、このようなあなたのカメラを設定しますので、あなたはデフォルトnearとfarカメラ錐台平面（0.1および2000）があるでしょう

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

。

説明：カムをFRUSTRUM_SIDE/2に等しいz位置に設定し、同じ値でfarカメラ截頭面を設定します。それで、あなたはカム位置とそれからの距離の間のすべてを、FRUSTRUM_SIDE/2と見ます。ワールド座標系では、遠方の平面は点（0、0、0）にあります。だからあなたの三角形がそれからさらに遠くに行くと消えるカムのFRUSTRUM_SIDE/2の距離です。

Answer 2

JSFiddleに示されている問題は、@ prisoner849の答えを拡張すると、メッシュの形状や材質とは関係ありませんが、OrthographicCameraで定義された錐台の形状と拡張があります。

としてこのvideo tutorialでうまく説明しdocumentationに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); 

。

しかし、錐台を定義した後、カメラの位置が変更されます：camera.position.z = FRUSTUM_SIDE/2;（フィドルの24行目）。これにより、画像の位置だけでなく錐台全体が効果的に移動するので、以前は(0,0,0)のオブジェクトが錐台の中心にあったのに対し、今は錐台の遠端面に位置します。

アニメーション関数：

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

像面に向かって三角形を回転させるが、角度について[Math.PI, 2*Math.PI]間面を効果的に錐台の外側を指し、したがって、不可視となります。

camera.position.z = FRUSTUM_SIDE/2;ラインを削除するか、別の錐台を定義するか、または新しい錐台の中央にメッシュ位置を移動することはすべて可能な解決策です。私。 corrected fiddle。