diff --git a/src/materials/Material.ts b/src/materials/Material.ts index 827c239..f1d9b4a 100644 --- a/src/materials/Material.ts +++ b/src/materials/Material.ts @@ -22,6 +22,7 @@ export default defineComponent({ }, props: { color: { type: [String, Number], default: '#ffffff' }, + alphaTest: { type: Number, default: 0 }, depthTest: { type: Boolean, default: true }, depthWrite: { type: Boolean, default: true }, fog: { type: Boolean, default: true }, @@ -65,7 +66,7 @@ export default defineComponent({ this.setProp(key, texture, true) }, addWatchers() { - ['color', 'depthTest', 'depthWrite', 'fog', 'opacity', 'side', 'transparent'].forEach(p => { + ['color', 'alphaTest', 'depthTest', 'depthWrite', 'fog', 'opacity', 'side', 'transparent'].forEach(p => { // @ts-ignore watch(() => this[p], (value) => { if (p === 'color') { diff --git a/src/materials/PointsMaterial.ts b/src/materials/PointsMaterial.ts new file mode 100644 index 0000000..eaaa38a --- /dev/null +++ b/src/materials/PointsMaterial.ts @@ -0,0 +1,19 @@ +import { defineComponent } from 'vue' +import { PointsMaterial } from 'three' +import { propsValues } from '../tools' +import Material from './Material' + +export default defineComponent({ + extends: Material, + props: { + size: { type: Number, default: 10 }, + sizeAttenuation: { type: Boolean, default: true }, + }, + methods: { + createMaterial() { + const material = new PointsMaterial(propsValues(this.$props)) + return material + }, + }, + __hmrId: 'PointsMaterial', +}) diff --git a/src/meshes/Points.ts b/src/meshes/Points.ts new file mode 100644 index 0000000..96bbd34 --- /dev/null +++ b/src/meshes/Points.ts @@ -0,0 +1,43 @@ +import { defineComponent } from 'vue' +import { BufferGeometry, Material, Points } from 'three' +import Object3D, { Object3DSetupInterface } from '../core/Object3D' +import { MeshInjectionKey } from './Mesh' + +export interface PointsSetupInterface extends Object3DSetupInterface { + mesh?: Points + points?: Points + geometry?: BufferGeometry + material?: Material +} + +export interface PointsInterface extends PointsSetupInterface { + setGeometry(geometry: BufferGeometry): void + setMaterial(material: Material): void +} + +// not really a mesh, but allow us to easily get geometry/material support +export default defineComponent({ + extends: Object3D, + setup(): PointsSetupInterface { + return {} + }, + provide() { + return { + [MeshInjectionKey as symbol]: this, + } + }, + mounted() { + this.mesh = this.points = new Points(this.geometry, this.material) + this.initObject3D(this.mesh) + }, + methods: { + setGeometry(geometry: BufferGeometry) { + this.geometry = geometry + if (this.mesh) this.mesh.geometry = geometry + }, + setMaterial(material: Material) { + this.material = material + if (this.mesh) this.mesh.material = material + }, + }, +}) diff --git a/src/meshes/index.ts b/src/meshes/index.ts index 8d75503..91a2657 100644 --- a/src/meshes/index.ts +++ b/src/meshes/index.ts @@ -21,3 +21,5 @@ export { default as Tube } from './Tube' export { default as Image } from './Image' export { default as InstancedMesh } from './InstancedMesh' export { default as Sprite } from './Sprite' + +export { default as Points } from './Points'