javascript - Three.js中线框正方形的无限平面

Question

我想知道一种有效的方法来实例化一个无限大（或实际上无限大）的纵横交错的线平面，这些线排列成正方形。

three.js 有一个 line 对象，我应该只实例化大量这些对象吗？或者也许实例化一个平面对象，并应用某种重复材料？也许还有其他更有效的方法？

谢谢

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 );

它应该看起来很不错。

三.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 );
}