adrianhajdin / project_threejs_ai

https://jsmastery.pro
893 stars 267 forks source link

Typo in Property Name in Decal Component #61

Open mp2003 opened 4 months ago

mp2003 commented 4 months ago

Typo in Property Name in Decal Component

Description

In the Shirt component of the codebase, there is a typo in the property name used for anisotropy in the Decal component. The correct property name is anisotropy, but the code mistakenly uses map-anisotropy. This results in a TypeError when trying to access the anisotropy property of the texture.

Code Snippet

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}  {/* <-- TYPO HERE */}
                        depthTest={false}
                        depthWrite={true}
                    />
                )}
            </mesh>
        </group>
    );
};

export default Shirt;

image

the correct decal component can be

<Decal
    position={[0, 0.04, 0.15]}
    rotation={[0, 0, 0]}
    scale={0.15}
    map={logoTexture}
    anisotropy={16}
    depthTest={false}
    depthWrite={true}
/>

or please do tell me if i am missing something

gg-2004 commented 4 months ago

i have faced the same err

help