diff --git a/src/meshes/Tube.js b/src/meshes/Tube.js index 750d8de..78754fc 100644 --- a/src/meshes/Tube.js +++ b/src/meshes/Tube.js @@ -1,4 +1,4 @@ -import { Curve, TubeBufferGeometry } from 'three'; +import { CatmullRomCurve3, Curve, TubeBufferGeometry, Vector3 } from 'three'; import { watch } from 'vue'; import Mesh from './Mesh.js'; @@ -6,6 +6,7 @@ export default { extends: Mesh, props: { path: Curve, + points: Array, tubularSegments: { type: Number, default: 64 }, radius: { type: Number, default: 1 }, radialSegments: { type: Number, default: 8 }, @@ -13,8 +14,7 @@ export default { }, created() { this.createGeometry(); - - const watchProps = ['path', 'tubularSegments', 'radius', 'radialSegments', 'closed']; + const watchProps = ['path', 'points', 'tubularSegments', 'radius', 'radialSegments', 'closed']; watchProps.forEach(prop => { watch(() => this[prop], () => { this.refreshGeometry(); @@ -23,7 +23,19 @@ export default { }, methods: { createGeometry() { - this.geometry = new TubeBufferGeometry(this.path, this.tubularSegments, this.radius, this.radialSegments, this.closed); + let curve; + + if (this.points) { + const _points = []; + this.points.forEach(p => _points.push(new Vector3(p[0], p[1], p[2]))); + curve = new CatmullRomCurve3(_points); + } else if (this.path) { + curve = this.path; + } else { + console.error('Missing path curve or points.'); + } + + this.geometry = new TubeBufferGeometry(curve, this.tubularSegments, this.radius, this.radialSegments, this.closed); }, }, __hmrId: 'Tube',