PointLight is not working

Questions
1

Hi, I’m studying three.js again but PointLight is not working in my code.

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

let renderer, scene, camera, orbitControls;
let light;

const onWindowResize = () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
};

const initSetting = () => {
  //renderer
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;
  document.body.appendChild(renderer.domElement);
  window.addEventListener("resize", onWindowResize);

  //scene
  scene = new THREE.Scene();

  //camera
  camera = new THREE.PerspectiveCamera(
    60,
    window.innerWidth / window.innerHeight,
    1,
    2000
  );
  camera.position.set(0, 200, 500);

  //orbitControls
  orbitControls = new OrbitControls(camera, renderer.domElement);
  orbitControls.enableDamping = true; // 부드러운 컨트롤
  orbitControls.dampingFactor = 0.25; // 감속 설정
  orbitControls.screenSpacePanning = false;
  orbitControls.minDistance = 100;
  orbitControls.maxDistance = 1000;
  orbitControls.maxPolarAngle = Math.PI / 2;
};

const addPointLight = (x, y, z, helperColor) => {
  const color = 0xffffff;
  const intensity = 1.5; // 조정된 강도 값
  const distance = 2000;
  const decay = 2; // 물리적으로 정확한 감쇠

  const pointLight = new THREE.PointLight(color, intensity, distance, decay);
  pointLight.position.set(x, y, z);
  pointLight.castShadow = true; // 그림자 활성화

  scene.add(pointLight);

  const pointLightHelper = new THREE.PointLightHelper(
    pointLight,
    10,
    helperColor
  );
  scene.add(pointLightHelper);
};

const setupLight = () => {
  const ambientLight = new THREE.AmbientLight(0xffffff, 1);
  scene.add(ambientLight);

  addPointLight(500, 300, 500, 0xff0000); // 빨간색 라이트
  addPointLight(-500, 300, 500, 0xffff00); // 노란색 라이트
  addPointLight(-500, 300, -500, 0x00ff00); // 초록색 라이트
  addPointLight(500, 300, -500, 0x0000ff); // 파란색 라이트

  const shadowLight = new THREE.DirectionalLight(0xffffff, 1);
  shadowLight.position.set(200, 500, 200);
  shadowLight.target.position.set(0, 0, 0);
  shadowLight.castShadow = true; // 그림자 활성화
  const directionalLightHelper = new THREE.DirectionalLightHelper(
    shadowLight,
    10
  );
  scene.add(directionalLightHelper);
  scene.add(shadowLight);
  scene.add(shadowLight.target);
};

const animate = () => {
  requestAnimationFrame(animate);
  orbitControls.update();
  renderer.render(scene, camera);
};

const setupModel = () => {
  // 바닥
  const planeGeometry = new THREE.PlaneGeometry(1000, 1000);
  const planeMaterial = new THREE.MeshPhongMaterial({ color: 0x878787 });
  const plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.rotation.x = -Math.PI / 2;
  plane.receiveShadow = true; // 바닥에 그림자 활성화

  scene.add(plane);

  // gltf 모델
  new GLTFLoader().load("./data/character.glb", (gltf) => {
    const model = gltf.scene;
    model.traverse((node) => {
      if (node.isMesh) {
        node.castShadow = true; // 모델에 그림자 활성화
      }
    });
    model.position.y = 100; // 모델이 바닥에 묻히지 않도록 위치 조정
    scene.add(model);
  });
};

initSetting();
setupLight();
setupModel();
animate();

PointLightHelper is added in scene and PointLight too. but PointLight is not working… I don’t know why. I guess It is because of the version of three.js. But I can’t find solution about my problem.

this is my package.json.

{
  "name": "study2",
  "version": "1.0.0",
  "main": "basic.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "vite --open basic.html"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "three": "^0.166.0"
  },
  "devDependencies": {
    "vite": "^5.3.2"
  },
  "description": ""
}

화면 캡처 2024-06-30 042223
화면 캡처 2024-06-30 0422231633×840 20.6 KB

If there are PointLights, The plane(floor) suppose to be reflecting lights(because of the MeshPhongMaterial) but It doesn’t.

2

You place the lights far far away from any surface, so the usual point-lighty spherical pattern / reflection will no longer appear as the rays hitting the surface are approximately-parallel.

Try putting the light closer (ex. position.set(20.0, 20.0, 20.0), that’s still quite big distance but your scene has a huge scale already.), and disable the shadows when debugging lights (shadows at scenes with unusually large scale start to behave weird and can darken the surfaces and obstruct the light, but that’s something best to debug separately.)

3

I edited my code, I relocated pointLights.

