`TresPerspectiveCamera` `lookAt` not working with `CameraControls`

wcheek commented 3 months ago

Describe the bug

I want my camera to look at a position. TresPerspectiveCamera has a look-at prop that uses the lookAt method of Object3D to point the camera at a position, but when used alongside the cientos CameraControls component the functionality is lost.

Reproduction

https://stackblitz.com/edit/tresjs-minimal-reproduction-iazqxl?file=src%2Fcomponents%2FTheExperience.vue,package.json,src%2FApp.vue

Steps to reproduce

Use CameraControls with TresPerspectiveCamera and set the look-at prop.

System Info

No response

Used Package Manager

npm

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] The provided reproduction is a minimal reproducible example of the bug.

alvarosabu commented 3 months ago

Hi @wcheek thanks for taking the time to create the ticket and adding a proper reproduction.

Maybe @JaimeTorrealba can help us here, I think controls in general affect the look-at property of the camera right?

wcheek commented 3 months ago

Here's a hack that is working for me using the setLookAt method of CameraControls that I fire once the cameraRef gets populated.

const cameraRef: ShallowRef<TresObject | null> = shallowRef(null);

watch(cameraRef, () => {
  cameraRef.value!.value.setLookAt(
    // first 3 args are the position
    position[0],
    position[1],
    position[2],
    target[0],
    target[1],
    target[2],
    // Smooth transition
    false,
  );
});

      <CameraControls ref="cameraRef" />

Neosoulink commented 2 months ago

Hello @alvarosabu, is someone planning to work on this ticket? I can investigate and work on it

alvarosabu commented 1 month ago

Hi @Neosoulink we would highly appreciate it if you could help us here.

alvarosabu commented 1 month ago

@wcheek could you please add a small reproduction link to help the team work on this better? Thanks

Neosoulink commented 1 month ago

Hi @Neosoulink we would highly appreciate it if you could help us here.

Sure thing @alvarosabu, I'm giving it a shot

wcheek commented 1 month ago

Here is the reproduction link again - I've upgraded to latest "@tresjs/cientos": "^4.0.0", "@tresjs/core": "^4.2.0" and seeing the same issue. Just remove the <CameraControls /> from App.vue and you will see the issue.

Neosoulink commented 1 month ago

Hey @wcheek @alvarosabu, I'm coming back with some good news!

The problem that you're facing @wcheek is not really an issue but a normal behavior

Explanation

The camera-controls has its own target point, just like the OrbitControls.target, when you use it, you have to update the target OrbitControl (or CameraControl) target.

Here's the way of setting the target (or the LookAt feature):

<script setup lang="ts">
const target = shallowRef(new Vector3(0, 0.5, 0));
const cameraRef = shallowRef(null);
const cameraControlRef = shallowRef(null);

onLoop(() => {
  cameraControlRef?.value?.instance?.setTarget?.(
    target.value.x,
    target.value.y,
    target.value.z
  );
});
</script>

<template>
  <!-- Start of the code... -->
    <TresPerspectiveCamera ref="cameraRef" />
    <CameraControls ref="cameraControlRef" />
  <!-- Rest of the code... -->
</template>

Here's the complete example: Tresjs-minimal-cameraControl-LookAt

Tresjs / tres