Raycaster is unable to manipulate BoxMesh objects in any way

I've been working with the Physijs script for simulating physics, such as gravitation. I'm trying to use Raycaster from the THREE.js script to move objects within my scene. The issue I'm facing is that the Raycaster only moves objects (simple boxes) when declared like this:

var box = new Physijs.Mesh(cubeGeometry.clone(), createMaterial);

However, in this case, the physics simulation does not work properly. It only works if I declare it like this:

var create = new Physijs.BoxMesh(cubeGeometry.clone(), createMaterial);

But when declared like this, the Raycaster or moving functionality stops working.

The key difference between these two declarations is that in the first one, it's just a Mesh, whereas in the second one, it's a BoxMesh.

Does anyone have any insights into why this setup isn't functioning correctly? I need to use BoxMesh in order to implement gravity and other physics simulations.

Here is the code snippet for adding a cube to the scene:

function addCube()
{
    controls.enable = false;
    var cubeGeometry = new THREE.CubeGeometry(85, 85, 85);
    var createTexture = new THREE.ImageUtils.loadTexture("images/rocks.jpg");
    var createMaterial = new THREE.MeshBasicMaterial({ map: createTexture });
    var box = new Physijs.BoxMesh(cubeGeometry.clone(), createMaterial);
    box.castShadow = true;
    box.receiveShadow = true;
    box.position.set(0, 300, 0);
    objects.push(box);
    scene.add(box);
}

Answer №1

Solution

Physijs has a unique structure where all primitive shapes, like the Physijs.BoxMesh, inherit from the Physijs.Mesh, which itself inherits from THREE.Mesh. Within the constructor of Physijs.Mesh, there is a crucial internal object known as ._physijs. This object contains a field for the shape type declaration, initially set to null. It is essential for one of its children to re-assign this field; otherwise, when the shape is added to the scene, the Physijs worker script will not know how to handle it and will fail to generate the appropriate shape. Although methods from THREE.js work with objects in the scene due to inheritance from THREE.Scene, these objects are not registered as physical entities because they lack a specific type.

When attempting to manually move a Physijs.BoxMesh by manipulating its position and rotation fields, these changes are overridden by the physics updates initiated by the .simulate method on the scene object. The physics calculations are handled by a separate worker thread, and the results are automatically transferred back to the main thread after computation. To override the automatic updates, developers can utilize the special flags .__dirtyPosition and .__dirtyRotation in a Physijs.Mesh instance.

// Example usage of __dirtyPosition and __dirtyRotation
box.position.set(10, 10, 10);
box.__dirtyPosition = true;
box.rotation.set(0, Math.PI, 0);
box.__dirtyRotation = true;

It is recommended to avoid creating custom instances of Physijs.Mesh and instead utilize the provided primitive shapes. These objects act as wrappers for THREE.Mesh within Physijs and require proper modification by their child classes to exhibit physical properties.

Remember to always use either .__dirtyPosition or .__dirtyRotation when directly modifying an object's position or rotation in order to prevent interference from automatic physics updates. Refer to the code snippet above and additional information here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to activate a Rails controller action in response to a JavaScript event?

I'm in the process of developing a Rails application and I have a requirement to trigger an Update action from one of my controllers based on a JavaScript event. Here's what my controller action looks like currently: def update @subscrip ...

"Resetting select fields in a Django application using jQuery: A step-by-step guide

Recently, I was tasked with taking over a partially-developed Django application. Python is familiar territory for me, but I am completely new to JavaScript. This application heavily relies on jQuery for various form manipulations. One specific issue I enc ...

Implementing a line break within a JavaScript function specifically designed for formatting images

As I am not a javascript developer, the code I have been given for debugging is somewhat challenging. The issue at hand involves an iOS module where a .js CSS file has been set up and images are loading improperly, resulting in the need for horizontal scro ...

Getting started with TinyMCE in Nuxt: A step-by-step guide

