threejs学习之环境光和点光源
环境光可以均匀照亮场景中所有物体，不能投射阴影，不能设置方向，只能设置颜色和亮度。官方示例：
// 添加环境光
const light = new THREE.AmbientLight( 0x404040 ); // 柔和的白光
scene.add( light );
点光源，从一个点散发出的光，相当于灯泡，可以设置颜色，亮度、照射最大距离以及光照衰退量。官方示例：
const light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );
示例：使用环境光和点光源，编写一个可以投射正方体阴影到地面的效果
创建立方体，必须把参数castShadow设置为true，立方体才能产生阴影
// 加载物体纹理贴图
const texture = new THREE.TextureLoader().load('./img/5.png');
// 创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({
map: texture,
shininess: 80 // 镜面指数，越高反射效果越强
});
// 创建网格
const cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0.5, 0) // 移动位置（x,y,z）
// 物体产生阴影
cube.castShadow = true
scene.add(cube);
添加环境光
// 添加环境光
const light = new THREE.AmbientLight(0x404040, 2);
scene.add(light);
添加点光源，必须把castShadow设为true，光源才能投射阴影
// 添加点光源
const pointLight = new THREE.PointLight(0xf5222d, 1, 100);
pointLight.position.set(5, 3, 5); //设置光源位置
// 光源投射阴影
pointLight.castShadow = true
scene.add(pointLight);
添加地面，必须把receiveShadow设为true，地面才能接收物体投射出的阴影
// 添加地面
const meshfloor = new THREE.Mesh(
new THREE.PlaneGeometry(10, 10), // 创建平面
new THREE.MeshPhongMaterial({
color: 0xbae637,
side: THREE.DoubleSide
})
)
// 旋转地面
meshfloor.rotation.x = Math.PI / 2
// 地面接收阴影
meshfloor.receiveShadow = true
scene.add(meshfloor)
最后把渲染器的参数shadowMap.enabled设置为true，场景就能显示阴影了
renderer.shadowMap.enabled = true
完整代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>threejs-demo1title>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
}
}
script>
<style>
* {
margin: 0;
}
#gui {
position: absolute;
right: 0;
width: 300px;
}
style>
head>
<body>
<div id="container">div>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 创建场景
const scene = new THREE.Scene();
// 创建透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);
// 移动相机位置
camera.position.z = 10;
camera.position.y = 3;
// 加载物体纹理贴图
const texture = new THREE.TextureLoader().load('./img/5.png');
// 创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({
map: texture,
shininess: 80 // 镜面指数，越高反射效果越强
});
// 创建网格
const cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0.5, 0) // 移动位置（x,y,z）
// 物体产生阴影
cube.castShadow = true
scene.add(cube);
// 添加环境光
const light = new THREE.AmbientLight(0x404040, 2);
scene.add(light);
// 添加点光源
const pointLight = new THREE.PointLight(0xf5222d, 1, 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: 0xbae637,
side: THREE.DoubleSide
})
)
meshfloor.rotation.x = Math.PI / 2
meshfloor.receiveShadow = true
scene.add(meshfloor)
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 调整渲染器窗口大小
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true
document.getElementById('container').appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate()
script>
body>
html>