javascript - three.jsのワイヤーフレームの正方形の無限平面

Question

正方形を形成するように配置された交差する線の無限に大きい（または事実上無限に大きい）平面をインスタンス化する効率的な方法を知りたいです。

three.jsにはラインオブジェクトがありますが、これらを大量にインスタンス化する必要がありますか？または、1つの平面オブジェクトをインスタンス化し、ある種の繰り返しマテリアルを適用しますか？おそらく他のより効率的な方法がありますか？

ありがとう

Answer 1

別のアプローチを次に示します。

var grid = new THREE.GridHelper( 200, 10 );
grid.setColors( 0xffffff, 0xffffff );
scene.add( grid );

フォグを追加して、グリッドを地平線の背景に溶け込ませることができます。

scene.fog = new THREE.FogExp2( 0x000000, 0.0128 );
renderer.setClearColor( scene.fog.color, 1 );

それはかなりきれいに見えるはずです。

three.js r.71

Answer 2

このコードは、交差する線の半無限平面を提供します。

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3( - 500, 0, 0 ) );
geometry.vertices.push(new THREE.Vector3( 500, 0, 0 ) );

linesMaterial = new THREE.LineBasicMaterial( { color: 0x787878, opacity: .2, linewidth: .1 } );

for ( var i = 0; i <= 20; i ++ ) {

    var line = new THREE.Line( geometry, linesMaterial );
    line.position.z = ( i * 50 ) - 500;
    scene.add( line );

    var line = new THREE.Line( geometry, linesMaterial );
    line.position.x = ( i * 50 ) - 500;
    line.rotation.y = 90 * Math.PI / 180;
    scene.add( line );
}