I need to incorporate this script into my Nuxt code: <script> tinymce.init({ selector: "#mytextarea", plugins: "emoticons", toolbar: "emoticons", toolbar_location: "bottom", menubar: false ...

Leverage Reveal.js within Next.js by installing it as an npm package

I am currently working on a project that requires integrating Reveal.js with Next.js. However, I am having trouble displaying the slides properly. Every time I try to display them, nothing shows up. Even after attempting to display some slides, I still en ...

Automatic Addition of Row Numbers Enabled

I'm currently exploring coding and experimenting with creating a scorekeeper for family games. I've managed to add rows dynamically and automatically sum up the entered information in the "total" row at the bottom. However, I'm facing an iss ...

Is It Possible to Save Data to Local Storage Using Vue.js?

I am currently working on storing data using Vue.js and local storage. By writing localStorage.set('something', 5) in my main.js file, I can view the data in the Chrome dev tools under the 'Storage' section in the 'Application&apo ...

Error: Uncaught TypeError in Ajax function definition

I encountered an error in my code that says: Uncaught TypeError: Cannot read property 'toLowerCase' of undefined The interesting thing is, when I remove the following part from my source file: delay(function(){ ... }, 1000); the code works ...

Storing a single array from a nested array into the state of a React component

As a new enthusiast in the world of React, I could really use some guidance. Currently, I have an array stored in a state variable called projects 0:{id: 1, title: "Business Web", category: "Web Design", deleted_at: "0000-00-00 00:00:00"} 1:{id: 2, title ...

What could be causing this jQuery selector to not select any elements?

Here's a simple question with some code that needs troubleshooting: $insides = $('<thead><tr><th><!--Blank space --></th></tr></thead><tbody><tr class="green-row"><td>Opportunities to D ...

What are some ways to create a traditional HTML form submission and incorporate jQuery solely for the callbacks?

Given that my page consists solely of a simple "name and email" registration form, I see no reason why I shouldn't stick to the traditional approach: <form action="/Account/Register/" method="POST" id="registration-form"> <fields ...

Using createStyles in TypeScript to align content with justifyContent

Within my toolbar, I have two icons positioned on the left end. At the moment, I am applying this specific styling approach: const useStyles = makeStyles((theme: Theme) => createStyles({ root: { display: 'flex', }, appBar: ...

Utilizing Captcha with Meteor's accounts-ui-bootstrap-3 for enhanced security

Is it possible to incorporate Captcha verification when utilizing the combo of Meteor packages accounts-ui-bootstrap-3 and accounts-password? What is the process for integrating a package such as captchagen with accounts-ui? ...

The Map/Reduce function is producing incorrect results because of null values, causing me to receive NaN or erroneous

I am ready to delve into another Map/Reduce query. Within my database, I have a collection named "example" which is structured like this: { "userid" : "somehash", "channel" : "Channel 1" } The Map/Reduce functions I am using are as follows: var map = f ...

Is my Discord.js bot malfunctioning due to incorrect indentation, despite the absence of errors?

After spending a considerable amount of time developing this bot, I encountered an issue following an update that introduced 'limitedquests'. Previously, the bot worked flawlessly but now, certain functions are not functioning as intended without ...

Calculator app with Next.js: Using keyboard input resets the current number state in real-time

While developing a basic calculator application with Next.js, I encountered an issue. The functionality works correctly when the user interacts with the HTML buttons, but when trying to input numbers using the keyboard, the state resets to 0 before display ...

function complete, ajax request finished

When working with Ajax to get data, I encountered a situation where I needed to return the value of `username` from within an if statement that is inside a loop and a function. How can I achieve this? Your help would be appreciated. $.ajax({ ...

Leveraging AngularJS and PhoneGap for seamless Facebook login/SDK integration even without the need for a server

In the process of developing a web application that will be deployed with Phonegap, I am utilizing NodeJS on the backend and AngularJS on the frontend, incorporating Facebook authentication. Currently, the Node server is running at localhost:3000 (will eve ...

What steps do I need to take to ensure the progress bar extends all the way to the end of the sn

I am currently facing a challenge where the progress bar line in my message queue does not reach the end of the message before it closes. I have included a brief video showcasing the issue along with the relevant code snippet. Any suggestions or ideas woul ...

The expiry date of the cookie remains unchanged

When attempting to create a cookie and specify an expiration date, I am encountering an issue where it remains as "Session". This problem is occurring in Google Chrome. I'm looking for insights on what might be causing this behavior. The code snippe ...