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

Параметр radius используется для вычисления положения вершин при создании геометрии и последующего изменения его значения. Чтобы изменить размер, вы можете использовать параметры шкалы. Если вы хотите изменить размер во всех трех измерениях (х, у, г), то в функции одушевленного, замените

sphere.geometry.radius +=0.1; 

с

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

, который увеличит размер вашей сферы на 10% от первоначального размера каждый раз, когда вызывается функция анимации.

Надеюсь, это поможет!

Answer 2

Для равномерного масштабирования объекта по всем трем осям:

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