CODEWITHSUNDEEP
maththree.jsgame-enginecollisionterrain
Hobbes
Hobbes

Reputation: 801

Three.js Precision Terrain Collision

've been working on a game engine using the WebGL library Three.js. I have basic terrain collision working to the point where I can find the face the user is standing on. Using the average or maximum Y position of the faces vertices is not sufficient.

What formula can I use to find the exact Y position of an object relative to the terrain face that is "standing" on? Assuming I know the faces four vertex positions and the objects vector position.

enter image description here

The plane is a THREE.PlaneGeometry(2000,2000,128,128) augmented by a heightmap. The image above is one of it's faces.

Upvotes: 3

Views: 3056

Answers (2)

Pierfrancesco Soffritti
Pierfrancesco Soffritti

Reputation: 1738

You can easily find the height of the face your object is standing on

const down = new THREE.Vector3(0, -1, 0);
const raycaster = new THREE.Raycaster();

raycaster.set(obj.position, down);
const collisionResults = raycaster.intersectObject(terrain);

if (collisionResults.length > 0 && collisionResults[0].distance > 0)
   const pointHeight = collisionResults[0].point.y;

at this point just subtract pointHeight from the y coordinate of your object, to get the relative height.

const relativeHeight = obj.position.y - pointHeight;

Upvotes: 2

gaitat
gaitat

Reputation: 12632

I cannot put code in the comment so I am putting it here. You dont need to do the math. Let three.js do it for you. You can do something like the following:

var plane = new THREE.Plane();
plane.setFromCoplanarPoints (v1, v2, v3);

// x, y, z: position of your object
var ray = new THREE.Ray (new THREE.Vector3(x, y, z), new THREE.Vector3(0, 1, 0));
var where = ray.intersectPlane (plane);

and from the Vector3 'where' you use the y component to change the position of your object.

Upvotes: 6

Related Questions