Jump to content
Search Community

Spidey

Members
  • Posts

    1
  • Joined

  • Last visited

Spidey's Achievements

  1. 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!
×
×
  • Create New...