web-dev-qa-db-ja.com

Three.js：平面は半分の時間しか見えません

Three.jsを使用して、回転する平面を作成しました。何らかの理由で、飛行機は半分の時間表示されません。私はフィドルを作成しました ここ 動作を示しています。

javascriptthree.js
26
Randomblue

これはThree.jsリビジョンr50でわずかに変更されていることに注意してください。平面の両側のレンダリングは、マテリアルのsideプロパティを介して実行できます。

plane.material.side = THREE.DoubleSide;

詳細については、 ここ を参照してください。

39
Chris

飛行機の背面がレンダリングされないため、表示されません（または、より適切に言えば、飛行機にはデフォルトで背面がありません。補足として、これについては backface-culling を参照してください。この場合は問題ではありませんが、レンダリングについて少し洞察が得られる場合があります）。

Three.jsは、背面をレンダリングする非常に簡単な方法を提供します。

Three.jsの場合-r49以下：

あなたがする必要があるのはあなたのplane-ObjectのdoubleSided-プロパティをtrueに設定することだけです。

plane.doubleSided = true;

新しいバージョンの場合-r50以降

新しいリビジョンでは、donnyBがすでに彼の回答で正しく述べているように、プロパティはObject3DオブジェクトからMaterialオブジェクトに移動されたため、次のように少し異なる設定を行う必要があります。そう：

plane.material.side = THREE.DoubleSide;

また、フィドルを編集して表示しました： http://jsfiddle.net/VsWb9/1084/

three.jsを使用しています-r50より新しいバージョンで、プロパティは35行目に設定されています

15
GNi33