this is my code for rendering a 3D t-shirt model and an image as its material:
<code>const [decalGeometry, setDecalGeometry] = useState();
let fullTexture = new TextureLoader().load(tShirtReducer.fullDecal);
fullTexture.repeat = new Vector2(1, 1);
fullTexture.anisotropy = 16;
const {nodes, materials} = useGLTF('/shirt_baked_collapsed.glb');
useEffect(() => {
let mesh = new Mesh(nodes.T_Shirt_male.geometry);
mesh.receiveShadow = false;
const decalGeometry = new DecalGeometry(
mesh,
new Vector3(0, -0.2, 0),
new Euler(-0, 0, 0, "XYZ"),
new Vector3(1, 1, 1)
);
setDecalGeometry(decalGeometry);
}, []);
return (
<>
<OrbitControls
minPolarAngle={Math.PI / 2.5}
maxPolarAngle={Math.PI / 2.5}
/>
{
decalGeometry &&
<mesh
castShadow={true}
geometry={decalGeometry}
ref={meshRef}
// material-metalness={0.1}
>
<meshStandardMaterial
castShadow={true}
attach="material"
map={fullTexture}/>
</mesh>
}
</>
)
</code>
<code>const [decalGeometry, setDecalGeometry] = useState();
let fullTexture = new TextureLoader().load(tShirtReducer.fullDecal);
fullTexture.repeat = new Vector2(1, 1);
fullTexture.anisotropy = 16;
const {nodes, materials} = useGLTF('/shirt_baked_collapsed.glb');
useEffect(() => {
let mesh = new Mesh(nodes.T_Shirt_male.geometry);
mesh.receiveShadow = false;
const decalGeometry = new DecalGeometry(
mesh,
new Vector3(0, -0.2, 0),
new Euler(-0, 0, 0, "XYZ"),
new Vector3(1, 1, 1)
);
setDecalGeometry(decalGeometry);
}, []);
return (
<>
<OrbitControls
minPolarAngle={Math.PI / 2.5}
maxPolarAngle={Math.PI / 2.5}
/>
{
decalGeometry &&
<mesh
castShadow={true}
geometry={decalGeometry}
ref={meshRef}
// material-metalness={0.1}
>
<meshStandardMaterial
castShadow={true}
attach="material"
map={fullTexture}/>
</mesh>
}
</>
)
</code>
const [decalGeometry, setDecalGeometry] = useState();
let fullTexture = new TextureLoader().load(tShirtReducer.fullDecal);
fullTexture.repeat = new Vector2(1, 1);
fullTexture.anisotropy = 16;
const {nodes, materials} = useGLTF('/shirt_baked_collapsed.glb');
useEffect(() => {
let mesh = new Mesh(nodes.T_Shirt_male.geometry);
mesh.receiveShadow = false;
const decalGeometry = new DecalGeometry(
mesh,
new Vector3(0, -0.2, 0),
new Euler(-0, 0, 0, "XYZ"),
new Vector3(1, 1, 1)
);
setDecalGeometry(decalGeometry);
}, []);
return (
<>
<OrbitControls
minPolarAngle={Math.PI / 2.5}
maxPolarAngle={Math.PI / 2.5}
/>
{
decalGeometry &&
<mesh
castShadow={true}
geometry={decalGeometry}
ref={meshRef}
// material-metalness={0.1}
>
<meshStandardMaterial
castShadow={true}
attach="material"
map={fullTexture}/>
</mesh>
}
</>
)
Result:
As shown in the image, a large black shadow appears behind the model. I have set the receiveShadow value of the mesh to false but still the shadow didn’t disappear. How do I remove this shadow?