Expanding the size of a Three.js geometry in one direction

Question

Expanding the size of a Three.js geometry in one direction

I've been experimenting with scaling geometries on the y-axis, but I've run into an issue where my cube scales both up and down. I found that using mesh.transformY to animate the cube up by half of the scaling value can create the illusion of the cube scaling only upwards. I'm curious if there are other methods to achieve this effect?


    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
        color: 0xffffff
    }));

    mesh.position.set(0, 2, 0);
    mesh.scale.set(0.98, 0.95, 0.992);
    mesh.castShadow = true;
    scene.add(mesh);

    var tween = new TWEEN.Tween(mesh.scale);
    tween.to({y: 2}, 1000);
    tween.easing(TWEEN.Easing.Elastic.InOut);
    tween.yoyo(true);
    tween.start();

javascript three.js

Answer 1

Answer №1

If you're looking to only scale your geometric shape "upwards", simply ensure that the "bottom" of the shape goes through the origin point. In this scenario, you can achieve this by using the translate() method as shown below:

let shape = new THREE.SphereGeometry( 1, 32, 32 );
shape.translate( 0, 0.5, 0 );

let animation = new TWEEN.Tween( object.scale ).to( { y: 2 }, 1000 );
animation.start();

By following this method, the base of the sphere will stay fixed while its height increases.

Utilizing three.js version r.73

Answer 2

If you're looking to only scale your geometric shape "upwards", simply ensure that the "bottom" of the shape goes through the origin point. In this scenario, you can achieve this by using the translate() method as shown below:

let shape = new THREE.SphereGeometry( 1, 32, 32 );
shape.translate( 0, 0.5, 0 );

let animation = new TWEEN.Tween( object.scale ).to( { y: 2 }, 1000 );
animation.start();

By following this method, the base of the sphere will stay fixed while its height increases.

Utilizing three.js version r.73

Answer 3

Answer №2

When considering a situation where your question pertains to an object existing on a 'ground', such as a 'person' model, it is essential for it to remain grounded regardless of its size. There are two methods to achieve this:

One approach, as suggested by Evilzebra in the comment, involves adjusting the mesh's position based on its height. By scaling the mesh in the vertical direction, you can ensure that it maintains its position relative to the ground. This can be achieved by calculating the new position using the formula: height * scale / 2. The following function demonstrates how this can be implemented:
```
function scaleY ( mesh, scale ) {
    mesh.scale.y = scale ;
    if( ! mesh.geometry.boundingBox ) mesh.geometry.computeBoundingBox();
    var height = mesh.geometry.boundingBox.max.y - mesh.geometry.boundingBox.min.y;
    
    mesh.position.y = height * scale / 2 ;
}
```
Alternatively, another method involves shifting the origin of the coordinates (local space) to the bottom of the geometry. This allows you to adjust the scale without affecting the position. By aligning the origin with the lowest y coordinate, you can easily modify the scale using ThreeJS's native methods. The following function demonstrates how to move the origin to the bottom of the geometry:
```
function originToBottom ( geometry ) {
    var shift = geometry.boundingBox ? geometry.boundingBox.min.y : geometry.computeBoundingBox().min.y;

    for ( var i = 0 ; i < geometry.vertices.length ; i++ ) {
        geometry.vertices[ i ].y -= shift;
    }
    
    geometry.translate( 0, -shift, 0);

    geometry.verticesNeedUpdate = true;
}
```

Answer 4

When considering a situation where your question pertains to an object existing on a 'ground', such as a 'person' model, it is essential for it to remain grounded regardless of its size. There are two methods to achieve this:

