15.Three.js PointLight 知识详解 + Vue3 实战案例-CSDN博客

本文链接：https://blog.csdn.net/Miller777_/article/details/147741867

🎯 本文将带你全方位了解 Three.js 中的 PointLight 点光源，包括它的属性、使用方式、配套工具以及如何在 Vue 3 中使用 Composition API 构建一个完整可视化场景 ✨！

📖 一、什么是 PointLight？

PointLight 是 Three.js 中一种 点光源，从一个点向所有方向发射光线，类似生活中的 灯泡💡。

const light = new THREE.PointLight(color, intensity, distance, decay);

🔍 二、构造函数参数详解

参数名	类型	默认值	含义 📝
`color`	`Color`	`0xffffff`	光的颜色 🎨
`intensity`	`Number`	`1`	光照强度（越大越亮）🌞
`distance`	`Number`	`0`	光线照射距离，0表示无限远 🚫📏
`decay`	`Number`	`1`	衰减系数，代表光强随距离减弱程度（需开启 physicallyCorrectLights）

👉 注意：distance 和 decay 共同控制光线的衰减效果，模拟真实场景下的照明逻辑。

🎛️ 三、常用属性

属性名	类型	含义
`.power`	Number	光源功率（单位流明），`power = intensity × 4π` 💥
`.decay`	Number	衰减系数（见上）
`.distance`	Number	最大照射距离
`.castShadow`	Boolean	是否投射阴影（默认为 `false`）🌑
`.shadow`	LightShadow	阴影属性配置对象

🧪 四、辅助工具：PointLightHelper

const helper = new THREE.PointLightHelper(pointLight, sphereSize, color); scene.add(helper);

✅ 可视化点光源位置和范围，调试好帮手！

🧱 五、完整基础示例

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
pointLight.castShadow = true;
scene.add(pointLight);

const helper = new THREE.PointLightHelper(pointLight);
scene.add(helper);

💻 六、Vue 3 + Three.js Composition API 实战案例

👇 创建一个 Vue 3 组件，渲染立方体并加上点光源 🌈

<script setup lang="ts">
import { onMounted } from 'vue';
import * as THREE from 'three';

onMounted(() => {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, 800 / 600, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(800, 600);
  document.getElementById('three-container')?.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  const pointLight = new THREE.PointLight(0xffffff, 1, 50, 2);
  pointLight.position.set(10, 10, 10);
  pointLight.castShadow = true;
  scene.add(pointLight);

  const helper = new THREE.PointLightHelper(pointLight);
  scene.add(helper);

  camera.position.z = 5;

  const animate = () => {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  };
  animate();
});
</script>

<template>
  <div id="three-container" class="w-[800px] h-[600px]"></div>
</template>

<style scoped>
#three-container {
  border: 1px solid #ccc;
}
</style>

🌈 七、PointLight 常见使用场景

场景	说明
局部照明	如桌面台灯、手电筒效果等
多光源构建氛围灯光	和 AmbientLight/SpotLight 搭配使用
与材质联动	`MeshStandardMaterial`/`MeshPhysicalMaterial` 支持真实光照模型 🧪