1
0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00

improve tube

This commit is contained in:
Kevin Levron 2021-03-07 16:54:15 +01:00
parent c476728322
commit 91fa803bf3

View File

@ -1,4 +1,4 @@
import { Curve, TubeBufferGeometry } from 'three'; import { CatmullRomCurve3, Curve, TubeBufferGeometry, Vector3 } from 'three';
import { watch } from 'vue'; import { watch } from 'vue';
import Mesh from './Mesh.js'; import Mesh from './Mesh.js';
@ -6,6 +6,7 @@ export default {
extends: Mesh, extends: Mesh,
props: { props: {
path: Curve, path: Curve,
points: Array,
tubularSegments: { type: Number, default: 64 }, tubularSegments: { type: Number, default: 64 },
radius: { type: Number, default: 1 }, radius: { type: Number, default: 1 },
radialSegments: { type: Number, default: 8 }, radialSegments: { type: Number, default: 8 },
@ -13,8 +14,7 @@ export default {
}, },
created() { created() {
this.createGeometry(); this.createGeometry();
const watchProps = ['path', 'points', 'tubularSegments', 'radius', 'radialSegments', 'closed'];
const watchProps = ['path', 'tubularSegments', 'radius', 'radialSegments', 'closed'];
watchProps.forEach(prop => { watchProps.forEach(prop => {
watch(() => this[prop], () => { watch(() => this[prop], () => {
this.refreshGeometry(); this.refreshGeometry();
@ -23,7 +23,19 @@ export default {
}, },
methods: { methods: {
createGeometry() { 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', __hmrId: 'Tube',