Intégration d'un composant CameraRig

Bonjour,

J'ai un soucis avec mon code des que je retire ce block sa fonctionne et des que je le remet la j'ai une page blanche.

Code:

1
2
3
4
5
6
   <CameraRig>
          <Backdrop />
           <Center>
           <Shirt />
           </Center>
    </CameraRig>

J'ai fais une mise à jour : npm install @react-three/drei --latest.

Avez vous une idée du problème ?

Index.jsx :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { Canvas } from '@react-three/fiber'
import { Environment, Center } from '@react-three/drei';
 
import Shirt from './Shirt';
import Backdrop from './Backdrop';
import CameraRig from './CameraRig';
 
const CanvasModel = () => {
    return (
        <Canvas
            shadows
            camera={{ position: [0, 0, 0], fov: 25 }}
            gl={{ preserveDrawingBuffer: true }}
            className="w-full max-w-full h-full transition-all ease-in"
        >
            <ambientLight intensity={0.5} />
            <Environment preset="city" />
 
            <CameraRig>
                <Backdrop />
                <Center>
                    <Shirt />
                </Center>
            </CameraRig>
        </Canvas>
    )
}
 
export default CanvasModel

Shirt.jsx :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import React from 'react'
import { easing } from 'maath';
import { useSnapshot } from 'valtio';
import { useFrame } from '@react-three/fiber';
import { Decal, useGLTF, useTexture } from '@react-three/drei';
 
import state from '../store';
 
const Shirt = () => {
    const snap = useSnapshot(state);
    const { nodes, materials } = useGLTF('/shirt_baked.glb');
 
    const logoTexture = useTexture(snap.logoDecal);
    const fullTexture = useTexture(snap.fullDecal);
 
    useFrame((state, delta) => easing.dampC(materials.lambert1.color, snap.color, 0.25, delta));
 
    const stateString = JSON.stringify(snap);
 
    return (
        <group key={stateString}>
            <mesh
                castShadow
                geometry={nodes.T_Shirt_male.geometry}
                material={materials.lambert1}
                material-roughness={1}
                dispose={null}
            >
                {snap.isFullTexture && (
                    <Decal
                        position={[0, 0, 0]}
                        rotation={[0, 0, 0]}
                        scale={1}
                        map={fullTexture}
                    />
                )}
 
                {snap.isLogoTexture && (
                    <Decal
                        position={[0, 0.04, 0.15]}
                        rotation={[0, 0, 0]}
                        scale={0.15}
                        map={logoTexture}
                        map-anisotropy={16}
                        depthTest={false}
                        depthWrite={true}
                    />
                )}
            </mesh>
        </group>
    )
}
 
export default Shirt