CameraControls in react three fiber

Questions
1

Hello everybody. I am trying to set the camera position, (when the user clicks on the sphere) with the function fitToBox() but something goes wrong, any idea why?… I have the following component:

import { useEffect, useState, useRef } from 'react'

import { Canvas, useFrame } from "@react-three/fiber";

import { CameraControls } from '@react-three/drei'

import * as THREE from 'three'



const TestCanvas = ({ viewResetClicked, setViewResetClicked }) => {



    const camControlsRef = useRef()

    const meshRef = useRef()



    const clickHandler = () => {

        camControlsRef.current.fitToBox(

            meshRef,

            true

        )

    }



    return (  

        <Canvas camera={{position: [0,0,10]}}>

            <ambientLight intensity={0.8} />

            <directionalLight position={[5, 5, 5]} />

            <spotLight position={[-10,0,0]} />

            <CameraControls ref={camControlsRef}/>



            <axesHelper args={[5]} />

            <gridHelper />

            <mesh ref={meshRef} onClick={clickHandler}>

                <sphereGeometry args={[1]} />

                <meshPhongMaterial color={'red'}/>               

            </mesh>

        </Canvas>

    );

}

export default TestCanvas;

And when I click to the sphere I get the following error:

Uncaught TypeError: object.updateWorldMatrix is not a function

expandByObject three.core.js:9721

setFromObject three.core.js:9572

fitToBox camera-controls.module.js:1619

clickHandler TestCanvas.jsx:12

onIntersect events-e3cb66e2.esm.js:858

handleIntersects events-e3cb66e2.esm.js:709

handleEvent events-e3cb66e2.esm.js:868

connect events-e3cb66e2.esm.js:2362

onCreated react-three-fiber.esm.js:88

Provider events-e3cb66e2.esm.js:2010

frame react-reconciler.development.js:14573

runWithFiberInDEV react-reconciler.development.js:522

commitHookEffectListMount react-reconciler.development.js:9395

commitHookLayoutEffects react-reconciler.development.js:9345

commitLayoutEffectOnFiber react-reconciler.development.js:9993

recursivelyTraverseLayoutEffects react-reconciler.development.js:10956

commitLayoutEffectOnFiber react-reconciler.development.js:10073

commitLayoutEffects react-reconciler.development.js:10950

commitRootImpl react-reconciler.development.js:12947

commitRoot react-reconciler.development.js:12848

commitRootWhenReady react-reconciler.development.js:12146

performWorkOnRoot react-reconciler.development.js:12070

performWorkOnRootViaSchedulerTask react-reconciler.development.js:2137

performWorkUntilDeadline scheduler.development.js:44

js scheduler.development.js:219

js scheduler.development.js:364

\__require chunk-G3PMV62Z.js:8

js index.js:6

\__require chunk-G3PMV62Z.js:8

exports react-reconciler.development.js:14021

createReconciler events-e3cb66e2.esm.js:1234

<anonymous> events-e3cb66e2.esm.js:1535
2 
- camControlsRef.current.fitToBox(meshRef, true)
+ camControlsRef.current.fitToBox(meshRef.current, true)
1 Like
3

Awesome! Many thanks!