Rotation of model about the y-axis not working after camera position change

Questions
, ,
1

I’m having issues rotating about the y-axis after making a lerp of the camera using camera-controls. Basically the rotation is not maintained about the same axis. I can share more info as the discussion goes.

this is some code from my index.js, maybe this is where the issue is .
It’s pretty urgent, any ideas are greatly appreciated.

import "./App.css";
import * as THREE from "three";
import { Suspense, useState,useRef } from "react";
import useStateSnapshots from "use-state-snapshots";
import { Canvas, extend, useThree, useFrame } from "@react-three/fiber";
import CameraControls from "camera-controls";
import Lights from "./Models/Lights";
import BoyHairstyle from "./Models/HairStyle/Boy";
import Face from "./Models/Face";
import { ElementObject, elements_objects } from "./Elements/swatch";

CameraControls.install({ THREE });
extend({ CameraControls });

function Foo() {
  const { camera } = useThree();
  camera.rotation.order = "YXZ";
  console.log(camera.position);
}

function Controls({
  zoom,
  focus,
  clicked,
  setData,
  pos = new THREE.Vector3(),
  look = new THREE.Vector3(),
}) {
  const ref = useRef();
  const camera = useThree((state) => state.camera);
  const gl = useThree((state) => state.gl);
  useFrame((state, delta) => {
    if (clicked) {
      pos.set(focus[zoom].x, focus[zoom].y, focus[zoom].z);
      look.set(focus[zoom].x, focus[zoom].y, focus[zoom].z - 2);

      state.camera.position.lerp(pos, 1);
      state.camera.updateProjectionMatrix();

      ref.current.setLookAt(
        state.camera.position.x,
        state.camera.position.y,
        state.camera.position.z,
        look.x,
        look.y,
        look.z,
        true
      );
      console.log("ENTERED");
      setData((prevState) => ({
        ...prevState,
        zoom: !clicked,
      }));
    }
    ref.current.update(delta);
  });
  return <cameraControls ref={ref} args={[camera, gl.domElement]} />;
}

function Configurator({ history, checkGender }) {
  const focusPosition = [
    {
      x: 0.0653451230347078,
      y: 1.2835181387688754,
      z: 2.8239068138582737,
    },
    {
      x: 0,
      y: 0,
      z: 5,
    },
  ];

  console.log("RERENDERED CONFIGURATOR");

  const [state, setState, pointer, setPointer] = useStateSnapshots(
    {
      appliedFace: "F1",
      appliedHairColor: null,
      appliedBoyHairStyle: "BHS2",
      colorBHS: null,
      textureBHS: null,
    },
    1000,
    10
  );

  const [data, setData] = useState({
    activeOption: 0,
    boyColorActive: false,
    activeElement: 0,
    zoom: false,
  });


  return (
    <>
      <div className="App">
        <div>
          {elements_objects.map((options, index) => (
            <ElementObject
              key={index}
              id={index}
              options={options}
              active={data.activeElement}
              onClick={() => {
                setData((prevState) => ({
                  ...prevState,
                  activeElement: index,
                  zoom: !data.zoom,
                }));
              }}
            />
          ))}
        </div>
        <div>
          <Suspense fallback={null}>
            <Canvas flat>
              <Foo />
              <CameraHelper />
              <Lights />
              <Suspense fallback={null}>
                <Face appliedFace={state.appliedFace} />
                <BoyHairstyle
                  appliedBoyHairStyle={state.appliedBoyHairStyle}
                  appliedFace={state.appliedFace}
                  textureBHS={state.textureBHS}
                  colorBHS={state.colorBHS}
                />
              </Suspense>
              <Controls
                zoom={data.activeElement}
                focus={focusPosition}
                clicked={data.zoom}
                setData={setData}
              />
            </Canvas>
          </Suspense>
        </div>
      </div>
    </>
  );
}

export default Configurator;
2

the code is too specific, i don’t understand what this all is.

  • this is an example using camera-controls: yomotsu camera-controls - CodeSandbox
  • you should call set state inside a loop React Three Fiber Documentation
  • it looks like you are messing with the camera on top of camera controls. controls are made to control the camera, if you are now also controlling the camera then two places pull on the same object, you have a race condition

i am guessing you want to click something and the camera has to move there, like this

but you need to have a concept in that case because if you have controls you can’t just take the camera and move it elsewhere.

3

This is the best reference example l have currently.
I’m trying to implement functionality whereby you can focus/zoom in on the upper body by clicking a button and zoom out by clicking another.

I have deduced that its the zoom of the camera being used but i’m not too sure on how to directly implement it myself. The rotation should always be maintained about the y-axis.

What do you suggest l do.

On my code over there, I was shifting the position of the camera manually via a lerp as well as the lookAt but that’s only before l took the logic from the camea-control examples

Thank you for your reply

4

I followed this example in implementing the controls into the project.
I think my mistake was then trying to mess with the position of the camera whilst camera-controls controls the camera itself.

5

In this example, you can focus, but l dont see the rotation property being used.
In essence i’m trying to get the focus/zoom in + rotation about the y-axis working