Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Never-ending floor in THREE.JS scene

What would be the best way to create a continuous-in-every-direction floor in my canvas three.js scene?

Would it be better to attach a THREE.PlaneGeometry to the camera position, so that it travels with the camera.

Or is there another way of texturing the floor of the scene with a texture.

I'm having some trouble with the visibility of my PlaneGeometry, for some reason I have to be a certain distance from it to see it.

/* Floor  */    
var geometry = new THREE.PlaneGeometry( 1000, 1000, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
var floor = new THREE.Mesh( geometry, material );
floor.material.side = THREE.DoubleSide;
floor.rotation.x = de2ra(90);
scene.add( floor );

Open to all techniques!

like image 389
rob-gordon Avatar asked May 02 '13 19:05

rob-gordon


1 Answers

I have an infinite ocean floor in my top-down game. I reposition it to the camera's xy-coordinates (keeping a distance with z). I then modify the texture's offset property so that it appears the floor is moving even though it's glued to the camera.

Regarding "trouble with the visibility of my PlaneGeometry", you probably hit the camera's near or far projection planes (distances) - anything closer than near or further than far is clipped, i.e. culled, i.e. invisible. You can configure it in the camera's constructor.

like image 73
Tapio Avatar answered Sep 17 '22 11:09

Tapio