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 { geometryComponent } from './Geometry.js'
|
||||||
import { BoxGeometry } from 'three';
|
import { BoxGeometry } from 'three'
|
||||||
|
|
||||||
export const props = {
|
export const props = {
|
||||||
size: Number,
|
size: Number,
|
||||||
@ -9,14 +9,14 @@ export const props = {
|
|||||||
widthSegments: { type: Number, default: 1 },
|
widthSegments: { type: Number, default: 1 },
|
||||||
heightSegments: { type: Number, default: 1 },
|
heightSegments: { type: Number, default: 1 },
|
||||||
depthSegments: { type: Number, default: 1 },
|
depthSegments: { type: Number, default: 1 },
|
||||||
};
|
|
||||||
|
|
||||||
export function createGeometry(comp) {
|
|
||||||
if (comp.size) {
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
export default geometryComponent('BoxGeometry', props, createGeometry);
|
export function createGeometry(comp: any): BoxGeometry {
|
||||||
|
if (comp.size) {
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default geometryComponent('BoxGeometry', props, createGeometry)
|
@ -1,15 +1,15 @@
|
|||||||
import { geometryComponent } from './Geometry.js';
|
import { geometryComponent } from './Geometry.js'
|
||||||
import { CircleGeometry } from 'three';
|
import { CircleGeometry } from 'three'
|
||||||
|
|
||||||
export const props = {
|
export const props = {
|
||||||
radius: { type: Number, default: 1 },
|
radius: { type: Number, default: 1 },
|
||||||
segments: { type: Number, default: 8 },
|
segments: { type: Number, default: 8 },
|
||||||
thetaStart: { type: Number, default: 0 },
|
thetaStart: { type: Number, default: 0 },
|
||||||
thetaLength: { type: Number, default: Math.PI * 2 },
|
thetaLength: { type: Number, default: Math.PI * 2 },
|
||||||
};
|
}
|
||||||
|
|
||||||
export function createGeometry(comp) {
|
export function createGeometry(comp: any): CircleGeometry {
|
||||||
return new CircleGeometry(comp.radius, comp.segments, comp.thetaStart, comp.thetaLength);
|
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 { geometryComponent } from './Geometry.js'
|
||||||
import { ConeGeometry } from 'three';
|
import { ConeGeometry } from 'three'
|
||||||
|
|
||||||
export const props = {
|
export const props = {
|
||||||
radius: { type: Number, default: 1 },
|
radius: { type: Number, default: 1 },
|
||||||
@ -9,10 +9,10 @@ export const props = {
|
|||||||
openEnded: { type: Boolean, default: false },
|
openEnded: { type: Boolean, default: false },
|
||||||
thetaStart: { type: Number, default: 0 },
|
thetaStart: { type: Number, default: 0 },
|
||||||
thetaLength: { type: Number, default: Math.PI * 2 },
|
thetaLength: { type: Number, default: Math.PI * 2 },
|
||||||
};
|
}
|
||||||
|
|
||||||
export function createGeometry(comp) {
|
export function createGeometry(comp: any): ConeGeometry {
|
||||||
return new ConeGeometry(comp.radius, comp.height, comp.radialSegments, comp.heightSegments, comp.openEnded, comp.thetaStart, comp.thetaLength);
|
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 { geometryComponent } from './Geometry.js'
|
||||||
import { CylinderGeometry } from 'three';
|
import { CylinderGeometry } from 'three'
|
||||||
|
|
||||||
export const props = {
|
export const props = {
|
||||||
radiusTop: { type: Number, default: 1 },
|
radiusTop: { type: Number, default: 1 },
|
||||||
@ -10,10 +10,10 @@ export const props = {
|
|||||||
openEnded: { type: Boolean, default: false },
|
openEnded: { type: Boolean, default: false },
|
||||||
thetaStart: { type: Number, default: 0 },
|
thetaStart: { type: Number, default: 0 },
|
||||||
thetaLength: { type: Number, default: Math.PI * 2 },
|
thetaLength: { type: Number, default: Math.PI * 2 },
|
||||||
};
|
}
|
||||||
|
|
||||||
export function createGeometry(comp) {
|
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);
|
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 { geometryComponent } from './Geometry.js'
|
||||||
import { LatheGeometry } from 'three';
|
import { LatheGeometry } from 'three'
|
||||||
|
|
||||||
export const props = {
|
export const props = {
|
||||||
points: Array,
|
points: Array,
|
||||||
segments: { type: Number, default: 12 },
|
segments: { type: Number, default: 12 },
|
||||||
phiStart: { type: Number, default: 0 },
|
phiStart: { type: Number, default: 0 },
|
||||||
phiLength: { type: Number, default: Math.PI * 2 },
|
phiLength: { type: Number, default: Math.PI * 2 },
|
||||||
};
|
}
|
||||||
|
|
||||||
export function createGeometry(comp) {
|
export function createGeometry(comp: any): LatheGeometry {
|
||||||
return new LatheGeometry(comp.points, comp.segments, comp.phiStart, comp.phiLength);
|
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 { geometryComponent } from './Geometry.js'
|
||||||
import { PlaneGeometry } from 'three';
|
import { PlaneGeometry } from 'three'
|
||||||
|
|
||||||
export const props = {
|
export const props = {
|
||||||
width: { type: Number, default: 1 },
|
width: { type: Number, default: 1 },
|
||||||
height: { type: Number, default: 1 },
|
height: { type: Number, default: 1 },
|
||||||
widthSegments: { type: Number, default: 1 },
|
widthSegments: { type: Number, default: 1 },
|
||||||
heightSegments: { type: Number, default: 1 },
|
heightSegments: { type: Number, default: 1 },
|
||||||
};
|
}
|
||||||
|
|
||||||
export function createGeometry(comp) {
|
export function createGeometry(comp: any): PlaneGeometry {
|
||||||
return new PlaneGeometry(comp.width, comp.height, comp.widthSegments, comp.heightSegments);
|
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 { geometryComponent } from './Geometry.js'
|
||||||
import { PolyhedronGeometry } from 'three';
|
import { PolyhedronGeometry } from 'three'
|
||||||
|
|
||||||
export const props = {
|
export const props = {
|
||||||
vertices: Array,
|
vertices: Array,
|
||||||
indices: Array,
|
indices: Array,
|
||||||
radius: { type: Number, default: 1 },
|
radius: { type: Number, default: 1 },
|
||||||
detail: { type: Number, default: 0 },
|
detail: { type: Number, default: 0 },
|
||||||
};
|
}
|
||||||
|
|
||||||
export function createGeometry(comp) {
|
export function createGeometry(comp: any): PolyhedronGeometry {
|
||||||
return new PolyhedronGeometry(comp.vertices, comp.indices, comp.radius, comp.detail);
|
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 { geometryComponent } from './Geometry.js'
|
||||||
import { RingGeometry } from 'three';
|
import { RingGeometry } from 'three'
|
||||||
|
|
||||||
export const props = {
|
export const props = {
|
||||||
innerRadius: { type: Number, default: 0.5 },
|
innerRadius: { type: Number, default: 0.5 },
|
||||||
@ -8,10 +8,10 @@ export const props = {
|
|||||||
phiSegments: { type: Number, default: 1 },
|
phiSegments: { type: Number, default: 1 },
|
||||||
thetaStart: { type: Number, default: 0 },
|
thetaStart: { type: Number, default: 0 },
|
||||||
thetaLength: { type: Number, default: Math.PI * 2 },
|
thetaLength: { type: Number, default: Math.PI * 2 },
|
||||||
};
|
}
|
||||||
|
|
||||||
export function createGeometry(comp) {
|
export function createGeometry(comp: any): RingGeometry {
|
||||||
return new RingGeometry(comp.innerRadius, comp.outerRadius, comp.thetaSegments, comp.phiSegments, comp.thetaStart, comp.thetaLength);
|
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 { geometryComponent } from './Geometry.js'
|
||||||
import { SphereGeometry } from 'three';
|
import { SphereGeometry } from 'three'
|
||||||
|
|
||||||
export const props = {
|
export const props = {
|
||||||
radius: { type: Number, default: 1 },
|
radius: { type: Number, default: 1 },
|
||||||
widthSegments: { type: Number, default: 12 },
|
widthSegments: { type: Number, default: 12 },
|
||||||
heightSegments: { type: Number, default: 12 },
|
heightSegments: { type: Number, default: 12 },
|
||||||
};
|
}
|
||||||
|
|
||||||
export function createGeometry(comp) {
|
export function createGeometry(comp: any): SphereGeometry {
|
||||||
return new SphereGeometry(comp.radius, comp.widthSegments, comp.heightSegments);
|
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 { geometryComponent } from './Geometry.js'
|
||||||
import { TorusGeometry } from 'three';
|
import { TorusGeometry } from 'three'
|
||||||
|
|
||||||
export const props = {
|
export const props = {
|
||||||
radius: { type: Number, default: 1 },
|
radius: { type: Number, default: 1 },
|
||||||
@ -7,10 +7,10 @@ export const props = {
|
|||||||
radialSegments: { type: Number, default: 8 },
|
radialSegments: { type: Number, default: 8 },
|
||||||
tubularSegments: { type: Number, default: 6 },
|
tubularSegments: { type: Number, default: 6 },
|
||||||
arc: { type: Number, default: Math.PI * 2 },
|
arc: { type: Number, default: Math.PI * 2 },
|
||||||
};
|
}
|
||||||
|
|
||||||
export function createGeometry(comp) {
|
export function createGeometry(comp: any): TorusGeometry {
|
||||||
return new TorusGeometry(comp.radius, comp.tube, comp.radialSegments, comp.tubularSegments, comp.arc);
|
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 { geometryComponent } from './Geometry.js'
|
||||||
import { TorusKnotGeometry } from 'three';
|
import { TorusKnotGeometry } from 'three'
|
||||||
|
|
||||||
export const props = {
|
export const props = {
|
||||||
radius: { type: Number, default: 1 },
|
radius: { type: Number, default: 1 },
|
||||||
@ -8,10 +8,10 @@ export const props = {
|
|||||||
radialSegments: { type: Number, default: 8 },
|
radialSegments: { type: Number, default: 8 },
|
||||||
p: { type: Number, default: 2 },
|
p: { type: Number, default: 2 },
|
||||||
q: { type: Number, default: 3 },
|
q: { type: Number, default: 3 },
|
||||||
};
|
}
|
||||||
|
|
||||||
export function createGeometry(comp) {
|
export function createGeometry(comp: any): TorusKnotGeometry {
|
||||||
return new TorusKnotGeometry(comp.radius, comp.tube, comp.tubularSegments, comp.radialSegments, comp.p, comp.q);
|
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 BoxGeometry } from './BoxGeometry'
|
||||||
export { default as CircleGeometry } from './CircleGeometry.js';
|
export { default as CircleGeometry } from './CircleGeometry'
|
||||||
export { default as ConeGeometry } from './ConeGeometry.js';
|
export { default as ConeGeometry } from './ConeGeometry'
|
||||||
export { default as CylinderGeometry } from './CylinderGeometry.js';
|
export { default as CylinderGeometry } from './CylinderGeometry'
|
||||||
export { default as DodecahedronGeometry } from './DodecahedronGeometry.js';
|
export { default as DodecahedronGeometry } from './DodecahedronGeometry'
|
||||||
export { default as IcosahedronGeometry } from './IcosahedronGeometry.js';
|
export { default as IcosahedronGeometry } from './IcosahedronGeometry'
|
||||||
export { default as LatheGeometry } from './LatheGeometry.js';
|
export { default as LatheGeometry } from './LatheGeometry'
|
||||||
export { default as OctahedronGeometry } from './OctahedronGeometry.js';
|
export { default as OctahedronGeometry } from './OctahedronGeometry'
|
||||||
export { default as PlaneGeometry } from './PlaneGeometry.js';
|
export { default as PlaneGeometry } from './PlaneGeometry'
|
||||||
export { default as PolyhedronGeometry } from './PolyhedronGeometry.js';
|
export { default as PolyhedronGeometry } from './PolyhedronGeometry'
|
||||||
export { default as RingGeometry } from './RingGeometry.js';
|
export { default as RingGeometry } from './RingGeometry'
|
||||||
export { default as SphereGeometry } from './SphereGeometry.js';
|
export { default as SphereGeometry } from './SphereGeometry'
|
||||||
export { default as TetrahedronGeometry } from './TetrahedronGeometry.js';
|
export { default as TetrahedronGeometry } from './TetrahedronGeometry'
|
||||||
export { default as TorusGeometry } from './TorusGeometry.js';
|
export { default as TorusGeometry } from './TorusGeometry'
|
||||||
export { default as TorusKnotGeometry } from './TorusKnotGeometry.js';
|
export { default as TorusKnotGeometry } from './TorusKnotGeometry'
|
||||||
export { default as TubeGeometry } from './TubeGeometry.js';
|
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