mirror of
https://github.com/troisjs/trois.git
synced 2024-11-24 04:12:02 +08:00
wip (geometries)
This commit is contained in:
parent
53a5f32344
commit
f82a7d5ab4
@ -1,5 +1,5 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { BoxGeometry } from 'three';
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { BoxGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
size: Number,
|
||||
@ -9,14 +9,14 @@ export const props = {
|
||||
widthSegments: { type: Number, default: 1 },
|
||||
heightSegments: { type: Number, default: 1 },
|
||||
depthSegments: { type: Number, default: 1 },
|
||||
};
|
||||
}
|
||||
|
||||
export function createGeometry(comp) {
|
||||
export function createGeometry(comp: any): BoxGeometry {
|
||||
if (comp.size) {
|
||||
return new BoxGeometry(comp.size, comp.size, comp.size, comp.widthSegments, comp.heightSegments, comp.depthSegments);
|
||||
return new BoxGeometry(comp.size, comp.size, comp.size, comp.widthSegments, comp.heightSegments, comp.depthSegments)
|
||||
} else {
|
||||
return new BoxGeometry(comp.width, comp.height, comp.depth, comp.widthSegments, comp.heightSegments, comp.depthSegments);
|
||||
return new BoxGeometry(comp.width, comp.height, comp.depth, comp.widthSegments, comp.heightSegments, comp.depthSegments)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default geometryComponent('BoxGeometry', props, createGeometry);
|
||||
export default geometryComponent('BoxGeometry', props, createGeometry)
|
@ -1,15 +1,15 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { CircleGeometry } from 'three';
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { CircleGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
radius: { type: Number, default: 1 },
|
||||
segments: { type: Number, default: 8 },
|
||||
thetaStart: { type: Number, default: 0 },
|
||||
thetaLength: { type: Number, default: Math.PI * 2 },
|
||||
};
|
||||
}
|
||||
|
||||
export function createGeometry(comp) {
|
||||
return new CircleGeometry(comp.radius, comp.segments, comp.thetaStart, comp.thetaLength);
|
||||
};
|
||||
export function createGeometry(comp: any): CircleGeometry {
|
||||
return new CircleGeometry(comp.radius, comp.segments, comp.thetaStart, comp.thetaLength)
|
||||
}
|
||||
|
||||
export default geometryComponent('CircleGeometry', props, createGeometry);
|
||||
export default geometryComponent('CircleGeometry', props, createGeometry)
|
@ -1,5 +1,5 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { ConeGeometry } from 'three';
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { ConeGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
radius: { type: Number, default: 1 },
|
||||
@ -9,10 +9,10 @@ export const props = {
|
||||
openEnded: { type: Boolean, default: false },
|
||||
thetaStart: { type: Number, default: 0 },
|
||||
thetaLength: { type: Number, default: Math.PI * 2 },
|
||||
};
|
||||
}
|
||||
|
||||
export function createGeometry(comp) {
|
||||
return new ConeGeometry(comp.radius, comp.height, comp.radialSegments, comp.heightSegments, comp.openEnded, comp.thetaStart, comp.thetaLength);
|
||||
};
|
||||
export function createGeometry(comp: any): ConeGeometry {
|
||||
return new ConeGeometry(comp.radius, comp.height, comp.radialSegments, comp.heightSegments, comp.openEnded, comp.thetaStart, comp.thetaLength)
|
||||
}
|
||||
|
||||
export default geometryComponent('ConeGeometry', props, createGeometry);
|
||||
export default geometryComponent('ConeGeometry', props, createGeometry)
|
@ -1,5 +1,5 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { CylinderGeometry } from 'three';
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { CylinderGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
radiusTop: { type: Number, default: 1 },
|
||||
@ -10,10 +10,10 @@ export const props = {
|
||||
openEnded: { type: Boolean, default: false },
|
||||
thetaStart: { type: Number, default: 0 },
|
||||
thetaLength: { type: Number, default: Math.PI * 2 },
|
||||
};
|
||||
}
|
||||
|
||||
export function createGeometry(comp) {
|
||||
return new CylinderGeometry(comp.radiusTop, comp.radiusBottom, comp.height, comp.radialSegments, comp.heightSegments, comp.openEnded, comp.thetaStart, comp.thetaLength);
|
||||
};
|
||||
export function createGeometry(comp: any): CylinderGeometry {
|
||||
return new CylinderGeometry(comp.radiusTop, comp.radiusBottom, comp.height, comp.radialSegments, comp.heightSegments, comp.openEnded, comp.thetaStart, comp.thetaLength)
|
||||
}
|
||||
|
||||
export default geometryComponent('CylinderGeometry', props, createGeometry);
|
||||
export default geometryComponent('CylinderGeometry', props, createGeometry)
|
@ -1,13 +0,0 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { DodecahedronGeometry } from 'three';
|
||||
|
||||
export const props = {
|
||||
radius: { type: Number, default: 1 },
|
||||
detail: { type: Number, default: 0 },
|
||||
};
|
||||
|
||||
export function createGeometry(comp) {
|
||||
return new DodecahedronGeometry(comp.radius, comp.detail);
|
||||
};
|
||||
|
||||
export default geometryComponent('DodecahedronGeometry', props, createGeometry);
|
13
src/geometries/DodecahedronGeometry.ts
Normal file
13
src/geometries/DodecahedronGeometry.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { DodecahedronGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
radius: { type: Number, default: 1 },
|
||||
detail: { type: Number, default: 0 },
|
||||
}
|
||||
|
||||
export function createGeometry(comp: any): DodecahedronGeometry {
|
||||
return new DodecahedronGeometry(comp.radius, comp.detail)
|
||||
}
|
||||
|
||||
export default geometryComponent('DodecahedronGeometry', props, createGeometry)
|
@ -1,64 +0,0 @@
|
||||
import { defineComponent, watch } from 'vue';
|
||||
|
||||
const Geometry = defineComponent({
|
||||
inject: ['mesh'],
|
||||
props: {
|
||||
rotateX: Number,
|
||||
rotateY: Number,
|
||||
rotateZ: Number,
|
||||
},
|
||||
created() {
|
||||
if (!this.mesh) {
|
||||
console.error('Missing parent Mesh');
|
||||
}
|
||||
|
||||
this.watchProps = [];
|
||||
Object.entries(this.$props).forEach(e => this.watchProps.push(e[0]));
|
||||
|
||||
this.createGeometry();
|
||||
this.rotateGeometry();
|
||||
this.mesh.setGeometry(this.geometry);
|
||||
|
||||
this.addWatchers();
|
||||
},
|
||||
unmounted() {
|
||||
this.geometry.dispose();
|
||||
},
|
||||
methods: {
|
||||
addWatchers() {
|
||||
this.watchProps.forEach(prop => {
|
||||
watch(() => this[prop], () => {
|
||||
this.refreshGeometry();
|
||||
});
|
||||
});
|
||||
},
|
||||
rotateGeometry() {
|
||||
if (this.rotateX) this.geometry.rotateX(this.rotateX);
|
||||
if (this.rotateY) this.geometry.rotateY(this.rotateY);
|
||||
if (this.rotateZ) this.geometry.rotateZ(this.rotateZ);
|
||||
},
|
||||
refreshGeometry() {
|
||||
const oldGeo = this.geometry;
|
||||
this.createGeometry();
|
||||
this.rotateGeometry();
|
||||
this.mesh.setGeometry(this.geometry);
|
||||
oldGeo.dispose();
|
||||
},
|
||||
},
|
||||
render() { return []; },
|
||||
});
|
||||
|
||||
export default Geometry;
|
||||
|
||||
export function geometryComponent(name, props, createGeometry) {
|
||||
return defineComponent({
|
||||
name,
|
||||
extends: Geometry,
|
||||
props,
|
||||
methods: {
|
||||
createGeometry() {
|
||||
this.geometry = createGeometry(this);
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
64
src/geometries/Geometry.ts
Normal file
64
src/geometries/Geometry.ts
Normal file
@ -0,0 +1,64 @@
|
||||
import { defineComponent, watch } from 'vue'
|
||||
|
||||
const Geometry = defineComponent({
|
||||
inject: ['mesh'],
|
||||
props: {
|
||||
rotateX: Number,
|
||||
rotateY: Number,
|
||||
rotateZ: Number,
|
||||
},
|
||||
created() {
|
||||
if (!this.mesh) {
|
||||
console.error('Missing parent Mesh')
|
||||
}
|
||||
|
||||
this.watchProps = []
|
||||
Object.entries(this.$props).forEach(e => this.watchProps.push(e[0]))
|
||||
|
||||
this.createGeometry()
|
||||
this.rotateGeometry()
|
||||
this.mesh.setGeometry(this.geometry)
|
||||
|
||||
this.addWatchers()
|
||||
},
|
||||
unmounted() {
|
||||
this.geometry.dispose()
|
||||
},
|
||||
methods: {
|
||||
addWatchers() {
|
||||
this.watchProps.forEach(prop => {
|
||||
watch(() => this[prop], () => {
|
||||
this.refreshGeometry()
|
||||
})
|
||||
})
|
||||
},
|
||||
rotateGeometry() {
|
||||
if (this.rotateX) this.geometry.rotateX(this.rotateX)
|
||||
if (this.rotateY) this.geometry.rotateY(this.rotateY)
|
||||
if (this.rotateZ) this.geometry.rotateZ(this.rotateZ)
|
||||
},
|
||||
refreshGeometry() {
|
||||
const oldGeo = this.geometry
|
||||
this.createGeometry()
|
||||
this.rotateGeometry()
|
||||
this.mesh.setGeometry(this.geometry)
|
||||
oldGeo.dispose()
|
||||
},
|
||||
},
|
||||
render() { return []; },
|
||||
})
|
||||
|
||||
export default Geometry
|
||||
|
||||
export function geometryComponent(name, props, createGeometry) {
|
||||
return defineComponent({
|
||||
name,
|
||||
extends: Geometry,
|
||||
props,
|
||||
methods: {
|
||||
createGeometry() {
|
||||
this.geometry = createGeometry(this)
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
@ -1,13 +0,0 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { IcosahedronGeometry } from 'three';
|
||||
|
||||
export const props = {
|
||||
radius: { type: Number, default: 1 },
|
||||
detail: { type: Number, default: 0 },
|
||||
};
|
||||
|
||||
export function createGeometry(comp) {
|
||||
return new IcosahedronGeometry(comp.radius, comp.detail);
|
||||
};
|
||||
|
||||
export default geometryComponent('IcosahedronGeometry', props, createGeometry);
|
13
src/geometries/IcosahedronGeometry.ts
Normal file
13
src/geometries/IcosahedronGeometry.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { IcosahedronGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
radius: { type: Number, default: 1 },
|
||||
detail: { type: Number, default: 0 },
|
||||
}
|
||||
|
||||
export function createGeometry(comp: any): IcosahedronGeometry {
|
||||
return new IcosahedronGeometry(comp.radius, comp.detail)
|
||||
}
|
||||
|
||||
export default geometryComponent('IcosahedronGeometry', props, createGeometry)
|
@ -1,15 +1,15 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { LatheGeometry } from 'three';
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { LatheGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
points: Array,
|
||||
segments: { type: Number, default: 12 },
|
||||
phiStart: { type: Number, default: 0 },
|
||||
phiLength: { type: Number, default: Math.PI * 2 },
|
||||
};
|
||||
}
|
||||
|
||||
export function createGeometry(comp) {
|
||||
return new LatheGeometry(comp.points, comp.segments, comp.phiStart, comp.phiLength);
|
||||
};
|
||||
export function createGeometry(comp: any): LatheGeometry {
|
||||
return new LatheGeometry(comp.points, comp.segments, comp.phiStart, comp.phiLength)
|
||||
}
|
||||
|
||||
export default geometryComponent('LatheGeometry', props, createGeometry);
|
||||
export default geometryComponent('LatheGeometry', props, createGeometry)
|
@ -1,13 +0,0 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { OctahedronGeometry } from 'three';
|
||||
|
||||
export const props = {
|
||||
radius: { type: Number, default: 1 },
|
||||
detail: { type: Number, default: 0 },
|
||||
};
|
||||
|
||||
export function createGeometry(comp) {
|
||||
return new OctahedronGeometry(comp.radius, comp.detail);
|
||||
};
|
||||
|
||||
export default geometryComponent('OctahedronGeometry', props, createGeometry);
|
13
src/geometries/OctahedronGeometry.ts
Normal file
13
src/geometries/OctahedronGeometry.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { OctahedronGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
radius: { type: Number, default: 1 },
|
||||
detail: { type: Number, default: 0 },
|
||||
}
|
||||
|
||||
export function createGeometry(comp: any): OctahedronGeometry {
|
||||
return new OctahedronGeometry(comp.radius, comp.detail)
|
||||
}
|
||||
|
||||
export default geometryComponent('OctahedronGeometry', props, createGeometry)
|
@ -1,15 +1,15 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { PlaneGeometry } from 'three';
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { PlaneGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
width: { type: Number, default: 1 },
|
||||
height: { type: Number, default: 1 },
|
||||
widthSegments: { type: Number, default: 1 },
|
||||
heightSegments: { type: Number, default: 1 },
|
||||
};
|
||||
}
|
||||
|
||||
export function createGeometry(comp) {
|
||||
return new PlaneGeometry(comp.width, comp.height, comp.widthSegments, comp.heightSegments);
|
||||
};
|
||||
export function createGeometry(comp: any): PlaneGeometry {
|
||||
return new PlaneGeometry(comp.width, comp.height, comp.widthSegments, comp.heightSegments)
|
||||
}
|
||||
|
||||
export default geometryComponent('PlaneGeometry', props, createGeometry);
|
||||
export default geometryComponent('PlaneGeometry', props, createGeometry)
|
@ -1,15 +1,15 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { PolyhedronGeometry } from 'three';
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { PolyhedronGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
vertices: Array,
|
||||
indices: Array,
|
||||
radius: { type: Number, default: 1 },
|
||||
detail: { type: Number, default: 0 },
|
||||
};
|
||||
}
|
||||
|
||||
export function createGeometry(comp) {
|
||||
return new PolyhedronGeometry(comp.vertices, comp.indices, comp.radius, comp.detail);
|
||||
};
|
||||
export function createGeometry(comp: any): PolyhedronGeometry {
|
||||
return new PolyhedronGeometry(comp.vertices, comp.indices, comp.radius, comp.detail)
|
||||
}
|
||||
|
||||
export default geometryComponent('PolyhedronGeometry', props, createGeometry);
|
||||
export default geometryComponent('PolyhedronGeometry', props, createGeometry)
|
@ -1,5 +1,5 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { RingGeometry } from 'three';
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { RingGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
innerRadius: { type: Number, default: 0.5 },
|
||||
@ -8,10 +8,10 @@ export const props = {
|
||||
phiSegments: { type: Number, default: 1 },
|
||||
thetaStart: { type: Number, default: 0 },
|
||||
thetaLength: { type: Number, default: Math.PI * 2 },
|
||||
};
|
||||
}
|
||||
|
||||
export function createGeometry(comp) {
|
||||
return new RingGeometry(comp.innerRadius, comp.outerRadius, comp.thetaSegments, comp.phiSegments, comp.thetaStart, comp.thetaLength);
|
||||
};
|
||||
export function createGeometry(comp: any): RingGeometry {
|
||||
return new RingGeometry(comp.innerRadius, comp.outerRadius, comp.thetaSegments, comp.phiSegments, comp.thetaStart, comp.thetaLength)
|
||||
}
|
||||
|
||||
export default geometryComponent('RingGeometry', props, createGeometry);
|
||||
export default geometryComponent('RingGeometry', props, createGeometry)
|
@ -1,14 +1,14 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { SphereGeometry } from 'three';
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { SphereGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
radius: { type: Number, default: 1 },
|
||||
widthSegments: { type: Number, default: 12 },
|
||||
heightSegments: { type: Number, default: 12 },
|
||||
};
|
||||
}
|
||||
|
||||
export function createGeometry(comp) {
|
||||
return new SphereGeometry(comp.radius, comp.widthSegments, comp.heightSegments);
|
||||
};
|
||||
export function createGeometry(comp: any): SphereGeometry {
|
||||
return new SphereGeometry(comp.radius, comp.widthSegments, comp.heightSegments)
|
||||
}
|
||||
|
||||
export default geometryComponent('SphereGeometry', props, createGeometry);
|
||||
export default geometryComponent('SphereGeometry', props, createGeometry)
|
@ -1,13 +0,0 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { TetrahedronGeometry } from 'three';
|
||||
|
||||
export const props = {
|
||||
radius: { type: Number, default: 1 },
|
||||
detail: { type: Number, default: 0 },
|
||||
};
|
||||
|
||||
export function createGeometry(comp) {
|
||||
return new TetrahedronGeometry(comp.radius, comp.detail);
|
||||
};
|
||||
|
||||
export default geometryComponent('TetrahedronGeometry', props, createGeometry);
|
13
src/geometries/TetrahedronGeometry.ts
Normal file
13
src/geometries/TetrahedronGeometry.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { TetrahedronGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
radius: { type: Number, default: 1 },
|
||||
detail: { type: Number, default: 0 },
|
||||
}
|
||||
|
||||
export function createGeometry(comp: any): TetrahedronGeometry {
|
||||
return new TetrahedronGeometry(comp.radius, comp.detail)
|
||||
}
|
||||
|
||||
export default geometryComponent('TetrahedronGeometry', props, createGeometry)
|
@ -1,5 +1,5 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { TorusGeometry } from 'three';
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { TorusGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
radius: { type: Number, default: 1 },
|
||||
@ -7,10 +7,10 @@ export const props = {
|
||||
radialSegments: { type: Number, default: 8 },
|
||||
tubularSegments: { type: Number, default: 6 },
|
||||
arc: { type: Number, default: Math.PI * 2 },
|
||||
};
|
||||
}
|
||||
|
||||
export function createGeometry(comp) {
|
||||
return new TorusGeometry(comp.radius, comp.tube, comp.radialSegments, comp.tubularSegments, comp.arc);
|
||||
};
|
||||
export function createGeometry(comp: any): TorusGeometry {
|
||||
return new TorusGeometry(comp.radius, comp.tube, comp.radialSegments, comp.tubularSegments, comp.arc)
|
||||
}
|
||||
|
||||
export default geometryComponent('TorusGeometry', props, createGeometry);
|
||||
export default geometryComponent('TorusGeometry', props, createGeometry)
|
@ -1,5 +1,5 @@
|
||||
import { geometryComponent } from './Geometry.js';
|
||||
import { TorusKnotGeometry } from 'three';
|
||||
import { geometryComponent } from './Geometry.js'
|
||||
import { TorusKnotGeometry } from 'three'
|
||||
|
||||
export const props = {
|
||||
radius: { type: Number, default: 1 },
|
||||
@ -8,10 +8,10 @@ export const props = {
|
||||
radialSegments: { type: Number, default: 8 },
|
||||
p: { type: Number, default: 2 },
|
||||
q: { type: Number, default: 3 },
|
||||
};
|
||||
}
|
||||
|
||||
export function createGeometry(comp) {
|
||||
return new TorusKnotGeometry(comp.radius, comp.tube, comp.tubularSegments, comp.radialSegments, comp.p, comp.q);
|
||||
};
|
||||
export function createGeometry(comp: any): TorusKnotGeometry {
|
||||
return new TorusKnotGeometry(comp.radius, comp.tube, comp.tubularSegments, comp.radialSegments, comp.p, comp.q)
|
||||
}
|
||||
|
||||
export default geometryComponent('TorusKnotGeometry', props, createGeometry);
|
||||
export default geometryComponent('TorusKnotGeometry', props, createGeometry)
|
@ -1,83 +0,0 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import { CatmullRomCurve3, Curve, TubeGeometry, Vector3 } from 'three';
|
||||
import Geometry from './Geometry.js';
|
||||
|
||||
export const props = {
|
||||
points: Array,
|
||||
path: Curve,
|
||||
tubularSegments: { type: Number, default: 64 },
|
||||
radius: { type: Number, default: 1 },
|
||||
radialSegments: { type: Number, default: 8 },
|
||||
closed: { type: Boolean, default: false },
|
||||
};
|
||||
|
||||
export function createGeometry(comp) {
|
||||
let curve;
|
||||
if (comp.points) {
|
||||
curve = new CatmullRomCurve3(comp.points);
|
||||
} else if (comp.path) {
|
||||
curve = comp.path;
|
||||
} else {
|
||||
console.error('Missing path curve or points.');
|
||||
}
|
||||
return new TubeGeometry(curve, comp.tubularSegments, comp.radius, comp.radiusSegments, comp.closed);
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
extends: Geometry,
|
||||
props,
|
||||
methods: {
|
||||
createGeometry() {
|
||||
this.geometry = createGeometry(this);
|
||||
},
|
||||
// update points (without using prop, faster)
|
||||
updatePoints(points) {
|
||||
updateTubeGeometryPoints(this.geometry, points);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export function updateTubeGeometryPoints(tube, points) {
|
||||
const curve = new CatmullRomCurve3(points);
|
||||
const { radialSegments, radius, tubularSegments, closed } = tube.parameters;
|
||||
const frames = curve.computeFrenetFrames(tubularSegments, closed);
|
||||
tube.tangents = frames.tangents;
|
||||
tube.normals = frames.normals;
|
||||
tube.binormals = frames.binormals;
|
||||
tube.parameters.path = curve;
|
||||
|
||||
const pArray = tube.attributes.position.array;
|
||||
const nArray = tube.attributes.normal.array;
|
||||
const normal = new Vector3();
|
||||
let P;
|
||||
|
||||
for (let i = 0; i < tubularSegments; i++) {
|
||||
updateSegment(i);
|
||||
}
|
||||
updateSegment(tubularSegments);
|
||||
|
||||
tube.attributes.position.needsUpdate = true;
|
||||
tube.attributes.normal.needsUpdate = true;
|
||||
|
||||
function updateSegment(i) {
|
||||
P = curve.getPointAt(i / tubularSegments, P);
|
||||
const N = frames.normals[i];
|
||||
const B = frames.binormals[i];
|
||||
for (let j = 0; j <= radialSegments; j++) {
|
||||
const v = j / radialSegments * Math.PI * 2;
|
||||
const sin = Math.sin(v);
|
||||
const cos = -Math.cos(v);
|
||||
normal.x = (cos * N.x + sin * B.x);
|
||||
normal.y = (cos * N.y + sin * B.y);
|
||||
normal.z = (cos * N.z + sin * B.z);
|
||||
normal.normalize();
|
||||
const index = (i * (radialSegments + 1) + j) * 3;
|
||||
nArray[index] = normal.x;
|
||||
nArray[index + 1] = normal.y;
|
||||
nArray[index + 2] = normal.z;
|
||||
pArray[index] = P.x + radius * normal.x;
|
||||
pArray[index + 1] = P.y + radius * normal.y;
|
||||
pArray[index + 2] = P.z + radius * normal.z;
|
||||
}
|
||||
}
|
||||
}
|
80
src/geometries/TubeGeometry.ts
Normal file
80
src/geometries/TubeGeometry.ts
Normal file
@ -0,0 +1,80 @@
|
||||
import { defineComponent } from 'vue'
|
||||
import { CatmullRomCurve3, Curve, TubeGeometry, Vector3 } from 'three'
|
||||
import Geometry from './Geometry.js'
|
||||
|
||||
export const props = {
|
||||
points: Array,
|
||||
path: Curve,
|
||||
tubularSegments: { type: Number, default: 64 },
|
||||
radius: { type: Number, default: 1 },
|
||||
radialSegments: { type: Number, default: 8 },
|
||||
closed: { type: Boolean, default: false },
|
||||
}
|
||||
|
||||
export function createGeometry(comp: any): TubeGeometry {
|
||||
let curve
|
||||
if (comp.points) {
|
||||
curve = new CatmullRomCurve3(comp.points)
|
||||
} else if (comp.path) {
|
||||
curve = comp.path
|
||||
} else {
|
||||
console.error('Missing path curve or points.')
|
||||
}
|
||||
return new TubeGeometry(curve, comp.tubularSegments, comp.radius, comp.radiusSegments, comp.closed)
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
extends: Geometry,
|
||||
props,
|
||||
methods: {
|
||||
createGeometry() {
|
||||
this.geometry = createGeometry(this)
|
||||
},
|
||||
// update points (without using prop, faster)
|
||||
updatePoints(points: Vector3[]) {
|
||||
updateTubeGeometryPoints(this.geometry, points)
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export function updateTubeGeometryPoints(tube: TubeGeometry, points: Vector3[]): void {
|
||||
const curve = new CatmullRomCurve3(points)
|
||||
const { radialSegments, radius, tubularSegments, closed } = tube.parameters
|
||||
const frames = curve.computeFrenetFrames(tubularSegments, closed)
|
||||
tube.tangents = frames.tangents
|
||||
tube.normals = frames.normals
|
||||
tube.binormals = frames.binormals
|
||||
tube.parameters.path = curve
|
||||
|
||||
const pAttribute = tube.getAttribute('position')
|
||||
const nAttribute = tube.getAttribute('normal')
|
||||
|
||||
const normal = new Vector3()
|
||||
let P = new Vector3()
|
||||
|
||||
for (let i = 0; i < tubularSegments; i++) {
|
||||
updateSegment(i)
|
||||
}
|
||||
updateSegment(tubularSegments)
|
||||
|
||||
tube.attributes.position.needsUpdate = true
|
||||
tube.attributes.normal.needsUpdate = true
|
||||
|
||||
function updateSegment(i: number) {
|
||||
P = curve.getPointAt(i / tubularSegments, P)
|
||||
const N = frames.normals[i]
|
||||
const B = frames.binormals[i]
|
||||
for (let j = 0; j <= radialSegments; j++) {
|
||||
const v = j / radialSegments * Math.PI * 2
|
||||
const sin = Math.sin(v)
|
||||
const cos = -Math.cos(v)
|
||||
normal.x = (cos * N.x + sin * B.x)
|
||||
normal.y = (cos * N.y + sin * B.y)
|
||||
normal.z = (cos * N.z + sin * B.z)
|
||||
normal.normalize()
|
||||
const index = (i * (radialSegments + 1) + j) * 3
|
||||
nAttribute.setXYZ(index, normal.x, normal.y, normal.z)
|
||||
pAttribute.setXYZ(index, P.x + radius * normal.x, P.y + radius * normal.y, P.z + radius * normal.z)
|
||||
}
|
||||
}
|
||||
}
|
@ -1,16 +1,16 @@
|
||||
export { default as BoxGeometry } from './BoxGeometry.js';
|
||||
export { default as CircleGeometry } from './CircleGeometry.js';
|
||||
export { default as ConeGeometry } from './ConeGeometry.js';
|
||||
export { default as CylinderGeometry } from './CylinderGeometry.js';
|
||||
export { default as DodecahedronGeometry } from './DodecahedronGeometry.js';
|
||||
export { default as IcosahedronGeometry } from './IcosahedronGeometry.js';
|
||||
export { default as LatheGeometry } from './LatheGeometry.js';
|
||||
export { default as OctahedronGeometry } from './OctahedronGeometry.js';
|
||||
export { default as PlaneGeometry } from './PlaneGeometry.js';
|
||||
export { default as PolyhedronGeometry } from './PolyhedronGeometry.js';
|
||||
export { default as RingGeometry } from './RingGeometry.js';
|
||||
export { default as SphereGeometry } from './SphereGeometry.js';
|
||||
export { default as TetrahedronGeometry } from './TetrahedronGeometry.js';
|
||||
export { default as TorusGeometry } from './TorusGeometry.js';
|
||||
export { default as TorusKnotGeometry } from './TorusKnotGeometry.js';
|
||||
export { default as TubeGeometry } from './TubeGeometry.js';
|
||||
export { default as BoxGeometry } from './BoxGeometry'
|
||||
export { default as CircleGeometry } from './CircleGeometry'
|
||||
export { default as ConeGeometry } from './ConeGeometry'
|
||||
export { default as CylinderGeometry } from './CylinderGeometry'
|
||||
export { default as DodecahedronGeometry } from './DodecahedronGeometry'
|
||||
export { default as IcosahedronGeometry } from './IcosahedronGeometry'
|
||||
export { default as LatheGeometry } from './LatheGeometry'
|
||||
export { default as OctahedronGeometry } from './OctahedronGeometry'
|
||||
export { default as PlaneGeometry } from './PlaneGeometry'
|
||||
export { default as PolyhedronGeometry } from './PolyhedronGeometry'
|
||||
export { default as RingGeometry } from './RingGeometry'
|
||||
export { default as SphereGeometry } from './SphereGeometry'
|
||||
export { default as TetrahedronGeometry } from './TetrahedronGeometry'
|
||||
export { default as TorusGeometry } from './TorusGeometry'
|
||||
export { default as TorusKnotGeometry } from './TorusKnotGeometry'
|
||||
export { default as TubeGeometry } from './TubeGeometry'
|
||||
|
2
src/geometries/rename.bat
Normal file
2
src/geometries/rename.bat
Normal file
@ -0,0 +1,2 @@
|
||||
ren *.js *.ts
|
||||
pause
|
Loading…
Reference in New Issue
Block a user