Using three.js to maintain an object's position on top of another object's surface

Question

Using three.js to maintain an object's position on top of another object's surface

I have created a terrain geometry using this JavaScript code:

     var geometry = new THREE.PlaneGeometry(100, 100, 100 , 100 );
     for (var i = 0, l = geometry.vertices.length; i < l; i++) {
          geometry.vertices[i].z  = Math.random() / 2;
     }
     geometry.computeFaceNormals();
     floor = new THREE.Mesh(geometry, floorMaterial);

Now, I have another object3d that needs to move on the surface of this terrain. How can I determine the elevation difference my object needs to adjust, possibly using raycasting?

[Edited] I have successfully addressed the first part, however, I am facing an issue with the raycaster. The distance returned by the raycaster seems to be incorrect, as it is flipped for each face. Here is an example to demonstrate this:

javascript three.js

Answer 1

Answer №1

Indeed, the THREE.Raycaster is expected to function correctly, as you had suspected.

During the update loop, it is necessary to cast rays in a downward direction.

var raycaster = new THREE.Raycaster();
raycaster.set(yourMovingObject.position, THREE.Vector3(0, -1, 0));

Subsequently, you must specify a distance from the ground where the object should cease "falling".

var distance = 40; //adjust to fit your specific requirements

Lastly, ensure to examine the intersections.

var velocity = new THREE.Vector3();

var intersects = raycaster.intersectObject(floor); //use intersectObjects() to check for intersections with multiple objects

//If the new position is higher, move the object upwards
if (distance > intersects[0].distance) {        
    yourMovingObject.position.y += (distance - intersects[0].distance) - 1; //including the -1 to address a shaking issue
}

//Apply gravity and prevent falling through the floor
if (distance >= intersects[0].distance && velocity.y <= 0) {
    velocity.y = 0;
} else if (distance <= intersects[0].distance && velocity.y === 0) {
    velocity.y -= delta ;
}

yourMovingObject.translateY(velocity.y);

Implementing something along these lines should prove effective, although adjustments will likely be necessary to suit your specific environment.

Answer 2

Indeed, the THREE.Raycaster is expected to function correctly, as you had suspected.

During the update loop, it is necessary to cast rays in a downward direction.

var raycaster = new THREE.Raycaster();
raycaster.set(yourMovingObject.position, THREE.Vector3(0, -1, 0));

Subsequently, you must specify a distance from the ground where the object should cease "falling".

var distance = 40; //adjust to fit your specific requirements

Lastly, ensure to examine the intersections.

var velocity = new THREE.Vector3();

var intersects = raycaster.intersectObject(floor); //use intersectObjects() to check for intersections with multiple objects

//If the new position is higher, move the object upwards
if (distance > intersects[0].distance) {        
    yourMovingObject.position.y += (distance - intersects[0].distance) - 1; //including the -1 to address a shaking issue
}

//Apply gravity and prevent falling through the floor
if (distance >= intersects[0].distance && velocity.y <= 0) {
    velocity.y = 0;
} else if (distance <= intersects[0].distance && velocity.y === 0) {
    velocity.y -= delta ;
}

yourMovingObject.translateY(velocity.y);

Implementing something along these lines should prove effective, although adjustments will likely be necessary to suit your specific environment.

Using three.js to maintain an object's position on top of another object's surface

Answer №1

Similar questions

Making a call to a recently generated document in Firestore

Error: AJAX encountered an unexpected token

Is webpack necessary for segregating dependencies during installation?

Utilizing AJAX to seamlessly transfer id elements to a database

Tips for incorporating an entire JavaScript file into a React JS project

JavaScript Plugins for Cordova

Automatically closing the AppDateTimePicker modal in Vuexy theme after selecting a date

Monitor fetch() API calls and responses in JavaScript

Reorganize JSON data in JavaScript

The 'onChange' event in React is being triggered only once

A guide on how to perform a PUT or DELETE operation for Azure Table Storage using Node.js

Issue with activating a Modal through a button inside a table row on React

Typescript polymorphism allows for the ability to create various

Upon loading the page, the menu automatically drops down for easy navigation

Struggling to configure Velocity Js?

The HTML code may fade away, but the JavaScript is still up and running behind the

JS: Initiating a new keypress operation

An alternative approach to coding

What is the reason for the malfunction in the login dialog?

Utilizing helper functions in Node based on their specific types