0

I wrote this code :

 import React from 'react'
    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 index = () => {
      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 index

When I run this code, my 3d model doesn't appear on the page, and my full website is breaking after 5 to 10 seconds, But, whenever I comment out <Environment preset='city' />, my website is working but the background of my website is greyish, but I wanted it to be white to fully showcase my website I'm using react three drei version 9.70.4

Sadeed_pv
  • 513
  • 1
  • 9
  • 22
Rajkrishna Rana
  • 1
  • 1

1 Answers1

0

Same issue from same tutorial video. My Guess is Environment component is broke. I monitored browser's network tab and it was fetching error network timed out. I will let you know if i get any alternate solution for that. If you get then pls let me know According to chatGPT. Here's a step-by-step breakdown of how the component works:

Fetching the Environment Map: The component fetches the environment map, which is usually an HDRI image file, using the fetch or a similar mechanism. This environment map is a pre-generated image that captures lighting and reflections from various directions around a central point.

Loading and Applying the Map: Once the environment map is fetched, the component applies it to the 3D scene. The map is used as the background and lighting source for the scene. It's projected onto the inside of a large sphere surrounding the scene, effectively simulating the environment.

Lighting and Reflections: The environment map provides lighting information for the scene. Objects in the scene receive illumination and reflections based on the values and colors present in the environment map. This results in realistic and dynamic lighting effects, such as soft shadows and reflections that change as the camera or objects move.

Background: The environment map also becomes the background of the scene. It's what the camera sees when looking beyond the objects in the scene. This contributes to the overall atmosphere and realism of the scene.

Props and Customization: The component often provides props that allow you to customize the appearance of the environment, such as adjusting the intensity of lighting, changing the map's rotation, or applying different presets for different lighting scenarios (e.g., indoor, outdoor, sunset).

In summary, the component in react-three-drei does more than just "display" the environment. It actively fetches and uses an environment map (usually an HDRI) to provide realistic lighting and reflections in your 3D scene, contributing significantly to the visual quality and authenticity of the rendered objects.

Sanjay Balnad
  • 1