trois icon indicating copy to clipboard operation
trois copied to clipboard

camera attach to scene and attach objects?

Open Lightnet opened this issue 3 years ago • 0 comments

I found out that it was not possible to attach camera to scene as I need to create attach object like text 2d to the camera. I tested from react fiber since I ported to vue for testing builds.

Did try to recode to get it work which is easy but it hard to tell which need since required reading the src to know which correct configs.

Example

<Renderer ref="renderer"  resize="div" orbitCtrl >
     <PerspectiveCamera ref="camera" :position="{ z: 10 }">
        <Group :position="{y:0,z:-10}">
          <EntityText2D :position="{y:0,z:0}"/>
        </Group>
      </PerspectiveCamera >
</Renderer>

PerspectiveCamera

import { defineComponent, inject } from 'vue'
import { PerspectiveCamera } from 'three'
// import { RendererInjectionKey, RendererInterface } from './Renderer'
// import Object3D from './Object3D'
import { bindObjectProp, bindProp, Object3D, RendererInjectionKey } from 'troisjs';

// export interface CameraSetupInterface {
//   renderer?: RendererInterface
//   camera: Camera
// }

export default defineComponent({
  name: 'PerspectiveCamera',
  // TODO: eventually extend Object3D
  extends: Object3D,
  props: {
    aspect: { type: Number, default: 1 },
    far: { type: Number, default: 2000 },
    fov: { type: Number, default: 50 },
    near: { type: Number, default: 0.1 },
    position: { type: Object, default: () => ({ x: 0, y: 0, z: 0 }) },
    lookAt: { type: Object, default: null },
  },
  setup(props) {
    const camera = new PerspectiveCamera(props.fov, props.aspect, props.near, props.far)
    //const camera = new Camera();
    const renderer = inject(RendererInjectionKey)
    renderer.camera = camera;
    bindProp(props, 'position', camera);

    //bindObjectProp(props, 'props', camera, true, cameraSetProp);

    return { renderer, camera }

  },
  created() {
    this.initObject3D(this.camera)
  }

  //props: {
    //props: { type: Object, default: () => ({}) },
  //},

  // inject: { renderer: RendererInjectionKey as symbol },

  // setup(): CameraSetupInterface {
  //   return {}
  // },

  //render() {
    //return this.$slots.default ? this.$slots.default() : []
  //},
})

export function cameraSetProp(camera, key, value, updateProjectionMatrix = true) {
  camera[key] = value
  if (updateProjectionMatrix) camera.updateProjectionMatrix()
}

Lightnet avatar Mar 29 '22 05:03 Lightnet