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!
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With