Expanding box geometry from a single side in Three.js

Question

Expanding box geometry from a single side in Three.js

Just starting out with three.js and my first task was to create a box geometry that could be increased from only one side.

Issue : When increasing the width or height of an object, both sides automatically expand.

Check out this jsFiddle Example

I wasted an hour trying to find the correct algorithm:

    geometry = new THREE.BoxGeometry(strength, 200, 200);
    material = new THREE.MeshBasicMaterial({
        color: 0xff0000
    });

    mesh = new THREE.Mesh(geometry, material);
    mesh.applyMatrix( new THREE.Matrix4().makeTranslation( - strength + strength / 2, 0, 0 ) );

Could someone explain to me what exactly - strength + strength / 2 means? (If I increase strength by 1, shouldn't the translation be -1 instead of -0.5?)

What is the term for this type of algorithm and where can I find good resources to learn more about it as a beginner?

javascript three.js geometry

Answer 1

Answer №1

You have the option to adjust the geometry using the .translate() method, eliminating the need for a container object in the scene graph:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 3, 5);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var boxGeom = new THREE.BoxGeometry();
boxGeom.translate(0.5, 0.5, 0); // moving pivot point
var box = new THREE.Mesh(boxGeom, new THREE.MeshNormalMaterial());
scene.add(box);

var clock = new THREE.Clock();
var delta = 0;
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  delta = clock.getDelta();
  time += delta;

  box.scale.set(2.5 + Math.sin(time) * 2, 1.5, 1.5);

  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 2

You have the option to adjust the geometry using the .translate() method, eliminating the need for a container object in the scene graph:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 3, 5);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var boxGeom = new THREE.BoxGeometry();
boxGeom.translate(0.5, 0.5, 0); // moving pivot point
var box = new THREE.Mesh(boxGeom, new THREE.MeshNormalMaterial());
scene.add(box);

var clock = new THREE.Clock();
var delta = 0;
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  delta = clock.getDelta();
  time += delta;

  box.scale.set(2.5 + Math.sin(time) * 2, 1.5, 1.5);

  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 3

Answer №2

Consider this alternative:

let obj = new THREE.Object3D();
let mesh = new THREE.Mesh(new THREE.BoxGeometry(1,1,1));
mesh.position.set(0.5,0.5,0.5);
obj.add(mesh);

scene.add(obj);

obj.scale.set(value,200,200);

Learn more about Scene Graphs here!

Answer 4

Consider this alternative:

let obj = new THREE.Object3D();
let mesh = new THREE.Mesh(new THREE.BoxGeometry(1,1,1));
mesh.position.set(0.5,0.5,0.5);
obj.add(mesh);

scene.add(obj);

obj.scale.set(value,200,200);

Learn more about Scene Graphs here!

Expanding box geometry from a single side in Three.js

Answer №1

Answer №2

Similar questions

Utilizing AngularJS routes to load a specific URL when accessing a page for the first time

What is the best way to execute JavaScript on the main MVC page when an AJAX request in a partial view has finished?

Do GPU-intensive animations get impacted by the CPU's load?

The camera in ThreeJS is stationary and unable to be moved

Verify the MAC address as the user types

What is the best way to populate empty dates within an array of objects using TypeScript or JavaScript?

Feeling uncertain about Node, NPM, Bower, and how to set them up for Bootstrap?

What is the best situation to utilize $(document).ready()?

Managing State with Vuex: Storing Getter Results in the State

Obtain access to the DOM element using template reference variables within the component

Interactive canvas artwork featuring particles

Exploring the Applications of Directives in Multiple Modules within Angular 2

Issue with Click event not functioning properly following an ajax request in a dynamic element within the Backbone framework

Discovering the bottom side of a cube using Euler Angles (or Quaternions) in three.js

Why is it that my website in React crashes when I type rapidly in the TextField component?

Importing a MATLAB table file into a Node.js environment and converting it into an array

What is the best way to prioritize loading JSON models first in three.js and declare a variable before initializing?

Include a personalized header in $http

You must use the 'new' keyword in order to invoke the class constructor

Having trouble with the tooltip feature in Bootstrap?