const addPointLight = (x, y, z, helperColor) => {
  const color = 0xffffff;
  const intensity = 1.5; // 조정된 강도 값
  const distance = 2000;
  const decay = 2; // 물리적으로 정확한 감쇠

  const pointLight = new THREE.PointLight(color, intensity, distance, decay);
  pointLight.position.set(x, y, z);
  pointLight.castShadow = true; // 그림자 활성화

  scene.add(pointLight);

  const pointLightHelper = new THREE.PointLightHelper(
    pointLight,
    10,
    helperColor
  );
  scene.add(pointLightHelper);
};

const setupLight = () => {
  const ambientLight = new THREE.AmbientLight(0xffffff, 1);
  scene.add(ambientLight);

//relocated lights
  addPointLight(100, 100, 100, 0xff0000); // 빨간색 라이트
  addPointLight(-100, 100, 100, 0xffff00); // 노란색 라이트
  addPointLight(-100, 100, -100, 0x00ff00); // 초록색 라이트
  addPointLight(100, 100, -100, 0x0000ff); // 파란색 라이트

  const shadowLight = new THREE.DirectionalLight(0xffffff, 1);
  shadowLight.position.set(200, 500, 200);
  shadowLight.target.position.set(0, 0, 0);
  shadowLight.castShadow = true; // 그림자 활성화
  const directionalLightHelper = new THREE.DirectionalLightHelper(
    shadowLight,
    10
  );
  scene.add(directionalLightHelper);
  scene.add(shadowLight);
  scene.add(shadowLight.target);
};

const animate = () => {
  requestAnimationFrame(animate);
  orbitControls.update();
  renderer.render(scene, camera);
};

but this is the result.

화면 캡처 2024-06-30 043804
화면 캡처 2024-06-30 0438041347×654 16.7 KB

I tried to change PointLight to DirectionalLight. And DirectionalLight is working.
I guess, like you said, It’s the distance and big size of my meshes is the problem…
but why does the problem apply to PointLight only?

(this is DirectionalLight version - I didn’t edit helper code.(those are pointLightHelper but location is for DirectionalLights’)

const addPointLight = (x, y, z, helperColor) => {
  const color = 0xffffff;
  const intensity = 1.5; // 조정된 강도 값
  const distance = 2000;
  const decay = 2; // 물리적으로 정확한 감쇠

  const pointLight = new THREE.DirectionalLight(
    color,
    intensity,
    distance,
    decay
  );
  pointLight.position.set(x, y, z);
  pointLight.castShadow = true; // 그림자 활성화

  scene.add(pointLight);

  const pointLightHelper = new THREE.PointLightHelper(
    pointLight,
    10,
    helperColor
  );
  scene.add(pointLightHelper);
};

const setupLight = () => {
  const ambientLight = new THREE.AmbientLight(0xffffff, 1);
  scene.add(ambientLight);

  addPointLight(500, 300, 500, 0xff0000); // 빨간색 라이트
  addPointLight(-500, 300, 500, 0xffff00); // 노란색 라이트
  addPointLight(-500, 300, -500, 0x00ff00); // 초록색 라이트
  addPointLight(500, 300, -500, 0x0000ff); // 파란색 라이트

  const shadowLight = new THREE.DirectionalLight(0xffffff, 1);
  shadowLight.position.set(200, 500, 200);
  shadowLight.target.position.set(0, 0, 0);
  shadowLight.castShadow = true; // 그림자 활성화
  const directionalLightHelper = new THREE.DirectionalLightHelper(
    shadowLight,
    10
  );
  scene.add(directionalLightHelper);
  scene.add(shadowLight);
  scene.add(shadowLight.target);
};

화면 캡처 2024-06-30 044510
화면 캡처 2024-06-30 0445101447×681 29.6 KB

화면 캡처 2024-06-30 043804
화면 캡처 2024-06-30 0438041395×547 22.4 KB

4

Point lights have a position in space, and affect objects less with distance. An intensity of 1.5 is similar to “1.5 candles”, and at distances of hundreds of meters you won’t see much. You can increase the intensity, decrease the distance, decrease the decay, or some combination of these. Setting up a simple GUI (with lil-gui, for example) makes it much easier to find the right combination of values.

Directional lights have infinite distance and no decay. They’re often used to simulate strong direct sunlight.

3 Likes
5

Thank you all! I edited my code and It finally works!

const addPointLight = (x, y, z, helperColor) => {
  const color = 0xffffff;
  const intensity = 4;
  const distance = 0;
  const decay = 0;

  const pointLight = new THREE.PointLight(color, intensity, distance, decay);
  pointLight.position.set(x, y, z);

  scene.add(pointLight);

  const pointLightHelper = new THREE.PointLightHelper(
    pointLight,
    10,
    helperColor
  );
  scene.add(pointLightHelper);
};

image
image1894×817 60.4 KB