• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• trois-master
  • .github
    • FUNDING.yml
  • src
    • geometries
      • TetrahedronGeometry.ts
      • ShapeGeometry.ts
      • Geometry.ts
      • ConeGeometry.ts
      • OctahedronGeometry.ts
      • index.ts
      • TorusGeometry.ts
      • PlaneGeometry.ts
      • CircleGeometry.ts
      • BoxGeometry.ts
      • RingGeometry.ts
      • LatheGeometry.ts
      • IcosahedronGeometry.ts
      • PolyhedronGeometry.ts
      • TubeGeometry.ts
      • ExtrudeGeometry.ts
      • DodecahedronGeometry.ts
      • TorusKnotGeometry.ts
      • CylinderGeometry.ts
      • SphereGeometry.ts
    • export.ts
    • materials
      • Material.ts
      • ShaderMaterial.ts
      • MatcapMaterial.ts
      • index.ts
      • CubeTexture.ts
      • VideoTexture.ts
      • types.ts
      • SubSurfaceMaterial.ts
      • SubsurfaceScatteringShader.ts
      • Texture.ts
    • shaders
      • default.ts
      • ZoomBlur.ts
      • TiltShift.ts
    • index.ts
    • models
      • GLTF.ts
      • FBX.ts
      • index.ts
      • Model.ts
    • meshes
      • Box.ts
      • Mesh.ts
      • Image.ts
      • InstancedMesh.ts
      • Sphere.ts
      • TorusKnot.ts
      • Tube.ts
      • Ring.ts
      • Sprite.ts
      • Octahedron.ts
      • index.ts
      • Dodecahedron.ts
      • Cylinder.ts
      • Plane.ts
      • Icosahedron.ts
      • Cone.ts
      • Text.ts
      • Lathe.ts
      • Polyhedron.ts
      • Torus.ts
      • Circle.ts
      • Tetrahedron.ts
      • Points.ts
    • components
      • sliders
        • Slider2.vue
        • AnimatedPlane.js
        • Slider1.vue
        • ZoomBlurImage.js
      • postprocessing
        • vanruesc
          • Effect.js
          • EffectPass.js
          • Pass.js
          • EffectComposer.js
          • index.js
      • physics
        • useCannon.js
        • CannonWorld.js
      • noisy
        • NoisyText.js
        • NoisySphere.js
        • NoisyPlane.js
        • NoisyImage.js
      • meshes
        • Gem.js
        • MirrorMesh.js
        • RefractionMesh.js
      • misc
        • VRButton.vue
        • Stats.js
      • liquid
        • LiquidPlane.js
        • LiquidEffect.js
    • plugin.ts
    • glsl
      • snoise4.glsl.js
      • snoise2.glsl.js
      • snoise3.glsl.js
    • tools.ts
    • main.ts
    • core
      • useThree.ts
      • usePointer.ts
      • Renderer.ts
      • Group.ts
      • index.ts
      • Camera.ts
      • Object3D.ts
      • useRaycaster.ts
      • Raycaster.ts
      • OrthographicCamera.ts
      • CubeCamera.ts
      • PerspectiveCamera.ts
      • Scene.ts
    • shims-vue.d.ts
    • App.vue
    • effects
      • EffectPass.ts
      • FXAAPass.ts
      • index.ts
      • SMAAPass.ts
      • UnrealBloomPass.ts
      • FilmPass.ts
      • EffectComposer.ts
      • HalftonePass.ts
      • SSAOPass.ts
      • BokehPass.ts
      • ZoomBlurPass.ts
      • RenderPass.ts
      • TiltShiftPass.ts
    • use
      • useTextures.ts
    • lights
      • HemisphereLight.ts
      • PointLight.ts
      • index.ts
      • DirectionalLight.ts
      • RectAreaLight.ts
      • AmbientLight.ts
      • Light.ts
      • SpotLight.ts
  • .npmignore
  • LICENSE
  • .devcontainer
    • devcontainer.json
  • vite.config.js
  • rollup.config.js
  • README.md
  • package.json
  • screenshots
  • index.html
  • .eslintrc.js
  • tsconfig.json
  • .gitignore
  • .vscode
    • settings.json

import { ComponentPropsOptions, ComponentPublicInstance, defineComponent, InjectionKey, watch } from 'vue'
import { BufferGeometry, Material, Mesh as TMesh } from 'three'
import Object3D, { Object3DSetupInterface } from '../core/Object3D'
import { bindProp } from '../tools'

export interface MeshSetupInterface extends Object3DSetupInterface {
  mesh?: TMesh
  geometry?: BufferGeometry
  material?: Material
  loading?: boolean
}

export interface MeshInterface extends MeshSetupInterface {
  setGeometry(g: BufferGeometry): void
  setMaterial(m: Material): void
}

export interface MeshPublicInterface extends ComponentPublicInstance, MeshInterface {}

export const MeshInjectionKey: InjectionKey<MeshPublicInterface> = Symbol('Mesh')

const Mesh = defineComponent({
  name: 'Mesh',
  extends: Object3D,
  props: {
    castShadow: Boolean,
    receiveShadow: Boolean,
  },
  setup(): MeshSetupInterface {
    return {}
  },
  provide() {
    return {
      [MeshInjectionKey as symbol]: this,
    }
  },
  mounted() {
    // TODO : proper ?
    if (!this.mesh && !this.loading) this.initMesh()
  },
  methods: {
    initMesh() {
      const mesh = new TMesh(this.geometry, this.material)

      bindProp(this, 'castShadow', mesh)
      bindProp(this, 'receiveShadow', mesh)

      this.mesh = mesh
      this.initObject3D(mesh)
    },
    createGeometry() {},
    addGeometryWatchers(props: Readonly<ComponentPropsOptions>) {
      Object.keys(props).forEach(prop => {
        // @ts-ignore
        watch(() => this[prop], () => {
          this.refreshGeometry()
        })
      })
    },
    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
    },
    refreshGeometry() {
      const oldGeo = this.geometry
      this.createGeometry()
      if (this.mesh && this.geometry) this.mesh.geometry = this.geometry
      oldGeo?.dispose()
    },
  },
  unmounted() {
    // for predefined mesh (geometry/material are not unmounted)
    if (this.geometry) this.geometry.dispose()
    if (this.material) this.material.dispose()
  },
  __hmrId: 'Mesh',
})

export default Mesh

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export function meshComponent<P extends Readonly<ComponentPropsOptions>>(
  name: string,
  props: P,
  createGeometry: {(c: any): BufferGeometry}
) {
  return defineComponent({
    name,
    extends: Mesh,
    props,
    created() {
      this.createGeometry()
      this.addGeometryWatchers(props)
    },
    methods: {
      createGeometry() {
        this.geometry = createGeometry(this)
      },
    },
  })
}