Ways to incorporate an object into a scene with a mesh in three.js without altering its current position

Is there a way to change the parent of an object in a scene without changing its position? Here is a code snippet that demonstrates this: http://plnkr.co/edit/fpjsUkOA0rH6FvG4DL6Z?p=preview

In the provided example, when attempting to add the sphere to the box, its position changes. The goal is to retain the original position of the sphere. By uncommenting line 35 in the code, you can see that the sphere moves towards the box. The objective is to maintain the sphere's position and make it a child of the box. http://plnkr.co/edit/fpjsUkOA0rH6FvG4DL6Z?p=preview

javascriptthree.js

Answer №1

In the case that the question is specifically about the position, Brakebein's answer could be deemed accurate. However, if there is a need to also reverse the scale and rotation, then a solution like the following might be more suitable:

let inverseMatrix = new THREE.Matrix4();
inverseMatrix.getInverse(parentObject.matrix);
childObject.applyMatrix(inverseMatrix);

Answer №2

To maintain the sphere's original world position when adding it to a group, simply subtract the group's position from the sphere's position.

  var material = new THREE.MeshLambertMaterial({color: 0xff0000});

  var cylinderGeometry = new THREE.CylinderGeometry(7, 14, 10, 32);
  var cylinder = new THREE.Mesh(cylinderGeometry, material);

  var coneGeometry = new THREE.ConeGeometry( 8, 20, 32 );
  var cone = new THREE.Mesh(coneGeometry, material);
  cone.position.set(0, 12, 0);
  cone.updateMatrix();

  var group = new THREE.Object3D();
  group.translateX(9);
  group.updateMatrix();

  // if you add cone to group object
  group.add(cylinder);
  group.add(cone);
  scene.add(group);

  var n = new THREE.Matrix4().getInverse(group.matrixWorld);
  cone.applyMatrix(n);

  // if you add cone to cylinder
  group.add(cylinder);
  cylinder.add(cone);
  scene.add(group);

  var n = new THREE.Matrix4().getInverse(cylinder.matrixWorld);
  cone.applyMatrix(n);

  console.log(group.position, cone.position);

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

ReactJS tables that can be filtered and sorted

Within my component's state, there exists an array named 'contributors'. Each element within this array is an object containing various properties. My goal is to present this data in a table format, with the added functionality of sorting an ...

javascriptreactjsfrontend

Modify the transition and design of two progress bars

I'm having an issue with merging two Bootstrap progress bars into one. Initially, the first progress bar appears when the page loads and hides after data is loaded. At the same time, the second progress bar shows up. However, the transition animation ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Setting up Kendo UI for Vue with CDN

Currently, I am in the process of integrating Kendo UI for Vuejs by utilizing CDN based on the recommendations provided on this page: https://www.telerik.com/kendo-vue-ui/components/framework-wrapper/using-cdn/ as well as here: https://www.telerik.com/k ...

javascriptvue.jskendo-ui

Node application experiencing issues retrieving SVG files during production

When testing my application locally, the svg files display correctly with the code below (Angular.js variables are used within curly brackets): <img ng-src="img/servant_{{servant.personality}}.svg" draggable="false"> However, once deployed on Herok ...

javascriptnode.jsangularjssvgexpress

Retrieving Information from Website Components in JavaFX Web View

I am currently developing a Java FX program that loads a folder containing HTML/CSS/JS files with 3 different websites. While the websites are displaying correctly in the webview, I am looking for a way to capture user interactions, such as checkbox selec ...

javascripthtmljavafxwebview

Triggering a success message when clicked using JavaScript

<div id="success"> <button class="btn btn-primary btn-xl" type="submit" id="btnShow">Send</button> </div> As a beginner in JavaScript, I am struggling to write the code for displaying a success alert upon clicking the button. ...

javascriptbootstrap-4

Manage Datatables: Efficiently toggling the display of multiple rows in a loop

This specific inquiry pertains to the Datatables plug-in for JQuery. I am working with an HTML table that contains entries in 3 languages: en, ru, fr. When a language is selected, the entries in the other two languages should be hidden. For instance, if E ...

