Three.js 光源介绍
光源是 Three.js 中用于照亮场景的重要元素。它可以模拟自然界中的光照，使场景更加逼真。
Three.js 中有多种类型的光源，每种类型都有其独特的光照效果。以下是一些常见的光源类型：
1. 环境光（AmbientLight）
环境光是一种均匀照亮整个场景的光源，没有特定的方向。它通常用于模拟环境光照，例如天空光或漫射光。
2. 点光源（PointLight）
点光源是一种从一个点向四面八方发射光线的点状光源。它通常用于模拟台灯、蜡烛等光源。
3. 平行光（DirectionalLight）
平行光是一种从无限远处射来的平行光线。它通常用于模拟太阳光等光源。
4. 聚光灯（SpotLight）
聚光灯是一种锥形光束光源。它通常用于模拟手电筒、舞台灯光等光源。
5. 半球光（HemisphereLight）
半球光是一种模拟天空光和地面反射光的光源。它通常用于室外场景。
光源属性
每个光源都具有一些属性，用于控制其光照效果。以下是一些常见的光源属性：
- 颜色（color） ：光源的颜色
- 强度（intensity） ：光源的强度
- 距离（distance） ：光源的有效距离
- 衰减（attenuation） ：光源的光照衰减
- 位置（position） ：光源的位置
- 方向（direction） ：光源的方向
- 目标（target） ：光源的目标点
代码
这里以环境光为点光源为例
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 创建场景
// 场景能够让你在什么地方、摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方。
const scene = new THREE.Scene();
// 添加背景颜色
scene.background = new THREE.Color("#5c92ff");
// 创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.y = 3;
camera.position.z = 10;
// 创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质
const material = new THREE.MeshPhongMaterial({
color: 0x0099ff,
shininess: 150,
});
// 创建Mesh
const cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0.5, 0);
// 物体接受光源
cube.receiveShadow = true;
// 物体投射光源
cube.castShadow = true;
scene.add(cube);
// 添加灯光效果
// 添加环境光
const light = new THREE.AmbientLight(0xffffff, 1); // 柔和的白光
scene.add(light);
// 添加点光源
const pointlight = new THREE.PointLight(0xffffff, 100, 100);
pointlight.position.set(5, 3, 5);
pointlight.castShadow = true;
scene.add(pointlight);
// 创建地面
const meshfloor = new THREE.Mesh(
new THREE.PlaneGeometry(10, 10),
new THREE.MeshPhongMaterial({
color: 0x1b5e20,
})
);
meshfloor.rotation.x -= Math.PI / 2;
// 地面同样要设置接受光源
meshfloor.receiveShadow = true;
scene.add(meshfloor);
// 添加坐标辅助线
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
// 将渲染器添加到页面
document.body.appendChild(renderer.domElement);
// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 让立方体动起来
function animate() {
// 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
requestAnimationFrame(animate);
cube.rotation.y += 0.01;
// 轨道控制器更新
controls.update();
renderer.render(scene, camera);
}
animate();
打开浏览器可见
参考网站：
