add CubeCamera

src/core/CubeCamera.ts

@@ -0,0 +1,53 @@
+import { defineComponent, inject, onUnmounted, PropType } from 'vue'
+import { CubeCamera, LinearMipmapLinearFilter, Mesh, RGBFormat, WebGLCubeRenderTarget } from 'three'
+import Object3D from './Object3D'
+import { RendererInjectionKey } from './Renderer'
+
+interface CubeCameraSetupInterface {
+  cubeRT?: WebGLCubeRenderTarget
+  cubeCamera?: CubeCamera
+  updateRT?: {(): void}
+}
+
+export default defineComponent({
+  extends: Object3D,
+  props: {
+    cubeRTSize: { type: Number, default: 256 },
+    cubeCameraNear: { type: Number, default: 0.1 },
+    cubeCameraFar: { type: Number, default: 2000 },
+    autoUpdate: Boolean,
+    hideMeshes: { type: Array as PropType<Mesh[]>, default: () => ([]) },
+  },
+  setup(props): CubeCameraSetupInterface {
+    const rendererC = inject(RendererInjectionKey)
+    if (!rendererC || !rendererC.scene) {
+      console.error('Missing Renderer / Scene')
+      return {}
+    }
+
+    const renderer = rendererC.renderer, scene = rendererC.scene
+    const cubeRT = new WebGLCubeRenderTarget(props.cubeRTSize, { format: RGBFormat, generateMipmaps: true, minFilter: LinearMipmapLinearFilter })
+    const cubeCamera = new CubeCamera(props.cubeCameraNear, props.cubeCameraFar, cubeRT)
+    const updateRT = () => {
+      props.hideMeshes.forEach(m => { m.visible = false })
+      cubeCamera.update(renderer, scene)
+      props.hideMeshes.forEach(m => { m.visible = true })
+    }
+
+    if (props.autoUpdate) {
+      rendererC.onBeforeRender(updateRT)
+      onUnmounted(() => { rendererC.offBeforeRender(updateRT) })
+    } else {
+      rendererC.onMounted(updateRT)
+    }
+
+    return { cubeRT, cubeCamera, updateRT }
+  },
+  created() {
+    if (this.cubeCamera) this.initObject3D(this.cubeCamera)
+  },
+  render() {
+    return []
+  },
+  __hmrId: 'CubeCamera',
+})

src/core/index.ts

@@ -6,3 +6,5 @@ export { default as Group } from './Group'
 export { default as Scene, SceneInjectionKey } from './Scene'
 export { default as Object3D } from './Object3D'
 export { default as Raycaster } from './Raycaster'
+
+export { default as CubeCamera } from './CubeCamera'

src/plugin.ts

@@ -12,6 +12,8 @@ export const TroisJSVuePlugin = {
       'Scene',
       'Group',
 
+      'CubeCamera',
+
       'AmbientLight',
       'DirectionalLight',
       'HemisphereLight',