三.js，沿椭圆曲线移动一个部分

Question

我知道与我的问题相关的问题之前已经被问过并回答过，但在过去的几年里，有三个.js发生了很大的变化，我很难在当前可用的示例中找到我需要的东西。

我有一个椭圆曲线，我想沿着它运行粒子。 我的代码运行没有错误，但它实际上并没有将粒子移动到任何地方。 我错过了什么？

var t = 0;
var curve = new THREE.EllipseCurve( .37,  .15, .35, .25, 150,  450, false, 0 );
var points = curve.getPoints( 50 );
var curveGeometry = new THREE.BufferGeometry().setFromPoints( points );
var particleGeometry = new THREE.Geometry();
var particleMap = new THREE.TextureLoader().load( "/img/spark.png" );
var vertex = new THREE.Vector3();
vertex.x = points[0].x;
vertex.y = points[0].y;
vertex.z = 0;
particleGeometry.vertices.push(vertex); 
particleMaterial = new THREE.PointsMaterial({
    size: .05,
    map: particleMap,
    blending: THREE.AdditiveBlending,
    depthTest: false,
    transparent : true
});
particles = new THREE.Points( particleGeometry, particleMaterial );
scene.add(particles);
animate();
function animate() {
    if (t <= 1) {
        particles.position = curveGeometry.getPointAt(t)
        t += 0.005
    } else {
        t = 0;
    }
    requestAnimationFrame( animate );
    render();
}
function render() {
    renderer.render( scene, camera );
}

Answer 1

只是一个关于如何做到这一点的粗略概念，使用 THREE.Geometry() ：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 50);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setClearColor(0x404040);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var grid = new THREE.GridHelper(40, 40, "white", "gray");
grid.rotation.x = Math.PI * -0.5;
scene.add(grid);
var curve = new THREE.EllipseCurve(0, 0, 20, 20, 0, Math.PI * 2, false, 0);
// using of .getPoints(division) will give you a set of points of division + 1
// so, let's get the points manually :)
var count = 10;
var inc = 1 / count;
var pointAt = 0;
var points = [];
for (let i = 0; i < count; i++) {
  let point = curve.getPoint(pointAt); // get a point of THREE.Vector2()
  point.z = 0; // geometry needs points of x, y, z; so add z
  point.pointAt = pointAt; // save position along the curve in a custom property
  points.push(point);
  pointAt += inc; // increment position along the curve for next point
}
var pointsGeom = new THREE.Geometry();
pointsGeom.vertices = points;
console.log(points);
var pointsObj = new THREE.Points(pointsGeom, new THREE.PointsMaterial({
  size: 1,
  color: "aqua"
}));
scene.add(pointsObj);
var clock = new THREE.Clock();
var time = 0;
render();
function render() {
  requestAnimationFrame(render);
  time = clock.getDelta();
  points.forEach(p => {
    p.pointAt = (p.pointAt + time * 0.1) % 1; // it always will be from 0 to 1
    curve.getPoint(p.pointAt, p); //re-using of the current point
  });
  pointsGeom.verticesNeedUpdate = true;
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>