I'd like to know an efficient way of instantiating an infinitely large, (or effectively infinitely large) plane of criss-crossing lines arranged to form squares.

three.js has a line object, should I just instantiate a large number of these? Or perhaps instantiate one Plane object, and apply some sort of repeating material? Perhaps there are other more efficient ways?

Thanks

I'd like to know an efficient way of instantiating an infinitely large, (or effectively infinitely large) plane of criss-crossing lines arranged to form squares.

three.js has a line object, should I just instantiate a large number of these? Or perhaps instantiate one Plane object, and apply some sort of repeating material? Perhaps there are other more efficient ways?

Thanks

• javascript
• three.js

2 Answers 2

Here is another approach:

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

You can add fog to make the grid blend into the background at the horizon.

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

It should look quite nice.

three.js r.71

This code will give a semi-infinite plane of criss-crossing lines:

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