Skip to content

Lights

Translate manual light construction and positioning into declarative scene primitives.

Pinned example stack

react@19.1.1react-dom@19.1.1@react-three/fiber@9.3.0three@0.180.0

Exact Conversion

Switch between the React Three Fiber and Three.js examples, then test the R3F result in the live preview below.

React Three Fiber
Three.js

import { Canvas } from '@react-three/fiber';

function LitSphere() {
  return (
    <mesh>
      <sphereGeometry args={[1, 32, 32]} />
      <meshStandardMaterial color="#e5e7eb" roughness={0.35} />
    </mesh>
  );
}

export default function App() {
  return (
    <div style={{ height: '100vh', background: '#111827' }}>
      <Canvas camera={{ fov: 50, position: [0, 1.2, 5] }} dpr={[1, 2]}>
        <color attach="background" args={['#111827']} />
        <ambientLight intensity={0.25} />
        <directionalLight position={[2, 3, 4]} intensity={1.4} />
        <pointLight position={[-3, 1, 2]} intensity={18} distance={12} color="#60a5fa" />
        <LitSphere />
      </Canvas>
    </div>
  );
}

import * as THREE from 'three';

const scene = new THREE.Scene();
scene.background = new THREE.Color('#111827');

const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 1.2, 5);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.style.margin = '0';
document.body.appendChild(renderer.domElement);

const ambientLight = new THREE.AmbientLight('#ffffff', 0.25);
const keyLight = new THREE.DirectionalLight('#ffffff', 1.4);
keyLight.position.set(2, 3, 4);

const fillLight = new THREE.PointLight('#60a5fa', 18, 12);
fillLight.position.set(-3, 1, 2);

const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(1, 32, 32),
  new THREE.MeshStandardMaterial({ color: '#e5e7eb', roughness: 0.35 })
);

scene.add(ambientLight, keyLight, fillLight, sphere);

function onResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onResize);
renderer.render(scene, camera);

Live preview

What Changed

new THREE.AmbientLight() becomes <ambientLight />.
new THREE.DirectionalLight() becomes <directionalLight />.
Position and intensity stay conceptually identical, but they become props.
The object being lit does not change. Only the scene authoring style changes.

Practical Rule

Whenever a Three.js example adds a light to the scene, your first R3F instinct should be to look for the matching lowercase JSX primitive before reaching for abstractions.

External Resources