Enhance the mass of an object with Physijs

I've been experimenting with a three.js environment that involves multiple objects changing mass when clicked on. However, the documentation has not provided much clarity and I have yet to come across any examples demonstrating the optimal way to achieve this.

Below is the code snippet where I dynamically add a random number of objects to the scene.

    var random = getRandomArbitrary(4, 50);
    for (var i = 0; i <= random; i++) {
      var geometry = new THREE.IcosahedronGeometry( 5, 0 );

      var physijsMaterial = Physijs.createMaterial(
        new THREE.MeshLambertMaterial( { color: 0xffffff, emissive: 0x333333, shading: THREE.FlatShading } ),
        0, // high friction
        0 // medium restitution /bouciness
      );
      var smallSphere = new Physijs.SphereMesh(
        geometry,
        physijsMaterial,
        0
      );

      smallSphere.position.y = getRandomArbitrary(-50, 50);
      smallSphere.position.z = getRandomArbitrary(-50, 50);
      smallSphere.position.x = getRandomArbitrary(-50, 50);
      smallSphere.name = "Crystals";
      scene.add(smallSphere); 
    }

Here is the part where I attempt to modify the mass of an object.

function generateGravity(event)
  {
    event.preventDefault();

    var vector = new THREE.Vector3();
    vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
    vector.unproject( camera );

    raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );

    var intersects = raycaster.intersectObjects( scene.children, true );

    console.log(intersects);

    length = intersects.length;
    for (var x = 0; x < length; x++) {
      if (intersects[x].object.name == "Crystals") {
        console.log(intersects[x].object.mass);
        intersects[x].object._physijs.mass = 50;
        // intersects[x].object.remove();
      }
    }
  }

I am seeking advice on the most effective approach to updating an object's mass during an event. At present, the function generateGravity is being invoked within the "render" method.

Answer №1

It dawned on me that the issue was occurring due to my placement of scene.simulate() after render().

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

When using a jquery if statement and .each loop, the if statement may not always run

I'm facing an issue where an unexpected if statement is being triggered. I am working on creating a transition between two images on click. Once the transition is complete, I add a class to the body to show and hide some content. My goal is to reverse ...

NPM library for React elements with no need for babel transformation

I have created a UI component using react/ES6 that I want to reuse for multiple projects. Therefore, my idea was to turn it into an npm package. However, it seems like the standard procedure for npm packages is: Place ES6 modules under /src Have a sepa ...

Tips for styling the selected or clicked cell of an HTML5 table

Currently, I am working on a web development project to enhance my skills. I am looking to incorporate a feature that changes the color of a clicked cell to a specific color. For a demonstration, you can view this link: https://jsfiddle.net/pz6tc3ae/30/ T ...

Tips for locating a specific value within an array using ReactJS

I have a set of dates provided by the back-end that I need to work with in order to perform a specific check. If the list contains dates from the month of March, I should display the events for March, and the same for April, and so on. My task involves se ...

JavaScript JSON request denied

As I develop a website, I am encountering an issue with my query requests from local host. Whenever I try to query from Google or the specific address provided, I do not receive any results. Is it possible that there are query limits set for certain URLs ...

Placing an image onto a THREE.js plane

Whenever I attempt to place a .png image on my plane, it simply vanishes. Could it be that THREE.js isn't compatible with Vue.js? Is there another 3D library that supports Vue.js? I'm also interested in adding an SVG, but I haven't quite f ...

AngularJS $HTTP service is a built-in service that makes

I am facing an issue with pulling the list of current streams from the API and iterating that information with AngularJS. I have tried inputting the JSON data directly into the js file, and it works fine with Angular. However, when I use an http request as ...

Bringing Together AngularJS and JQuery: Using $(document).ready(function()) in Harmony with Angular Controller

Can you lend me a hand in understanding this? I have an angular controller that is structured like so: angular.module('myApp', []) .controller('ListCtrl', function($scope, $timeout, $http){ // Making API calls for Health List ...

Clearing the input file: e.stopPropagation does not exist as a function

I found this awesome function on Stack Overflow to reset a file input element. <input type="file" id="image-file" /> Here is the JavaScript code: function clearFileInput(e) { e.wrap('<form>').closest('form').get(0).re ...

Strategies for formatting JSON object key value pairs to display on individual lines

In one of my components, I have a JSON object stored inside an object called "job". It currently renders as: job {"amount": " 12185","job": "GAPA","month": "JANUARY","year": "20 ...

Troubleshooting a problem with jQuery child items

Could someone help me understand why the second div is affected by the last part of the code and not the first? It's puzzling to see all the content disappear, especially when I expected the first div to be impacted as it seems like the immediate pare ...

An error has occurred in the error console indicating an invalid regular expression flag

I am encountering an issue with an invalid regular expression flag w error. The error message reads: Notice: Undefined Variable: image_file_name in web/stud/... In the view source, there is a blank space below this particular line of code. var image_fi ...

Refresh your webpage with new content and modified URLs without the need to reload using window.history.pushState

Hey everyone, I'm looking to incorporate window.history.pushState into my website, but I'm unsure of how to go about it... What I'm aiming for is to have a page dashboard.php and update the URL to dashboard.php?do=edit&who=me, while loa ...

Q.all failing to execute promises within array

Hey all, I'm currently facing an issue while attempting to migrate users - the promises are not being called. User = mongoose.model 'User' User.find({"hisId" : {$exists : true}}).exec (err, doc)-> if err console.error err ...

What are the functionalities of a NodeJS-compatible mysql module that has been promisified?

I'm interested in utilizing MySQL within NodeJS. With my app already using promises, I aim to promisify the mysql module as well. This is what I have so far: Promise = require('bluebird'); var mysql = Promise.promisifyAll(require('mys ...

Tips for validating certain input fields within a designated div container

Is there a way to validate only specific fields within a div, rather than all fields? Take a look at this jsfiddle for an example. Once validation is passed, I want the div to be hidden. However, I do not want to include certain fields such as the input fi ...

Exploring the process of assigning responses to questions within my software program

I am looking to display my question choices as radio buttons in a modal window. I have tried several solutions without success. Here is my question module: import questions from "./Data"; const QuestionModel = () => { return ( <div cl ...

Whispering form using onblur and onfocus

Seeking assistance with echoing a form that includes multiple input fields. Specifically, I am attempting to utilize onblur and onfocus (refer to the conditions outlined in the code). However, I am encountering an issue where the Javascript function does ...

Ensure the header remains fixed when scrolling in an HTML page with Bootstrap

I created the following code. However, when I scroll down the table, the header disappears from view. I would like the header to always remain at the top, even when scrolling. Despite searching Google multiple times and trying various solutions, I have no ...

What is the secret to creating a button that can sort text and another button that flips the word density in my content?

I'm not a fan of having something like this because it's displeasing to the eye: https://i.stack.imgur.com/3F4sp.jpg Instead, I prefer my word density to be more organized and structured. How can I achieve this? Sort by highest word density fi ...