More natural ways to see any objects with lightformers of environments

Questions
, ,
1

I am trying to get the most natural way of lights in an object but I’m not satisfied. Do you guys have any suggestion please?

I have a sample of code here.

import React, { useRef, useState, useEffect } from "react";
import gsap from 'gsap'
// import styles from '../scss/grandcanyon.module.scss'
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import { Environment, Lightformer, OrbitControls  } from '@react-three/drei'


const Scene = () => {
    const cameraRef = useRef(null)
    const [positions, setPositions] = useState([]);

    const {
        camera, gl:{domElement},
    } = useThree()

    useEffect(() => {
        camera.position.set(0,0,5)
        camera.lookAt(0,0,0)
        cameraRef.current = camera
        console.log("Camera",cameraRef.current.position)
    },[camera])

    return <>
        <OrbitControls 
            maxZoom={1}
            minZoom={1}
            minDistance={5}
            maxDistance={5}
            minPolarAngle={1.5}
            maxPolarAngle={1.5}
            ref={cameraRef} 
            target={[0,0,0]} 
            args={[camera,domElement]} 
        />

        <mesh castShadow>
            <boxGeometry args={[3,3]}></boxGeometry>
            <meshStandardMaterial color={0x9b80ff}
                roughness={0.3} 
                metalness={0.7}
                emissive={0x000000}
                toneMapped={false}                
                
            />
        </mesh>
    </>
}

const BoxScene = () => {

    return (
        <Canvas linear shadows gl={{ antialias:true }} >
            <Scene></Scene>
            <Environment resolution={512}>
                {/* Sides */}
                <Lightformer intensity={2} position={[-50, 2, 0]} scale={[70, 20, 70]} onUpdate={(self) => self.lookAt(0,0,0)} />
                <Lightformer intensity={2} position={[50, 2, 0]} scale={[70, 20, 70]} onUpdate={(self) => self.lookAt(0,0,0)} />
                <Lightformer intensity={2} position={[0, 2, 50]} scale={[70, 20, 70]} onUpdate={(self) => self.lookAt(0,0,0)} />
                <Lightformer intensity={2} position={[0, 2, -50]} scale={[70, 20, 70]} onUpdate={(self) => self.lookAt(0,0,0)} />
                
                <Lightformer intensity={2} color={0xfff461} position={[-50, -12, 0]} scale={[70, 20, 70]} onUpdate={(self) => self.lookAt(0,0,0)} />
                <Lightformer intensity={2} color={0xfff461} position={[50, -12, 0]} scale={[70, 20, 70]} onUpdate={(self) => self.lookAt(0,0,0)} />
                <Lightformer intensity={2} color={0xfff461} position={[0, -12, 50]} scale={[70, 20, 70]} onUpdate={(self) => self.lookAt(0,0,0)} />
                <Lightformer intensity={2} color={0xfff461} position={[0, -12, -50]} scale={[70, 20, 70]} onUpdate={(self) => self.lookAt(0,0,0)} />
                {/* Key */}
            </Environment>
        </Canvas>
    )
}
2

you can see the environment with <Environment background>

somebody was making a visual tool for it

but don’t know if it’s still active. it helps if you have a minimal photographic background, if you know what a key light is, a strip light and a fill. making your own environment is almost 1:1 the same as what a photographer would do using lightformers, big shapes that diffuse light.

the key light never is directly up front, it’s often top/left or top/right, comes from an angle, this is the strongest lightsource, but on its own leaves parts pitch black.

a strip paints the sides, literally the sides will have a “strip”, it comes from behind left or right

a fill illuminates the remaining black spots, but it has low intensity.

3

btw, bad idea to use “linear”. you won’t ever get good results with that. ootb threejs will look like 90s era cgi, color banding, low dynamic range. fiber fixes that for you by putting threejs into correct gamma and srgb + filmic tonemapping, it is very close to blender. by using “linear” you go back to default threejs and no matter what you do, it will look like dirt.

1 Like