Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Infinite plane of wireframe squares in three.js

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

like image 934
CL22 Avatar asked Feb 06 '13 19:02

CL22


2 Answers

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

like image 80
WestLangley Avatar answered Oct 24 '22 04:10

WestLangley


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 );
}
like image 42
gaitat Avatar answered Oct 24 '22 05:10

gaitat