CODEWITHSUNDEEP
three.js
Alex
Alex

Reputation: 21

Changing scale of Three.js object after it is loaded

I am developing an augmented reality project using Three.js and aruco-js. I made my code so that all my 3D Objects are added to the scene (empty) at the beginning but the data gets initially loaded on marker detection. Now I want to create an interface for changing the objects appearance, starting with the possibility of scaling an object.

So I created an updateObject() function to set the new values like this:

function updateObject(object, rotation, translation)
{
    ...
    ...
    ...

    // first method
    object.scale.x = 200;
    object.scale.y = 200;
    object.scale.z = 200;
  
    // second attempt
    object.scale.set(300, 300, 300);
};

I tried both of the methods shown above to set the scale of my object but it has no effect to the rendered images I get. The interesting thing is that the values of the objects in my scene3d DOM object are the values I set in my function. But why doesn't it have any impact on the output? I'm not very familiar with 3d programming in WebGL or Three.js, so if you could give me any hint where the problem might has it's origin I would really appreciate an answer.

FIX: I took a closer look to the 3D objects I was loading and discovered that they have a children called "mesh" inside another children. By trying to change the scale of only the mesh I found out that it works this way. But I think it looks very ugly:

scene3d.children[visibleModels[0][0]+3].children[0].children[0].scale.set(2, 2, 2);
//visibleModels is a list of the markers/models that should be loaded

This is only a test for one single object to change but at least I found a way to solve this. Is this an ordinary way to change the scale of objects? If you have a better solution or anything to add feel free to contribute.

Upvotes: 2

Views: 5695

Answers (1)

Wilt
Wilt

Reputation: 44422

You could also try to scale the object by changing its matrix using the THREE.Matrix4.makeScale method instead:

object.matrix.makeScale( xScale, yScale, zScale );

Or the even simpler THREE.Matrix4.scale method:

object.matrix.scale( scale );

Upvotes: 1

Related Questions