CODEWITHSUNDEEP
javascript3dthree.js
Tarun Gaba
Tarun Gaba

Reputation: 1113

WebGL: Updating attributes of an object in three.js

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

Upvotes: 1

Views: 5058

Answers (2)

Tim
Tim

Reputation: 761

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

Upvotes: 3

Stemkoski
Stemkoski

Reputation: 9045

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!

Upvotes: 2

Related Questions