- 给场景添加灯光
//设置灯光
const spotLight = new THREE.SpotLight(0xffffff);
//设置灯光从哪个位置照射场景
spotLight.position.set(-40, 60, -10);
//对象是否被渲染到阴影贴图中
spotLight.castShadow=true;
//把灯光添加到场景中
scene.add(spotLight);
- 材质MeshBasicMaterial(基础材质)不受光线影响。不会产生阴影的效果，所以要换成MeshLambertMaterial（网格材质）
//平面的材质 颜色为0xcccccc
const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc });
//立方体的材质
const cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
//球体的材质
const sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff });
3.如何给场景添加阴影效果
//告诉渲染器允许在场景中使用阴影贴图
renderer.shadowMap.enabled = true
//设置plane材质接收阴影
plane.receiveShadow = true
//立方体被渲染到阴影贴图中
cube.castShadow = true
//球体被渲染到阴影贴图中
sphere.castShadow = true;
//灯光被渲染到阴影贴图中
spotLight.castShadow=true;
全部代码
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./js/index2.js"></script>
</body>
</html>
JS 部分
import * as THREE from 'three'
//创建一个场景
const scene = new THREE.Scene();
//创建一个相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
//创建渲染器
const renderer = new THREE.WebGLRenderer();
//设置渲染器背景色
renderer.setClearColor(0xEEEEEE);
//设置场景渲染的尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
//告诉渲染器允许在场景中使用阴影贴图
renderer.shadowMap.enabled = true
//创建坐标轴
const axes = new THREE.AxesHelper(20);
//把坐标轴添加到场景重
scene.add(axes)
//创建一个平面（宽60，高20）
const planeGeometry = new THREE.PlaneGeometry(60, 20);
//设置平面的材质 颜色为0xcccccc
const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc });
//把平面和材质合并到网格中
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
//材质是否接收阴影
plane.receiveShadow = true
//把plane网格对象旋转90度
plane.rotation.x = -0.5 * Math.PI;
//设置plane对象的位置
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
//把plane对象放入场景中
scene.add(plane);
//创建一个立方体
const cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
//创建立方体的材质
const cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
//把立方体和材质放入网格中
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
//对象是否被渲染到阴影贴图中
cube.castShadow = true
//设定位置
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;
//把cube对象放入场景中
scene.add(cube);
//创建一个球体
const sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
//创建球体的材质
const sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff });
//把球体和材质放入网格对象中
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
//对象是否被渲染到阴影贴图中
sphere.castShadow = true;
//设置位置
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
//把sphere放入场景中
scene.add(sphere);
//设置灯光
const spotLight = new THREE.SpotLight(0xffffff);
//设置灯光从哪个位置照射场景
spotLight.position.set(-40, 60, -10);
//对象是否被渲染到阴影贴图中
spotLight.castShadow=true;
//把灯光添加到场景中
scene.add(spotLight);
//设置相机的位置 悬挂在场景的上方
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
//将相机指向场景的中心
camera.lookAt(scene.position);
//把渲染器挂载到页面中
document.body.appendChild(renderer.domElement);
//告诉渲染器，提供相机来渲染场景
renderer.render(scene, camera);
