WebGL: Updating attributes of an object in three.js

Question

I am trying to animate a sphere, with increasing radii. here are the relevant snippets of my code ..

function create_sphere(){

var sphereMaterial = new THREE.MeshLambertMaterial(
{
    color: 0xCC0000
});


var radius=2,segments=50,rings=50;  
sphere_geometry = new THREE.SphereGeometry(radius, segments, rings)
sphere = new THREE.Mesh(sphere_geometry,sphereMaterial);
sphere.position.y = -10;
sphere.position.needsUpdate = true;
sphere.geometry.dynamic = true;

}

and here is animate function , which I am calling ..

function animate(){
sphere.position.y+=0.1;
sphere.geometry.radius +=0.1;
scene.add(sphere);
renderer.render(scene, camera);
requestAnimationFrame(animate);    
}

But I am unable to increase the radius of the sphere, although it is moving perfectly in y-direction,(implying code is working, and error free). Any suggestions what I might be wrong at ..

Seemingly related: http://stackoverflow.com/questions/16335467/update-radius-of-tubegeometry-at-runtime. — veritasetratio, Jun 04 '13 at 11:41

score 3 · Answer 1 · answered Jun 23 '13 at 07:48

3

For uniform scaling of an object along all three axes:

var sphereScale = 1.0;
...
sphereScale += 0.1;
sphere.scale.set(sphereScale,sphereScale,sphereScale); // x,y,z

answered Jun 23 '13 at 07:48

Tim

751
8
11

score 2 · Accepted Answer · answered Jun 04 '13 at 16:15

The radius parameter is used to calculate the position of the vertices when the geometry is created, and changing its value afterwards will have no effect. To change the size, you can use the scale parameters. If you want to change the size in all three dimensions (x, y, and z), then in your animate function, replace

sphere.geometry.radius +=0.1;

with

sphere.scale.x += 0.1;
sphere.scale.y += 0.1;
sphere.scale.z += 0.1;

which will increase the size of your sphere by 10% of the original size every time the animate function is called.

Hope this helps!

I'm curious if this is 100% true that the parameters of the object can not be used to recreate the object later. e.g. when changing the thickness of a torus tube, simply scaling isn't sufficient, and recreating the object feels heavy — Elliot Woods, Sep 12 '17 at 08:41

WebGL: Updating attributes of an object in three.js

2 Answers2