THREE.js Placing objects on top of Terrain

Questions
1

Following the THREE.js example here (at line # 198 to exact) I created a floor using PlaneGeometry as follows:

  geometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
  geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

  for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {

	 var vertex = geometry.vertices[ i ];
	 vertex.x += Math.random() * 20 - 10;
	 vertex.y += Math.random() * 2;
	 vertex.z += Math.random() * 20 - 10;

  }

(You can see what that floor actually looks like here: floor)

I now want to randomly place 100 spheres on this floor, but since the floor’s height undulates and changes throughout (it’s really more of a terrain than a “floor”) I don’t know how to calculate the "y" coordinate for any given (x, y, z) point on this terrain.
I know how to do it with raycaster - but that’s during run-time. I need to figure out the y-values prior to run-time, because right now, my spheres are all either submerged under the terrain or kinda half popping above it.

How does one go about doing this?

2

You might find THREE.MeshSurfaceSampler useful. It does require BufferGeometry, not Geometry, though.

2 Likes
3

Awesome - didn’t even know MeshSurfaceSampler existed - but got it working already!
Very helpful - thank you!

1 Like