CODEWITHSUNDEEP
javascriptthree.js
JohnyWind
JohnyWind

Reputation: 63

ThreeJs create object from another object

I have an object created from importing an .obj I want to clone this object and give it it's own coordinates. To be more precise, I have a wall, for which I attach another object (a window) as a child. It all works fine when dragging the window along the wall. Now, when I want to clone the wall and rotate it 180 degrees, dragging the child along it's parent goes exactly the opposite way from the mouse movement. I would like to reuse the same obj wall for all sides of my building.

Upvotes: 0

Views: 156

Answers (1)

manthrax
manthrax

Reputation: 5036

You are describing two problems.

One is how to clone an object and give it a different position:

var wallCopy = wall.clone();
scene.add(wallCopy);
wallCopy.position.set( 10,20,30 );

The other question is moving an object in Object space instead of World space. I.e. if you change the position.x of an object (the window) that is a child of a rotated object, the object will move relative to its rotated parent.

If you are building some sort of editor, you can use SceneUtils to make this easier...

https://threejs.org/docs/#examples/utils/SceneUtils

At the start of your edit, you would detach the window and attach it to the scene, using SceneUtils.detach... then apply your edit movement, and when the movement is done, attach it back to the wall using SceneUtils.attach.

SceneUtils takes care of keeping the visual transform consistent between the detach and attach operations between different places on the scene hierarchy.

edit: So a way to handle the case you describe in comments, without doing anything fiddly, is to just use more intermediate nodes. You can always set up your scaling and stuff on the child nodes, (You can always update thier matrices and then set their matrixAutoUpdate = false; if you're paranoid about the performance impact.}

Here's what I mean:

{"root", scale:1, children:[anchor1, anchor2]} {"anchor1" scale:1, children:[wall]} {"anchor2" scale:1, children:[wall2]}

Then you can just manipulate the anchors or root to move things around, and the scaling of "wall" will be isolated to its own little sub tree.

Upvotes: 1

Related Questions