Question

我是three.js的新手，我正在关注this教程。我已经正确地遵循了教程中的源代码，但是我没有得到相同的动画结果。我使用的是three.js 86，而教程（https://www.youtube.com/watch?v=_Lz268dlvmE）则来自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(); });
}

在Three.js中设置顶点动画

0 个答案: