web-dev-qa-db-ja.com

Three.JSワイヤフレームマテリアル-すべてのポリゴンとエッジのみ

プロジェクトでThreeJSを使用していますが、古いバージョンは新しいバージョンとは異なる方法でワイヤフレームをレンダリングすることに気付き、元に戻す方法がわかりません（これをお勧めします）。

リリース54を使用したこのフィドルは、ワイヤフレームマテリアルで描画されたオブジェクトの外部エッジのみをレンダリングします： http://jsfiddle.net/ksRyQ/ Mac Chromeの場合）：

enter image description here

一方、新しいバージョンr61を使用して同じコードをローカルで実行すると、次のように各ポリゴンのエッジが表示されます。

enter image description here

両方の場合のコードは単純です：

material = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    wireframe: true
});

キューブを線または何かで作ることができると確信していますが、実際には問題を理解したいと思います。

手がかりはありますか？この設定または調整できる設定はありますか？次に、webGLレンダラーを使用する予定ですが、コードではキャンバスレンダラーを使用していることに注意してください。ただし、同じ現象は両方に当てはまります（他の違いはありますが）。

javascriptthree.js
35
tekunokurato

特定のgeometryのワイヤーフレームをレンダリングしたい場合、次のパターンを使用できます。

var geo = new THREE.EdgesGeometry( geometry ); // or WireframeGeometry( geometry )

var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );

var wireframe = new THREE.LineSegments( geo, mat );

scene.add( wireframe );

WireframeGeometryはすべてのエッジをレンダリングします。 EdgesGeometryはハードエッジのみをレンダリングします。

モデルとそのワイヤフレームの両方をレンダリングする方法については、 この関連する回答 も参照してください。

編集：three.js.r.82に更新

63
WestLangley