A summary of the pitfalls of point light sources

1 Point lights cannot scope geometry alone. Need assistance from other light sources

2 If you add a point light source and set the default value, the geometry displayed on the interface may not have any light source effect.

3. For point light sources, pay special attention to its attribute, the amount of decay from light distance, which is the decay. Its default value is 2. If we set a smaller value, we can see the effect in the interface:

4 Pay attention to the material of the geometry: it must be set to a material that responds to lighting, such as MeshStandardMaterial, MeshLambertMaterial, etc.

Effect when setting default value:

The effect after setting decay: 0:

You can see that the halo effect has appeared. The display effect of normal point light source is now available.

Let’s look at the code finally:

<template>
  <div>
  </div>
</template>
<script  setup>
import { ref } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import * as Dat from "dat.gui";
const scene = new THREE.Scene();
const camara = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.01,
  1000
);
camara.position.set(50, 50, 50);
const gui = new Dat.GUI();

//创建平面
const planeGeometry = new THREE.PlaneGeometry(80, 80);
const planeMaterial = new THREE.MeshStandardMaterial({ color: "#ccc" });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);
plane.position.set(0, -2, 0);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;

//创建几何体
const SphereGeometry = new THREE.SphereGeometry(4);
const sphMaterial = new THREE.MeshLambertMaterial();
const sep = new THREE.Mesh(SphereGeometry, sphMaterial);
sep.castShadow = true;
scene.add(sep);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

//加入环境光
const ambLight = new THREE.AmbientLight("#fff", 0.5);
ambLight.position.set(0, 0, 0);
scene.add(ambLight);

//点光源
const pointLighControl = {
  color: "#f00",
  intensity: 1,
  decay: 4, //沿着光照距离的衰退量。默认值为 2
  distance: 2 //光源照射的最大距离。默认值为 0（无限远）
};

const pointLight = new THREE.PointLight(
  pointLighControl.color,
  pointLighControl.intensity
);
pointLight.position.set(10, 10, 10);
pointLight.castShadow = true;
pointLight.shadow.radius = 20;
pointLight.shadow.mapSize.set(2048, 2048);
scene.add(pointLight);

gui
  .add(pointLight.position, "x")
  .min(-5)
  .step(0.1);
gui
  .add(pointLight, "distance")
  .min(0)
  .max(10)
  .step(0.1);
gui
  .add(pointLight, "intensity")
  .min(0)
  .step(0.01)
  .max(10);
gui
  .add(pointLight, "decay")
  .min(0)
  .step(0.01)
  .max(5);
const pointHelper = new THREE.PointLightHelper(pointLight, 1);
scene.add(pointHelper);
//轨道控制器
const control = new OrbitControls(camara, renderer.domElement);

const render = () => {
  renderer.render(scene, camara);
  requestAnimationFrame(render);
  camara.updateMatrix();
  control.update();
};
render();
</script>
<style scoped>
</style>

A summary of the pitfalls of point light sources

Guess you like