Good morning,
I receive this error message and I don’t understand what I should do?
I’m following a tutorial and I’m stuck.
I updated as registered and it still doesn’t work: npm install @react-three /drei --latest
if I remove this block it works what should I do to make it work?
<CameraRig>
<Backdrop />
<Center>
<Shirt />
</Center>
</CameraRig>
here is the link to the tutorial: https://www.youtube.com/watch?v=ZqEa8fTxypQ
My source
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
index.jsx
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
So apparently you might have a rogue <div> tag somewhere that is causing an issue. Did you put a div tag in your CameraRig component? Check out the following thread for more information…
Also go back through the video (around the 57:00 mark) and see if perhaps you forgot to remove the div and put in a group tag or something.
1 Like
To quote the thread @Martyr2 linked to:
If you try to add a standard HTML tag inside the React Three Fiber Canvas element, then you will get a similar error to,
<center> is a standard (though deprecated) HTML tag . Could this be the source of the problem?
when I remove the center tag I have the same problem.
I tried removing tag by tag and if I just leave the CameraRig tag I have the same problem.
hello I still don’t have a solution with this block.
<CameraRig>
<Backdrop />
<Center>
<Shirt />
</Center>
</CameraRig>
</Canvas>
Can you help me because I can’t solve this problem.
I have no idea.
As Martyr said, your problem seems to be emanating from the CameraRig component. You’ve shown us Shirt, but not CameraRig, so…
m_hutley:
I have no idea.
As Martyr said, your problem seems to be emanating from the CameraRig component. You’ve shown us Shirt, but not CameraRig, so
here is the CameraRig file
import React, { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import { easing } from 'maath';
import { useSnapshot } from 'valtio';
import state from '../store';
const CameraRig = ({ children }) => {
const group = useRef();
return <group ref={group}>{children}</group>
}
export default CameraRig
I found I removed “chidren” from the CameraRig component and it works however I cannot display the tshirt image?
Do you have an idea ?
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);
return (
<group>
<mesh
castShadow
geometry={nodes.T_Shirt_male.geometry}
material={materials.lambert1}
material-roughness={1}
dispose={null}
>
</mesh>
</group>
)
}
And what does your Backdrop element look like? The fact that you can remove children from CameraRig and it works tells us that the rogue element is probably in one of the children of CameraRig… be it Backdrop, Center or Shirt. Process of elimination. Remove each one in turn until it works. Then go look in that component and match it up with the video.
1 Like
the page displays fine, but I don’t have the image of the t-shirt which should be displayed " const { nodes, materials } = useGLTF(‘/shirt_baked.glb’); "
CameraRig.tsx
import React, { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import { easing } from 'maath';
import { useSnapshot } from 'valtio';
import state from '../store';
const CameraRig = ({ children }) => {
const group = useRef();
return <group ref={group}></group>
}
export default CameraRig
index.jsx
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
I’m still stuck regarding the display of my tshirt image and I don’t understand why because I don’t have any errors in the console and the other images are displayed.
Can you help me ?
