Scene Won't Render and Animate Until I Resize the Browser

[mbritton]

Thanks for this excellent library.

In this application, I'm experimenting with camera movements using react-spring, and my scene won't animate until I resize the browser window. It won't render at all unless I explicitly call gl.render.

In Hook PositionCamera's useSpring onFrame, which I keep in the store, I am also unable to make quaternions rotate my camera as it is tweened into position. Positioning is fine.

The main scene and its handler:

function Experiment01() {

    const onScreenClickHandler = (e) => {
        let selectedObjectVector = new THREE.Vector3(e.object.position.x, e.object.position.y, e.object.position.z);
        useStore.setState({ targetVector: selectedObjectVector });
    }

    return(
        <div className="App">
            <Canvas id="scene-container" camera={{position: [0,0,0], name:"larry"}}>
                <ambientLight />
                <pointLight position={ [0, 3, -2.39] }/>

                <ScreenBox onClick={onScreenClickHandler} rotation={[0, .3, 0]} position={ [0, 0, -1] } />
                <ScreenBox onClick={onScreenClickHandler} position={ [2, 2, -4] } />
                <ScreenBox onClick={onScreenClickHandler} position={ [0, 4, -2] } />
                <ScreenBox onClick={onScreenClickHandler} position={ [-2, -4, -6] } />
                <ScreenBox onClick={onScreenClickHandler} rotation={[0, -.3, 0]} position={ [-6, -4, -12] } />
                
                <Suspense>
                    <PositionCamera />
                </Suspense>
            </Canvas>
            <Menu />
        </div>
    );
}

export default Experiment01;

The hook for camera positioning:

function PositionCamera() {
    
    const { camera, gl, scene, renderer } = useThree();
    const myTargetVector = useStore.getState().targetVector;
    
    useStore.setState({currentCamera: camera, currentGL: gl, currentScene: scene, currentRenderer: renderer});

    let origPos = new THREE.Vector3().copy(camera.position);

    useSpring({
        to: {
            x: useStore ? useStore.getState().targetVector.x : 0,
            y: useStore ? useStore.getState().targetVector.y : 0,
            z: useStore ? useStore.getState().targetVector.z : 0
        },
        from: {
            x: origPos ? origPos.x : 0,
            y: origPos ? origPos.y : 0,
            z: origPos ? origPos.z : 0
        },
        onFrame: useStore.getState().onFrame
    });

    return null;
}

Finally, the onFrame in the zustand store:

onFrame: ({x,y,z}) => {
    let destinationRotation = new THREE.Euler().copy(get().currentCamera.rotation);

    // Current camera's quaternion
    let sourceQuaternion = new THREE.Quaternion().copy(get().currentCamera.quaternion);

    // Destination quaternion
    let destinationQuaternion = new THREE.Quaternion().setFromEuler(destinationRotation);
    let finalQuaternion = new THREE.Quaternion();

    get().currentCamera.position.set(x,y,z + 1);

    THREE.Quaternion.slerp(sourceQuaternion, destinationQuaternion, finalQuaternion, 1);

    get().currentCamera.quaternion.set(finalQuaternion.x, finalQuaternion.y, finalQuaternion.z, finalQuaternion.w);

    // Scene will not render on first load without this.
    get().currentGL.render(get().currentScene, get().currentCamera);
}

Any advice would be appreciated.

Mike

[drcmda]

can you first move all dependencies up to date and then see if its still the case?

second step would be minimal, reduced codesandbox

[mbritton]

All ready

To replicate: click a box. Expected: tween to position. Actual: nothing until you resize the window. :)

[drcmda]

well, there's nothing there that would ever inform the component that you made a state change. it renders on resize because of useThree that's all, so the spring gets fresh data when it happens. when you want a component to listen to a state change then you need to do

  let targetVector =  useStore(state => state.targetVector)

  useSpring({
    to: {
      x: targetVector.x,
      y: targetVector.y,
      z: targetVector.z,
    },

but the whole thing needs a re-do tbh. don't take it too hard ...

• you cant just smack a setState into the render function, this is what useEffect is for
• you shouldnt have any side-effect in the render function like textures, objects, loaders - all of this stuff will execute on every render from scratch
• useSpring can accept arrays
• you dont need a special camera
• you don't need to call into threes render
• this is not how you use zustand, etc etc etc.

this would all be possible in 10 LOC with lerping, like 95% of that code is not needed.

function Box() {
  return (
    <mesh  ...

Function Scene() {
  const { camera } = useThree()
  const [target] = useState(() => new THREE.Vector3())
  const onClick = e => target.copy(e.object)
  useFrame(() => camera.position.lerp(target, 0.1))
  return (
    <>
      <Box onClick={onClick} />
      <Box onClick={onClick} />

  ...

<Canvas>
  <Scene/>

[mbritton]

Awesome feedback, thanks for taking a look. The code is super bad and hard to look at, I agree. This feedback puts me on the right track.