Hello all, I’m totally new with React so probably I’m just doing something wrong.
I’m running into issues when using the ' helper.
Problem: When background is set to ‘false’ my ‘environmentIntensity’ is not working, instead it looks like it is set to full intensity causing my shadows to dissapear.
When background is set to ‘true’ my intensity is working (and my shadows visible) but I don’t want my environment map to be visible in my scene.
Running Three r163 and all other dependencies are also the latest.
Here is my related code:
/* index.jsx */
import ‘./style.css’
import ReactDOM from ‘react-dom/client’
import { Canvas } from ‘@react-three/fiber’
import { Environment } from ‘@react-three/drei’;
import App from ‘./App.jsx’
import * as THREE from ‘three’
const root = ReactDOM.createRoot(document.querySelector(‘#root’))
const cameraSettings = {
fov: 25,
near: 0.01,
far: 500,
position: [ 0, 0.420, 0.5]
}
const created = ({ gl }) => {
gl.setClearColor(‘#000000’, 1),
gl.antialias = true,
gl.toneMapping = THREE.ACESFilmicToneMapping,
gl.outputColorSpace = THREE.SRGBColorSpace
gl.physicallyCorrectLights = true
}
root.render(
<Canvas
shadows
onCreated={ created }
camera={ cameraSettings }
>
)
/*
App.jsx
*/
import { useFrame, useThree } from’@react-three/fiber’
import { Perf } from ‘r3f-perf’
import { Suspense, useRef } from ‘react’
import { OrbitControls, Html,useHelper } from ‘@react-three/drei’
import * as THREE from ‘three’
import Can from ‘./Can.jsx’
export default function App()
{
useFrame((state, delta) =>
{
const angle = state.clock.elapsedTime * 0.5
state.camera.position.x = Math.sin(angle) * 4
state.camera.position.z = Math.cos(angle) * 4
state.camera.lookAt(0, 0.25, 0)
})
return <>
<Perf position='top-left' />
<OrbitControls />
<directionalLight position={ [ 1.5, 2.5, 1.5 ] } lookAT={ [ 0, 0, 0 ] } intensity={ 1.5 } />
<pointLight
position={ [ 1.5, 0.5, 1.5 ] }
intensity={ 1 }
distance={ 5 }
castShadow
shadow-mapSize={ [ 1024, 1024 ]}
shadow-camera-far={ 100 }
shadow-camera-top={ 2 }
shadow-camera-right={ 2 }
shadow-camera-bottom={ - 2 }
shadow-camera-left={ - 2 }
/>
<pointLight
ref={ pointLight }
position={ [ -0.5, 0.5, 1.5 ] }
intensity={ 1 }
distance={ 5 }
castShadow
shadow-mapSize={ [ 1024, 1024 ]}
shadow-camera-far={ 100 }
shadow-camera-top={ 2 }
shadow-camera-right={ 2 }
shadow-camera-bottom={ - 2 }
shadow-camera-left={ - 2 }
/>
<pointLight
position={ [ 0, 0.5, 0 ] }
shadow-camera-far={ 100 }
intensity={ 1 }
distance={ 5 }
castShadow
shadow-mapSize={ [ 1024, 1024 ] }
shadow-camera-top={ 2 }
shadow-camera-right={ 2 }
shadow-camera-bottom={ - 2 }
shadow-camera-left={ - 2 }
/>
<Suspense>
<Can />
</Suspense>
<ExportButton />
</>
}
/*
Can.jsx
*/
import React, { useEffect, useRef } from ‘react’
import { useGLTF } from ‘@react-three/drei’
import { Color } from ‘three’;
export default function Can(props) {
const { nodes, materials } = useGLTF(‘./models/optimizedCanTest.glb’)
const backdropRef = useRef();
useEffect(() => {
if (backdropRef.current) {
// Set the material color to a typical photography backdrop color
backdropRef.current.material.color = new Color(0xDDDDDD) // Neutral gray
}
}, );
return (
<group {…props} dispose={null} >
<mesh
ref={backdropRef}
receiveShadow
geometry={nodes.backdrop.geometry}
material={nodes.backdrop.material}
position={[0.202, 0, 0.002]}
rotation={[0, 0.017, 0]}
scale={[9.818, 4.922, 11.993]}
/>
<mesh
receiveShadow
geometry={nodes.Reflector_plane.geometry}
material={nodes.Reflector_plane.material}
position={[-1.412, 1.061, 0.447]}
rotation={[-0.005, -0.004, -1.626]}
scale={[1.39, 1, 1]}
/>
<mesh
castShadow
receiveShadow
geometry={nodes.can_Baked.geometry}
material={materials['can_Baked.015']}
position={[0, 0.003, 0]}
rotation={[Math.PI, -0.083, Math.PI]}
scale={1.169}
>
<meshPhysicalMaterial
attach="material"
map={nodes.can_Baked.material.map}
normalMap={nodes.can_Baked.material.normalMap}
roughnessMap={nodes.can_Baked.material.roughnessMap}
metalness={0.99}
roughness={0.5}
clearcoat={0.2}
clearcoatRoughness={0.25}
reflectivity={50}
envMapIntensity={15}
// Add any other properties you need
/>
</mesh>
</group>
)
}
useGLTF.preload(‘./models/optimizedCanTest.glb’)
Thanks in advance for any help!
oh, am i missing something in the following sandbox 
