2

2 つの比較的単純な形状を描いていますが、それらの形状は重なっていません。

コードサンプルは次のとおりです: http://jsfiddle.net/pGD4n/9/

Three.js トラックボールがそこにあるので、クリック アンド ドラッグして 3D 空間でオブジェクトを回転させることができます。問題は、オブジェクトが回転すると、一部の面が消えて下のオブジェクトが表示されることです。もう少し回転すると欠けていた顔が戻ってきますが、他は欠けています。

SmoothShading と Flat Shading の両方で BasicMaterial、Normal Material、LambertMaterial を試しました。照明のあるシーンとないシーンを試してみました。オブジェクトをさらに離すと問題が解決するようですが、指定されたサンプル コードではメッシュがオーバーラップしていないため、この問題は発生しないはずです。Chrome と Firefox の両方で問題が発生します。

OpenGL レンダラーに切り替えると問題が解決すると思いますが、互換性のために Canvas レンダラーを使用する必要があります。

ヘルプやアイデアをいただければ幸いです。

4

1 に答える 1

6

これは の制限ですCanvasRenderer。残念ながら、ピクセルごとの z 並べ替えは使用できないCanvasRendererため、基本的には代わりにポリゴン全体を並べ替えようとします。1 つのポリゴンの中心から見ている場所によっては、側面のポリゴンよりも近い場合があるため、「ジャンプ」します。

現在唯一の解決策は、を使用することWebGLRendererです。私は context2d の新しいレンダラーに取り組んでいます。うまくいけば、webgl を必要とせずにこれを解決できますが、まだ時間がかかります。

于 2012-06-26T20:56:11.070 に答える