简体   繁体   中英

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

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
        } 
    }

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM