diff --git a/src/core/CubeCamera.ts b/src/core/CubeCamera.ts new file mode 100644 index 0000000..58dbf47 --- /dev/null +++ b/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, 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', +}) diff --git a/src/core/index.ts b/src/core/index.ts index def8028..a7d81b4 100644 --- a/src/core/index.ts +++ b/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' diff --git a/src/plugin.ts b/src/plugin.ts index 39464c3..5775915 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -12,6 +12,8 @@ export const TroisJSVuePlugin = { 'Scene', 'Group', + 'CubeCamera', + 'AmbientLight', 'DirectionalLight', 'HemisphereLight',