Calling <PerspectiveCamera/> lookAt

[vorth]

Has anyone managed to point a drei PerspectiveCamera at something other than the origin? I'm struggling. I've tried useUpdate and other hooks, but my understanding of these is admittedly shaky. It seems like a common enough use-case.

This code does not show the effect of the initial camera.lookAt state. Furthermore, it fails when camera.lookAt is modified in the state (Redux), showing "TypeError: invalidate is not a function" from an anonymous function inside commitHookEffectListMount.

const ModelCanvas = ( { lighting, instances, shapes, camera, doAction } ) => {
  const { fov, position, up, lookAt } = camera
  const ref = useUpdate( (pcam) => {
    console.log( `lookAt is ${lookAt}`)
    pcam.lookAt( new THREE.Vector3( ...lookAt ) )
  }, [ lookAt ] )
  return(
    <>
      <Canvas gl={{ antialias: true, alpha: false }} >
        <PerspectiveCamera ref={ref} makeDefault {...{fov, position, up}}>
          <Lighting {...lighting} />
          <mesh/>
        </PerspectiveCamera>
      </Canvas>
    </>
  )
}

On a related note, has anyone seen a more expansive write-up of the r3f hooks? The main api.md descriptions are pretty thin on explanations, or I'm just dense.

[drcmda]

i tried and i dont see an issue: https://codesandbox.io/s/r3f-render-target-cq68q?file=/src/index.js:1059-1119

  useEffect(() => {
    cam.current.lookAt(1, 0, 0)
  }, [])

my guess is that by putting camera.lookAt into useUpdate (which is undefined, the property does not exist) it never updates.

is there a reason you're using a custom cam? you can do the same with the default cam btw: https://codesandbox.io/s/r3f-basic-demo-nsb7f

[vorth]

Thank you. This should help me work out what I'm doing wrong.

I'm using the custom camera because I want to attach my lights to it. I'm sure it is possible without using a component like drei's PerspectiveCamera, but this approach makes it simple and obvious... just nesting the components.

[drcmda]

makes sense, sure you can attach lights!

[vorth]

Unfortunately, your solution isn't working for me. I've exported a CodeSandbox (not a Pro yet):

cameraLookAt.zip

All the action happens in components/modelcanvas-three.js. The red sphere is rendered at the target point, the same one used to set cam.current.lookAt().

Is the trackball interfering?

[drcmda]

yes, if you use controls that changes everything, literally. controls take over the camera and mutate its data every frame. that's what they're made for.

[vorth]

That was the answer! I simply added "target={lookAt}" to my trackballControls, and the issue is resolved.