javascriptjquerydatatabledatatables

Steps to eliminate the JavaScript click action from the combobox

My code currently includes a simple combobox, but I want to remove the click functionality both in the HTML and jQuery. If I remove <a href="javascript:void(0)">Click</a> which jQuery code should I remove from the following snippet? ...

javascriptjqueryjquery-uijquery-pluginscombobox

Unable to view the most recent state

Looking at the code below: export function loginUserRequest() { console.log('ACTION INITIATED'); return { type: LOGIN_USER_REQUEST, }; } we can see the matching reducer: export default function loginReducer(state = initialState, acti ...

javascriptreactjsreduxreact-reduxredux-form

React Native / Redux - The "Cannot update during an existing state transition" error occurs when attempting to update

Currently working on an app using React Native and Redux, I've encountered a snag in the implementation process. An error message pops up saying setState cannot update during an existing state transition (such as within render or another componen ...

javascriptreactjsreact-nativeredux

Understanding the JSON output received from the Servlet

So, I have a Java Servlet set up to return JSON data in Application/JSON format using the GSON library. The GET method of the Servlet requires an ID parameter. When I send a request with BookingID as 1, Chrome shows the AJAX response like this: 0: {W ...

javascriptjqueryajaxjsonservlets

Implementing type-based validations in Vue.js 3 using Yup

Greetings! I am facing a minor issue that needs to be addressed. The scenario is as follows: I need to implement validation based on the type of member. If the member type is corporate, then the tax number should be mandatory while the phone number can be ...

javascriptvue.jsvuejs3yup

What is the best way to include multiple action creators in a single listenerMiddleware in Redux Toolkit?

I am looking to store the current state in my database every time there is a change in any of its properties. I have implemented two middlewares to handle this task, each responsible for dispatching the saveTrip function. Although both middlewares are ide ...

javascriptreactjsreduxreact-reduxredux-toolkit

Steps for setting a JavaScript variable to contain an NDJSON value

I am attempting to store the information from an ndjson file into a JavaScript variable. I have experimented with using both arrays and objects, but encountered errors in the process. This is what I tried: var data = [{"attributes":{}} {"attributes":{}} ...

javascriptjsonndjson

NodeJS is throwing a `ReferenceError` because the `io` variable is not

I am working on a NodeJS project and I need to access a variable that is defined in my app.js file from another file. Is this possible? Here is my code: app.js var app = express(); var io = require('socket.io').listen(app); ... otherFile ...

javascriptnode.js

Issues with v-on:change not triggering method in nuxt.js

Despite my efforts, I can't seem to get this seemingly simple task to work. I came across a question on Stack Overflow that seemed to address the issue - how to fire an event when v-model changes Here is the component that I am working with: <tem ...

javascriptvue.jsvuejs2vue-componentnuxt.js

The content in the div tag isn't showing up properly because of Ajax

I am facing an issue with my Ajax query. Even though I can retrieve the results by posting, they are not displaying in the designated div tag on mainInstructor2.php. Instead, the results are showing up on a different page - specifically, on InstructorStude ...

javascriptjqueryajax

Creating a 3D 'rope' using three.js to link two dynamic objects动态对象

Currently, I am in the process of designing an industrial robot model consisting of moving parts, with movement controlled via a dat.GUI panel. Here is a screenshot depicting the model My current dilemma lies in figuring out how to create the rope compon ...

javascriptgraphicsthree.js3d-modellingdat.gui

Steps for Integrating a Web Service Reference in NodeJS

Can a Web reference be added to a NodeJS project similar to how it's done in .NET framework Web API Projects? Essentially, the NodeJS API project will serve as a middleware between the Front End and an XML Web service. The XML Web service is a secure ...

javascriptnode.jsxmlapiweb-services

Utilize the match() method in JavaScript to target and extract a whole paragraph

I am attempting to extract an entire paragraph from a text file using JavaScript and then display it in an HTML element. Despite reading numerous posts and articles, I have been unable to find the correct regex formula. Here is an excerpt from the text fil ...

javascriptregexmatchwildcardtxt