Hey everyone!
I've got a curve and red cone (please, see attached image) and what I need to do is make this red cone move along curve. How could I do it?
Here's a part of code where I create curve, cone and spheres along curve:
private buildCurve = (): { cone: Mesh<ConeGeometry, MeshBasicMaterial>; curvePoints: Vector3[]; points: Vector3[] } => {
const points = this.record.map(({ position: { x, y, z } }) => new THREE.Vector3(x, y, z));
const curve = new THREE.CatmullRomCurve3(points);
const curvePoints = curve.getPoints(points.length * 10);
const tubeGeometry = new THREE.TubeGeometry(curve, points.length, 2, 8, false);
tubeGeometry.center();
const tubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
const geometry = new THREE.BufferGeometry().setFromPoints(curvePoints);
const material = new THREE.LineBasicMaterial({ color: 0x9be5f2 });
const curveObject = new THREE.Line(geometry, material);
points.forEach(p => {
const SPHgeometry = new THREE.SphereBufferGeometry( .07, 36, 26 );
const SPHmaterial = new THREE.MeshBasicMaterial({ color: 0x9be5f2 });
const sphere = new THREE.Mesh(SPHgeometry, SPHmaterial);
sphere.name = 'timeStampSphere';
sphere.position.set(p.x, p.y, p.z)
this.aframeController.scene.add(sphere);
});
const coneGeometry = new THREE.ConeGeometry( .2, .4, 32 );
const coneMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cone = new THREE.Mesh(coneGeometry, coneMaterial);
cone.name = 'cone-arrow';
cone.position.set(points[0].x, points[0].y, points[0].z);
cone.rotateX(Math.PI / 2);
this.aframeController.scene.add(tube, curveObject);
return {cone, curvePoints, points}
};
And here's a part of code where I try to create animation, but every time I get nothing:
public setConeTimeline = () => {
let coneData = this.buildCurve();
const pos = coneData.cone.position;
this.aframeController.scene.add(coneData.cone);
const path = coneData.points;
const dur = this.interval * 3;
path.forEach((v, i) => {
let _pos = i === 0 ? {
x: pos.x,
y: pos.y,
z: pos.z
} : path[i -1]
this.conPlay.fromTo(
coneData.cone,
{ ..._pos },
{
...v,
duration: dur,
paused: true
}
);
})
}
And this image, I talked about at the very beginning:
Thank you!