Home > Mobile >  How to scale an object only in one direction THREE.JS
How to scale an object only in one direction THREE.JS

Time:10-10

I am adding a cube to my scene in and i wish to change its height but when I increase its y coordinate, it also expands in -ve y too. I am not using any other library other than THREE.JS

    var cubeGeometry2 = new THREE.BoxGeometry(10, 25, 5);
    
    var cubeMaterial2 = new THREE.MeshBasicMaterial({
        
        color: '#5A5A5A',
        wireframe: false
    });
    var cube3 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
    console.log(cubeGeometry2)
    cube3.position.set(25, 5.5, -12);
    scene.add(cube3);

To scale the cube, i am increasing the y coordinate in the box geometry constructor

Solution Edit

I think i did it in the most unconventional way but here it is:

//First look into the vertices by

console.log(cubeGeometry2)
//Changed all the occurrences of Y vertices to  ve with looping in the vertices list
for(let i = 0;i < cube3.geometry.vertices.length;i  ){
        
        
        if(cube3.geometry.vertices[i].y < 0){
            cube3.geometry.vertices[i].y = cube3.geometry.vertices[i].y * 0
        } 
    }

CodePudding user response:

The effect you are looking for can't be achieved by defining a specific height argument for BoxGeometry's constructor.

It's also not possible to achieve the expected result by modulating the scale property of the mesh. Applying a non-uniform scale along the y-axis will scale the mesh along the positive and negative y-axis.

One way to solve the problem is to displace the vertices of the geometry. To do that, you have to identify the corner vertices of the respective side of the cube and then update the data in the buffer attribute.

  • Related