Having trouble getting collision events to trigger in ThreeJS when using the PhysiJS physics engine?

Question

Having trouble getting collision events to trigger in ThreeJS when using the PhysiJS physics engine?

When an object falls and collides with the ground, an alert box should pop up displaying the message "Box just hit the ground".

However, there seems to be an issue as the alert box is not being created upon collision. Additionally, no relevant JavaScript console logs are being generated in this scenario.

If you want to examine the code base, it's available on my GitHub repository at this link. You can clone the project and run it in your Chrome browser. Check out the physijsBox.addEventListener() section in the ****scripts/app.js**** file within the source code for more insights.

// Code snippet goes here
// For full code visit the provided GitHub repo URL above

For further information about PhysiJS collisions, please refer to these resources:

javascript three.js collision-detection physics-engine physijs

Answer 1

Answer №1

If you're looking to enhance your scene, I suggest implementing an update listener:

function initializeScene(){

    // Your scene is created here...

    scene.addEventListener("update", function(){
        scene.simulate(undefined, 2);
    });

    // Continue with the start function...

    scene.simulate();
}

Don't forget to adjust your rendering function like so:

function render(){
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

And just a quick note about window.onload:

window.onload = initializeScene;

Lastly, be sure to set the mass for your moving box; otherwise, it will remain immovable.

Reviewing code...

I noticed you had .setGravity as a property, but in reality, it's a function:

scene.setGravity(new THREE.Vector3(0, -50, 0));

Answer 2

If you're looking to enhance your scene, I suggest implementing an update listener:

function initializeScene(){

    // Your scene is created here...

    scene.addEventListener("update", function(){
        scene.simulate(undefined, 2);
    });

    // Continue with the start function...

    scene.simulate();
}

Don't forget to adjust your rendering function like so:

function render(){
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

And just a quick note about window.onload:

window.onload = initializeScene;

Lastly, be sure to set the mass for your moving box; otherwise, it will remain immovable.

Reviewing code...

I noticed you had .setGravity as a property, but in reality, it's a function:

scene.setGravity(new THREE.Vector3(0, -50, 0));

Having trouble getting collision events to trigger in ThreeJS when using the PhysiJS physics engine?

Answer №1

Similar questions

Enhancing User Experience with JQuery Pagination and Efficient Data Loading

Next js is repeatedly calling a Firestore document in multiple instances during the fetching process

A situation where the event onclick fails to occur within NextJS

The not-found.js file in Next.js is displaying an empty page rather than showing a 404 error message

Is there a chance of a race condition occurring during file uploads when processed individually through AJAX with PHP?

What is the Vercel equivalent to .netlify/functions?

Display a concealed div when an ng-click event occurs within an ng-repeat loop

HighCharts: visualize vertical stacked bars displaying the distribution of percentages within each stack

choosing from dropdown menu items

When making an API request, the response includes the body of the data, however, the specific properties cannot be

Is there a way to automatically trigger a function once another function has completed its execution?

How can the callback from C++ be successfully installed in the Javaobject window within QtWebkit?

Mistakes within the react-router-dom package

Ways to expand CRA ESLint guidelines using the EXTEND_ESLINT environmental variable

Is there a way in Angular to activate the contenteditable feature through a controller?

Experience choppy scrolling in Internet Explorer

Jquery vertical menu with a dynamic sliding animation from the right side to the left side

The age calculator is failing to display the accurate age calculation

Guide to setting the first tab as the default tab using Thymeleaf, Css, and Bootstrap

Incorporating a transparent icon onto an HTML background