javascript - WebGL: Updating attributes of an object in three.js - Stack Overflow

admin管理员组

文章数量:1430056

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

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

• javascript
• 3d
• three.js

Share Improve this question Follow asked Jun 4, 2013 at 11:34 Tarun GabaTarun Gaba 1,11311 gold badge99 silver badges1616 bronze badges 1

• Seemingly related: stackoverflow./questions/16335467/…. – veritasetratio Commented Jun 4, 2013 at 11:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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

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!

本文标签： javascriptWebGL Updating attributes of an object in threejsStack Overflow