One approach, as suggested by Evilzebra in the comment, involves adjusting the mesh's position based on its height. By scaling the mesh in the vertical direction, you can ensure that it maintains its position relative to the ground. This can be achieved by calculating the new position using the formula: height * scale / 2. The following function demonstrates how this can be implemented:
```
function scaleY ( mesh, scale ) {
    mesh.scale.y = scale ;
    if( ! mesh.geometry.boundingBox ) mesh.geometry.computeBoundingBox();
    var height = mesh.geometry.boundingBox.max.y - mesh.geometry.boundingBox.min.y;
    
    mesh.position.y = height * scale / 2 ;
}
```
Alternatively, another method involves shifting the origin of the coordinates (local space) to the bottom of the geometry. This allows you to adjust the scale without affecting the position. By aligning the origin with the lowest y coordinate, you can easily modify the scale using ThreeJS's native methods. The following function demonstrates how to move the origin to the bottom of the geometry:
```
function originToBottom ( geometry ) {
    var shift = geometry.boundingBox ? geometry.boundingBox.min.y : geometry.computeBoundingBox().min.y;

    for ( var i = 0 ; i < geometry.vertices.length ; i++ ) {
        geometry.vertices[ i ].y -= shift;
    }
    
    geometry.translate( 0, -shift, 0);

    geometry.verticesNeedUpdate = true;
}
```

Answer 5

Answer №3

In my case, I found this to be the top result on Google when searching for how to scale a geometry. Let me share the function I use to modify a geometry.

function _alterGeometry(geometry, options) {

    var transformations = [];

    var matrixMultiplier = function (matrices) {
        var matrix = new THREE.Matrix4();
        matrices.forEach(function (m, index) {
            matrix = new THREE.Matrix4().multiplyMatrices(matrix, m);
        });
        return matrix;
    };

    if (options.position)
        transformations.push(new THREE.Matrix4().setPosition(new THREE.Vector3(options.position.x, options.position.y, options.position.z)));

    if (options.rotation && options.rotation.x)
        transformations.push(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), options.rotation.x));

    if (options.rotation && options.rotation.y)
        transformations.push(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), options.rotation.y));

    if (options.rotation && options.rotation.z)
        transformations.push(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), options.rotation.z));

    if (options.scale)
        transformations.push(new THREE.Matrix4().scale(options.scale));

    geometry.applyMatrix(matrixMultiplier(transformations));
    return geometry;

}

Answer 6

In my case, I found this to be the top result on Google when searching for how to scale a geometry. Let me share the function I use to modify a geometry.

function _alterGeometry(geometry, options) {

    var transformations = [];

    var matrixMultiplier = function (matrices) {
        var matrix = new THREE.Matrix4();
        matrices.forEach(function (m, index) {
            matrix = new THREE.Matrix4().multiplyMatrices(matrix, m);
        });
        return matrix;
    };

    if (options.position)
        transformations.push(new THREE.Matrix4().setPosition(new THREE.Vector3(options.position.x, options.position.y, options.position.z)));

    if (options.rotation && options.rotation.x)
        transformations.push(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), options.rotation.x));

    if (options.rotation && options.rotation.y)
        transformations.push(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), options.rotation.y));

    if (options.rotation && options.rotation.z)
        transformations.push(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), options.rotation.z));

    if (options.scale)
        transformations.push(new THREE.Matrix4().scale(options.scale));

    geometry.applyMatrix(matrixMultiplier(transformations));
    return geometry;

}

Expanding the size of a Three.js geometry in one direction

Answer №1

Answer №2

Answer №3

Similar questions

Setting up an event listener for a newly added list through the use of node appendChild

The function window.addEventListener('load') functions properly on desktop computers, but does not work on mobile devices

Choose a particular text node from the element that has been selected

Accepting multiple file inputs in a form without using a selector, but instead utilizing the 'this' keyword or finding an alternative approach

What could be causing my GET route to return an empty array?

When I click a button in d3 to refresh the data on my bar graph, the text fails to update accordingly

Providing input to a nested mongoose query

Display the table upon completion of the form submission

What steps should I take to export a function from a React functional component in order to create a reusable library?

A step-by-step guide to invoking a function upon submitting a form with an external JavaScript file

Template displaying multiple polymer variables side by side

Implementing watch functionality with array in Vuejs for bidirectional communication between parent and child components

Having trouble displaying the selected button in React

Tips on how to modify database records rather than generating new ones

Handling JSON Data in JavaScript

"Typescript: Unraveling the Depths of Nested

JavaScript event/Rails app encounters surprising outcome

What is the process for forming a series of arrays from one singular array?

Button cannot be activated upon selecting a row

How can I maintain the consistent speed of the Javascript timer even when the .deck is clicked?