THREE.js Placing objects on top of Terrain

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?

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


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

1 Like