mirror of
https://github.com/troisjs/trois.git
synced 2024-11-24 04:12:02 +08:00
improve tube
This commit is contained in:
parent
c476728322
commit
91fa803bf3
@ -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',
|
||||||
|
Loading…
Reference in New Issue
Block a user