// 创建物体
const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: "#ff0000" });
cube = new THREE.Mesh(boxGeometry, cubeMaterial);
scene.add(cube);
// 初始化轨道器,为CSS2D可以和模型同步移动,需要设置为labelRenderer渲染器
controls = new OrbitControls(camera, renderer.domElement);
// 创建曲线
curve = new THREE.CatmullRomCurve3([
new THREE.Vector3(-10, 0, 10),
new THREE.Vector3(-5, 5, 5),
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(5, -5, 5),
new THREE.Vector3(10, 0, 10),
]);
// 是否闭合
curve.closed = true;
// 在曲线里面 通过getPoints获取51个点
const points = curve.getPoints(50);
console.log(points);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const curveObject = new THREE.Line(geometry, material);
scene.add(curveObject);
render() {
controls.update();
renderer.render(scene, camera);
// 沿着曲线移动
const elapsed = clock.getElapsedTime();
const time = (elapsed / 10) % 1;
console.log(time);
const point = curve.getPoint(time);
console.log(point);
cube.position.copy(point);
requestAnimationFrame(this.render);
},