1
0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00

add camera props

This commit is contained in:
Kevin Levron 2021-05-05 21:40:23 +02:00
parent 9210f7f32c
commit f3ffea6248
3 changed files with 20 additions and 14 deletions

View File

@ -12,6 +12,10 @@ export default defineComponent({
// TODO: eventually extend Object3D
// extends: Object3D,
props: {
props: { type: Object, default: () => ({}) },
},
// inject: { renderer: RendererInjectionKey as symbol },
// setup(): CameraSetupInterface {
@ -22,3 +26,8 @@ export default defineComponent({
return this.$slots.default ? this.$slots.default() : []
},
})
export function cameraSetProp(camera: any, key: string, value: any, updateProjectionMatrix = true) {
camera[key] = value
if (updateProjectionMatrix) camera.updateProjectionMatrix()
}

View File

@ -1,7 +1,7 @@
import { defineComponent, inject, PropType, watch } from 'vue'
import { OrthographicCamera } from 'three'
import { bindProp } from '../tools'
import Camera from './Camera'
import { bindObjectProp, bindProp } from '../tools'
import Camera, { cameraSetProp } from './Camera'
import { Vector3PropInterface } from './Object3D'
import { RendererInjectionKey } from './Renderer'
@ -29,14 +29,12 @@ export default defineComponent({
renderer.camera = camera
bindProp(props, 'position', camera)
bindObjectProp(props, 'props', camera, true, cameraSetProp);
const watchProps = ['left', 'right', 'top', 'bottom', 'near', 'far', 'zoom']
watchProps.forEach(p => {
['left', 'right', 'top', 'bottom', 'near', 'far', 'zoom'].forEach(p => {
// @ts-ignore
watch(() => props[p], (value) => {
// @ts-ignore
camera[p] = value
camera.updateProjectionMatrix()
cameraSetProp(camera, p, value)
})
})

View File

@ -1,7 +1,7 @@
import { defineComponent, inject, PropType, watch } from 'vue'
import { PerspectiveCamera } from 'three'
import { bindProp } from '../tools'
import Camera from './Camera'
import { bindObjectProp, bindProp } from '../tools'
import Camera, { cameraSetProp } from './Camera'
import { Vector3PropInterface } from './Object3D'
import { RendererInjectionKey } from './Renderer'
@ -31,13 +31,12 @@ export default defineComponent({
if (props.lookAt) camera.lookAt(props.lookAt.x ?? 0, props.lookAt.y, props.lookAt.z)
watch(() => props.lookAt, (v) => { camera.lookAt(v.x ?? 0, v.y, v.z) }, { deep: true })
const watchProps = ['aspect', 'far', 'fov', 'near']
watchProps.forEach(p => {
bindObjectProp(props, 'props', camera, true, cameraSetProp);
['aspect', 'far', 'fov', 'near'].forEach(p => {
// @ts-ignore
watch(() => props[p], (value) => {
// @ts-ignore
camera[p] = value
camera.updateProjectionMatrix()
cameraSetProp(camera, p, value)
})
})