WebGL：在three.js中更新對象的屬性

Question

我正在嘗試為半徑增加的球體設置動畫。 這是我的代碼的相關片段。

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;

}

這是動畫函數，我正在調用..

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

但是我無法增加球體的半徑，盡管它在y方向上移動得很好（這意味着代碼正在工作，並且沒有錯誤）。 任何建議我可能在..

Answer 1

為了沿所有三個軸均勻縮放對象：

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

Answer 2

radius參數用於在創建幾何圖形時計算頂點的位置，此后更改其值將無效。 要更改大小，可以使用比例參數。 如果要更改三個維度（x，y和z）的大小，請在動畫函數中替換

sphere.geometry.radius +=0.1;

與

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

每次調用動畫功能時，都會使球體的大小增加原始大小的10％。

希望這可以幫助！