React Three Fiber (walk rotation)

Questions
,
1

Hello!

How i can rotation camera with some coordinate ?

if i set

const spherePosition = () => {
to.set(2, 1, 2)
ref.current.rotation.y = 1.1
}

i dont have animation rotation

if i set

useFrame((_, delta) => {
ref.current.position.lerp(to, delta * 2)
const rotationY = MathUtils.lerp(ref.current.rotation.y, to3.y, delta * 1.2);
ref.current.rotation.set(0, rotationY, 0);
circleEffectRef.current.scale.x = circleEffectRef.current.scale.y += delta * 50
circleEffectRef.current.material.opacity -= delta * 1
})

i cant after this logics rotate camera

or camera.lookAt(mesh.position) , some variants

2

Untitled-3
Untitled-31050×591 36.2 KB

But more seriously:

  1. Do not use delta or frame dt directly in any calculations. This is truly a rabbit hole you’d like to avoid. Either use useEffect combined with setInterval instead of useFrame, which will just execute logic in approximately consistent intervals, or even better, wrap the logic in a delta iterator:
const constantFramerate = (logicCallback) => {
  const logicFps = 1.0 / 60.0; // NOTE Execute logic 60 times per second, regardless of the actual rendering FPS

  return (_, dt) => {
    for (let i = 0; i < Math.floor(dt / logicFps); i++) {
      logicCallback();
    }
  };
};

useFrame(constantFramerate(() => {
  ref.current.position.lerp(to, 0.1);
}));
  1. I am kinda guessing what’s the thing you’re asking about, but there’s a chance this might be what you’re looking for:
const useCameraController = (cameraRef) => {
  const mockRef = useRef(new Three.Object3D());

  useFrame(() => {
    if (!cameraRef.current) {
      return;
    }

    cameraRef.current.quaternion.slerp(mockRef.quaternion, 0.1);
  });

  return {
    smoothLookAt: (target) => mockRef.current.lookAt(target)
  };
};

const Scene = () => {
  const cameraRef = useRef(null);
  const{
    smoothLookAt
  } = useCameraController(cameraRef);

  return (
    <group>
      <PerspectiveCamera ref={cameraRef} />
      <mesh onClick={({ point }) => smoothLookAt(point)}>{/* ... */}</mesh>
    </group>
  );
};
3

thanks, I’ll give it a try!
it’s not very clear yet )) :love_you_gesture:

4

I presume you are trying to mimic the navigation of this example.
https://showroom.littleworkshop.fr/

image
image785×316 69.6 KB

I have updated my Teleport example, the one you forked your version from, to now behave quite similar to the above demo.
It may be closer to what I imagine you are trying to achieve.

By default, you look around by dragging the scene.
To move to another place on the floor, click the floor at the location and it and it will slide.
Click a model to go into orbit mode around it. After a second it will auto rotate. You can then stop the auto rotation by orbiting yourself.
Click the floor again to exit the orbit mode, or click a different model.

2 Likes
5

orbit mode have orbit target,its last varitat what i want to create
thought I’d find an easier way