Question 302129 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Image not popping up

I am very new to React and I am trying to get an image of a shirt onto the website. No error pops up, but the shirt just doesn’t show up. Here is my ‘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>
          <ambientLight intensity={0.5} />
          <Environment preset='city' />

          <CameraRig>
            <Backdrop />
            <Center>
              <Shirt />
            </Center>
          </CameraRig>
        </Canvas>
      )
    }

    export default Canvas

This is what my ‘Shirt.jsx’ looks like:

    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>
      )
    }

    export default Shirt

I can’t seem to find the error. I feel like I mistyped something but I can’t see it.

Tags:

2

Answers


  1. 0

    It seems like the code in your ‘Shirt.jsx’ file is not explicitly using the textures you’ve loaded. Inside the component, the material doesn’t seem to be utilizing the textures you’ve defined (logoTexture and fullTexture). You might need to apply these textures to the material properties, like map, normalMap, etc., depending on the type of texture.

    Login or Signup to reply.
  2. 0 
    const Shirt = () => {
  // ... (other code remains unchanged)

  return (
    <group>
      <mesh
        castShadow
        geometry={nodes.T_Shirt_male.geometry}
        material={materials.lambert1}
        material-roughness={1}
        dispose={null}
      >
        {/* Apply textures using Decal */}
        <Decal
          texture={logoTexture}
          rotation={[0, 0, 0]}
          position={[0, 0, 0]}
          scale={[1, 1, 1]}
        />
        <Decal
          texture={fullTexture}
          rotation={[0, 0, 0]}
          position={[0, 0, 0]}
          scale={[1, 1, 1]}
        />
      </mesh>
    </group>
  );
};

export default Shirt;

    Make sure that the paths to snap.logoDecal and snap.fullDecal are correct and pointing to valid texture files.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search