Burst or displace meshes outward from the center

I am attempting to separate all the meshes that make up the loaded obj file from each other in order for the user to easily view each mesh individually.

I am striving to replicate a similar functionality as shown in this example:

Demo

To achieve this effect, please visit the link and click on the explode icon in the UI tray, then adjust the slider accordingly.

Progress So Far: I have successfully accessed all the meshes within the model and can apply functions to them. Currently, I have looped through the meshes and assigned them random position vectors.

This method works well in separating the model into distinct mesh components.

The Issue:

While assigning random position vectors does separate the meshes, they are placed in arbitrary locations. I am looking to mimic the behavior seen in the shared link. Any assistance or guidance would be greatly appreciated. As a newcomer to threejs, I am eager to expand my knowledge. Thank you in advance.

Edit: Sample Code

    function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
for(var i = 0; i < mainStand.children.length; i++)
{
    pos1 = getRandomArbitrary(1 , 2);
    pos2 = getRandomArbitrary(1 , 2);
    pos3 = getRandomArbitrary(1 , 2);
    mainStand.children[i].position.set(pos1 , pos2 , pos3);
}

Here, mainStand represents the loaded obj Model

Answer №1

To achieve the desired outcome, your goal should be to displace each mesh away from its central position. This can be accomplished by determining the vector that represents the distance between the mesh's current position and the center, and then shifting the mesh in that direction:

let center = new THREE.Vector3(0, 0, 0);
let displacementDistance = 0.1;

for (let i = 0; i < mainStand.children.length; i++) {
    let meshPosition = mainStand.children[i].position;

    let displacementDirection = meshPosition.clone().sub(center).normalize();

    let displacementAmount = displacementDirection.clone().multiplyScalar(displacementDistance);

    mainStand.children[i].position.add(displacementAmount);
}

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's the best way to trigger useEffect whenever a useRef variable gets updated?

I am facing an issue where the variable changes are lost on every re-render when trying to have useEffect run every time it modifies a variable. Using useRef to store the variable between renders leads to useEffect not detecting changes to a ref. I came a ...

Could using an image defer script instead of a lazy image script result in an undefined offset error?

To enhance the pagespeed of my website, Pagespeed Insight recommends using deferred images instead of lazy jQuery images. In an effort to follow this advice, I made adjustments based on suggestions from another source. Read more on stackoverflow I utiliz ...

The JSONLoader in three.js threw an unexpected token error

I need help importing a 3D model stored as a JSON file using the "JSONLoader" function in three.js Below is the code to load the model: var t_rex; var loader = new THREE.JSONLoader(); loader.load('t-rex.json', addModelToScene) function addMod ...

Effortlessly move and release Internet Explorer

Encountering drag and drop issues in Internet Explorer and Safari, while functioning correctly in Firefox 15 (untested on other versions). Dragging and dropping items between dropzones works in Safari, but sorting does not. In Internet Explorer, nothing wo ...

Utilizing Vue CLI plugin to dynamically pass JS variables as props

I am currently using version 4.5 of the Vue CLI plugin. I have created a component that takes in a title as a prop. This component has been converted into a web component and added to an HTML webpage (which is not a Vue JS project) Now, I am attempting to ...

Troubleshooting Autocomplete User Interface Problems

I am currently working on a website user interface and I have encountered an issue specifically in IE7. When searching for a company, the display is not showing up correctly, as demonstrated in the image below. This problem only occurs in IE7, it works fi ...

Adjust the value before moving to the next tab, or if you choose to leave the

Looking for help to display a popup message when a user edits any value? Check out this resource that I found. It currently only triggers when moving to another page, but I need it to work within an Ajax tab system as well. Here is the code I have tried: ...

Find similarities between 2 observable arrays and store them in a new array using knockout data binding

There are three observable arrays set up as follows: a [1,3] b [ {"ID": 1, "Val": "Value1"}, {"ID":2, "Val":"Value2"}, {"ID":3, "Val":"Value3"}] c [] The goal is to compare array a with the IDs of elements in array b and then push the entire value of arr ...

Tips for extracting information from a Javascript Prompt Box and transferring it to a PHP variable for storage in an SQL database

My current issue involves a specific function I want my script to perform: before a user rejects an entry on the server side, the system needs to prompt a text box asking for the reason behind the rejection. The inputted reason should then be saved to a My ...

Timing issues with setInterval and setTimeout are causing them to execute at the incorrect moments

I am struggling with changing the background image using setInterval and setTimeout every x seconds. The issue I am facing is that the timer is not working as intended, causing images to change instantly instead. let images = ['background1.jpg&apo ...

Ways to conceal the lower details in DataGrid Material-UI

Utilizing the DataGrid component from MUI and I'm eager to conceal this element. Any suggestions on how I can achieve this? Thanks! https://i.sstatic.net/2YG9s.png ...

Can anyone suggest a way to detect if a website visitor has previously visited the site using jQuery?

Looking to add a special message for new visitors on my website in a div container. Once they read it, they have the option to click a 'Hide' button to remove it permanently. Any suggestions on how I can achieve this? ...

Navigation bar transforms color once a specific scroll position is reached

My website features a sleek navbar fixed to the top of the window. As users scroll past a specific div, the background color of the navbar changes seamlessly. This functionality has been working flawlessly for me thus far. However, upon adding anchor link ...

Verify if session is in existence

Currently in the process of setting up my NodeJS and Express App, utilizing Passport for authentication through Google Sign In and Login. All functionalities work flawlessly when tested on localhost. The sign-in process is smooth, and upon checking, I can ...

Is there an XML File Wrapper to Generate PDF Output?

Greetings Forum Members, I have been given the responsibility of creating a PDF file from multiple XML files. Has anyone come across an XML wrapper file before? This type of file would essentially contain a list of all the source XML file names in a spec ...

Changing the color of a text box when it is disabled can be achieved through JavaScript

I'm facing an issue with the formatting of my HTML elements. Specifically, I have 2 combo boxes and one text box in which all 3 are disabled. However, when they are disabled, the background color of the text box does not match that of the combo boxes. ...

Animation spinning on a different axis

I'm experimenting with rotating objects on a different axis instead of the default one using animation. Currently, I have implemented it this way. You can interact with the L and Li buttons successfully. However, when you click on the R button, the a ...

Having difficulty utilizing the express.session module in conjunction with HTTPS

I need to implement authentication and session creation on a HTTPS static website using expressjs. Here is the code snippet: app.js: // Set up the https server var express = require('express'); var https = require('https'); var http ...

Tips for exporting telegram information to a Google spreadsheet

Recently, I set up a basic telegram bot using the telegraf framework and wrote this code snippet to log essential data: bot.on('text', (ctx, next) => { console.log(`[text] ${ ctx.message.chat.id } ${ ctx.from.username } ${ ctx.message.chat.f ...

What is the proper way to include "arr[i]" within a for loop?

How can I include "arr[i].length" in my FOR LOOP? Using arr[0].length works correctly, but when using just "i" it throws an error. My goal is to iterate through a 2D array. function calculateSum(arr) { var total = 0; for (let i = 0; i < arr[i] ...