hemishphereLight not working

import React, { Suspense, useEffect, useState } from ‘react’;
import { Canvas } from ‘@react-three/fiber’;
import { OrbitControls, Preload, useGLTF } from ‘@react-three/drei’;
import CanvasLoader from ‘…/Loader’;
//import { HemisphereLight, PointLight } from ‘three’;

const Computers = () => {
const computer = useGLTF(“./desktop_pc/scene.gltf”)
return (



<spotLight
position={[-20, 50, 10]}
angle={0.12}
penumbra={1}
intensity={1}
castShadow
shadow-mapSize = {1024} />
<primitive
object={computer.scene}
scale={0.75}
position={[0, -3.25, -1.5]}
rotation={[-0.01, -0.2, -0.1]} />

);
};

const ComputerCanvas = () => {
return (
<Canvas allback={}
frameloop=‘demand’
shadows
camera={{ position: [20, 3, 5], fov: 25 }}
gl={{ preserveDrawingBuffer: true }}>
<Suspense fallback={} >
<OrbitControls
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>

  <Preload all />

</Canvas>

);
};
export default ComputerCanvas

I am trying to use hemisphereLight and pointLight in this particular example. But It is not working. I couldn’t see any light in my model. When I took a pull from the github repo, it is working perfectly. Please let me know if you find any error, because i am tired of trying every possible way i saw on internet

Three has recently redefined how lights work, you need decay=0 on spot and point lights for them to work like before, ambient and hemisphere are now weaker, what used to be intensity 1 is now Math.PI.

Lights only affect certain materials, and under certain conditions. A metallic material for instance is unaffected, it needs an environment map. A basic material is not affected either.

There is nothing react specific, a hemisphere light is just this

<hemisphereLight intensity={Math.PI} />

Which is a plain THREE.HemisphereLight() working as documented in the three docs.

3 Likes

Thankyou so, so, so much!! the decay={0} worked like a magic. My model is well lit now!:blush:. All my 4 days of my research, and all i needed was a decay!!

1 Like