Javascript 在Three.js中设置顶点动画

我不熟悉

three.js

，我正在学习教程。我正确地遵循了教程中的源代码，但没有得到相同的动画效果。我使用的是three.js 86，而教程（）是3年前的。我意识到问题很可能来自过时的语法，但我正在努力寻找相关的更新

我希望底部球体中的顶点随着上方球体在y轴上的上升而下降。下面是我的代码，在底部的

draw（）

下详细介绍了顶点动画。我排除了HTML，只是为了显示JavaScript

谢谢

var scene = new THREE.Scene();
var start_breaking=0;
var w = window.innerWidth, h = window.innerHeight;
var camera = new THREE.PerspectiveCamera(45, w/h, 0.1, 10000);
camera.position.set(0,100,400);

var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
renderer.setSize(w,h);

var geometry = new THREE.SphereGeometry(70,64,64);
var colors = [];
for (var i = 0; i < geometry.vertices.length; i++) {
  colors[i] = new THREE.Color();
  colors[i].setRGB(Math.random(),Math.random(),Math.random());
}
geometry.colors = colors;

material = new THREE.PointsMaterial({
  size:7,
  vertexColors: true
});
particleSystem = new THREE.Points(geometry, material);
particleSystem.position.y = 100;
scene.add(particleSystem);

function create_particles() {
  var geomx = new THREE.Geometry();
  geomx.colors = colors;
  var materiax = new THREE.PointsMaterial({
    size: 5,
    vertexColors: true
  });
  var verticex = particleSystem.geometry.vertices;
  verticex.forEach(function (p) {
    var particle = new THREE.Vector3(
      p.x * 1.0,
      p.y * 1.0,
      p.z * 1.0
    );
    geomx.vertices.push(particle);
  });

  particleSystemx = new THREE.Points(geomx, material);
  particleSystemx.sortParticles = true;
  scene.add(particleSystemx);
}
create_particles();

renderer.render(scene, camera);

setTimeout(draw, 500);
function draw() {
  particleSystem.rotation.y += 0.0075;
  particleSystem.position.y += 0.275;

  if (particleSystem.position.y <= 181 && particleSystem.position >= 180.7) {
    create_particles();
    //scene.remove(particleSystem);
    start_breaking=1;
  }
  if (start_breaking) {
    var vertices = particleSystemx.geometry.vertices;
    vertices.forEach(function (v){
      v.y -= v.vy;
      v.x -= v.vx;
      v.z -= v.vz;
    });
  }

  renderer.render(scene, camera);
  requestAnimationFrame(function() {draw(); });
}

var scene=new THREE.scene（）；
var start_BRAKING=0；
var w=window.innerWidth，h=window.innerHeight；
var摄像机=新的三透视摄像机（45，w/h，0.11000）；
摄像机位置设置（0100400）；
var renderer=new THREE.WebGLRenderer（）；
document.body.appendChild（renderer.doElement）；
渲染器。设置大小（w，h）；
var几何=新的三种。球墨法（70,64,64）；
var颜色=[]；
对于（var i=0；i

此时，如果（particleSystem.position.y=180.7），则第二个粒子位置上缺少.y{为您的帮助干杯，但这并没有影响任何事情。或者，如果您必须将粒子沿y轴下落，您将如何做？

v.y-=v.vy；

什么是

.vy

？此时，您的第二个粒子位置缺少一个.y，如果（particleSystem.position.y=180.7）{为您的帮助干杯，但这并没有影响任何事情。或者，如果您必须将粒子沿y轴下落，您会如何做？

v.y-=v.vy；

什么是

.vy

？