Infinite Plane?

Questions
, ,
1

So I am trying to create an Infinite Textured Plane, or a Plane that, when moving the Player ( camera ), the Plane updates in such a way to keep positioning ( after the Player is outside a range of say 100 meters ), to where it looks like you’re constantly walking Infinitely on a grassy plane.

Problem is, I don’t know what ‘getWorldPosition ( ).x’ & ‘getWorldPosition ( ).z’ have been changed to, and when I try : ‘( camera.getWorldPosition ( __vecX ).x’ & ‘( camera.getWorldPosition ( __vecZ ).z’, I get the error : ‘three.js:5704 Uncaught TypeError: target.setFromMatrixPosition is not a function’… Also, I do not know what the new syntax is for ‘floor.material.map.repeat.x’ & ‘floor.material.map.repeat.y’, as I seem to be getting an error with that as well.

So in this function, camera is the ‘player’, & floor is a THREE.Mesh ( ) of the Floor Plane

Here is the function :

this.Update_Infinite_Plane = function ( camera, floor )

{

	// copy position of the player ( camera )

	__vecX = ( new THREE.Vector3 ( 0.0, 0.0, 0.0 ).x );
	__vecZ = ( new THREE.Vector3 ( 0.0, 0.0, 0.0 ).z );

	floor.position.x = ( camera.getWorldPosition ( __vecX ) );
	floor.position.z = ( camera.getWorldPosition ( __vecZ ) );

	// move the texture

	__offX = ( camera.getWorldPosition ( __vecX ).x / 100 * floor.material.map.repeat.x );
	__offY = - ( camera.getWorldPosition ( __vecZ ).z / 100 * floor.material.map.repeat.y );

	this.offsetX = ( __offX );
	this.offsetY = ( __offY );

	floor.material.map.offset.set ( this.offsetX, this.offsetY );

}
2

You create a Vector3 and return it’s x property? Also you shouldn’t create objects in a per-frame manner, it’s slow and creates memory the GC might not keep up and crash or cause lag. Create such objects in a closure outside that function.

You get this error because you pass a float to the camera.getWorldPosition call.

Assuming camera.getWorldPosition ( v ) v is a Vector 3 you just call this, then work with this for the floor position and texture offset, no need to call it multiple times.

this.Update_Infinite_Plane = function () {

	const world = new THREE.Vector3;
	
	return function( camera, floor ) {
	
		// copy position of the player ( camera )
		
		camera.getWorldPosition(world);

		floor.position.x = world.x;
		floor.position.z = world.z;

		// move the texture

		this.offsetX = ( world.x / 100 * floor.material.map.repeat.x );
		this.offsetY = - ( world.z / 100 * floor.material.map.repeat.y );

		floor.material.map.offset.set ( this.offsetX, this.offsetY );
	}

}();
3 Likes
3

You can probably get away with creating a really huge plane instead, if it takes the player 10 years to walk to the edge - there’s no real difference :slight_smile:

4

Nah,I actually prefer the above method. :slight_smile:

5

Actually no, simply going across 32bit limit WebGL will end up with distorted jumping vertices and uv’s especially, on mobile this will be an issue much earlier.

So without changing the coordinate system like i did in Tesseract scenes are finite, 32bit is enough for regular worlds though, how large it feels depends on how fast you can move in it.

2 Likes
6

I actually prefer moving the plane WITH the player. :slight_smile:

7

Agreed, again, i said “probably” :smiley:

It’s a clever tactic, you do start to run into issues if you decide to add anything else there, because then you will need to move more than just a plane. Another way would be to use tiles, generate new tiles ahead of the player and remove old ones behind. I have done that in an old collectable game I did a while back.

1 Like