exotic maple
Ok I am getting an error here anisotropy, please help me fix it like when I gave my code to Gemini it made the code worse and applied the shadow to the whole screen. Let me share everything the error
The code I have attached them, all of them are in my canvas folder and if I use Gemini code, it will work but the whole screen will be of shadow.
Please tell me what is happening
frosty crane
What’s the error?
exotic maple
bro i think its giving the error in the Backdrop.jsx file related to anisotropy
and the code that i have have shared you is the error code
and when I use ai it corrected the code as below
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 * as THREE from 'three';
import state from '../store';
const Shirt = () => {
const snap = useSnapshot(state);
const { nodes, materials } = useGLTF('/shirt_baked.glb');
// Load textures
const logoTexture = useTexture(snap.logoDecal);
const fullTexture = useTexture(snap.fullDecal);
useFrame((state, delta) => {
if (logoTexture) {
logoTexture.anisotropy = state.gl.capabilities.getMaxAnisotropy();
logoTexture.needsUpdate = true; // Tell Three.js to update the texture
}
if (fullTexture) {
fullTexture.anisotropy = state.gl.capabilities.getMaxAnisotropy();
fullTexture.needsUpdate = true;
}
// Existing color damping
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 && fullTexture && (
<Decal
position={[0, 0, 0]}
rotation={[0, 0, 0]}
scale={1}
map={fullTexture}
depthTest={false}
depthWrite={true}
/>
)}
{snap.isLogoTexture && logoTexture && (
<Decal
position={[0, 0.04, 0.15]}
rotation={[0, 0, 0]}
scale={0.15}
map={logoTexture}
depthTest={false}
depthWrite={true}
/>
)}
</mesh>
</group>
);
};
export default Shirt;
but the problem comes as shown in the pic the whole area screen is in shadow
if i show you the full google error here it is
Uncaught TypeError: Cannot set properties of undefined (setting 'anisotropy')
at applyProps (chunk-D4CBPAF5.js?v=fee1b30f:12972:17)
at commitUpdate (chunk-D4CBPAF5.js?v=fee1b30f:13859:9)
at runWithFiberInDEV (chunk-D4CBPAF5.js?v=fee1b30f:915:18)
at commitHostUpdate (chunk-D4CBPAF5.js?v=fee1b30f:7220:11)
at commitMutationEffectsOnFiber (chunk-D4CBPAF5.js?v=fee1b30f:7889:98)
at recursivelyTraverseMutationEffects (chunk-D4CBPAF5.js?v=fee1b30f:7794:13)
at commitMutationEffectsOnFiber (chunk-D4CBPAF5.js?v=fee1b30f:7803:13)
at recursivelyTraverseMutationEffects (chunk-D4CBPAF5.js?v=fee1b30f:7794:13)
at commitMutationEffectsOnFiber (chunk-D4CBPAF5.js?v=fee1b30f:7873:13)
at recursivelyTraverseMutationEffects (chunk-D4CBPAF5.js?v=fee1b30f:7794:13)Understand this error
hook.js:608 An error occurred in the <CanvasImpl> component.
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.
overrideMethod @ hook.js:608Understand this warning
chunk-G3XN5TUQ.js?v=fee1b30f:40318 THREE.WebGLRenderer: Context Lost.
i mean it shoould only have shadows on the side
exotic maple
Anyone help please 😭
hazy chasm
try removing the anisotropy related lines and see if the error goes away
logoTexture.anisotropy = state.gl.capabilities.getMaxAnisotropy();
fullTexture.anisotropy = state.gl.capabilities.getMaxAnisotropy();
...
the shadow issue could be solved by updating the angle from which the light is emitted ?
frosty crane
Oh I see, in your original code you use
map-anisotropy
Prop, which won’t work because Decal internally is a mesh not a material. You need to use
material-map-anisotropy
exotic maple
Okk I will try to fix and if there is error I will post it here
exotic maple
Shirt.jsx
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}
material-map-anisotropy={16}
depthTest={false}
depthWrite={true}
/>
)}
</mesh>
</group>
)
}
export default Shirt
bro i have tried as you said above
but still the shadow is on the whole screen
may be there is something wrong in Backdrop.jsx
import React, { useRef } from 'react'
import { easing } from 'maath'
import { useFrame } from '@react-three/fiber'
import { AccumulativeShadows, RandomizedLight } from '@react-three/drei';
const Backdrop = () => {
const shadows = useRef();
return (
<AccumulativeShadows
ref={shadows}
temporal
frames={60}
alphaTest={0.85}
scae={10}
rotation={[Math.PI / 2, 0, 0]}
position={[0, 0, -0.14]}
>
<RandomizedLight
amount={4}
radius={9}
intensity={0.55}
ambient={0.25}
position={[5, 5, -10]}
/>
<RandomizedLight
amount={4}
radius={5}
intensity={0.25}
ambient={0.55}
position={[-5, 5, -9]}
/>
</AccumulativeShadows>
)
}
export default Backdrop
If you don’t want shadows then remove the shadows component