WEB 3D技术 three.js 光照与阴影

本文我们来说灯光与阴影

之前我们有接触到光照类的知识但是阴影应该都是第一次接触
那么我们先来看光
首先是 AmbientLight 环境光你在官网中搜索 AmbientLight 官方是就写明了环境光是不会产生阴影的
因为它没有反向
在这里插入图片描述
然后是 DirectionalLight 平行光它是可以投射阴影的
因为它是类似于太阳那太阳照下来自然是有阴影的

还有就是 PointLight 点光源
点光源也是可以产生阴影但它是自身为中心四处发光的
就好像一颗光球会照向四周
在这里插入图片描述
SpotLight 聚光灯

这个就像舞台聚关灯的一个效果中心点光很聚集照向一个放心越远光越分散范围越大

RectAreaLight 平面光源
比较像从窗户外面照进来的光
但官网也说明白了平面光是不支持阴影的

大体可以总结为环境光和平面光是无法产生阴影的
那么还有一些材质也是不支持阴影的

首当其冲的就是 MeshBasicMaterial 基础网格材质
官网会告诉你它有没有光照都是一样的自然不会有阴影类的反应
在这里插入图片描述
MeshStandardMaterial 标准网格材质
这种就是使用Metallic-Roughness工作流程
和光照息息相关的它就可以产生出阴影

MeshLambertMaterial 的话也有光的效果但是这种比较粗糙不光滑
比较适合做木材等表面粗糙的物体的反射效果
在这里插入图片描述
MeshPhongMaterial 则相反它适合做一些表面光滑的物体

MeshLambertMaterial 和 MeshPhongMaterial，都是以性能好作为优势的相对逼真的程度会弱一些

通常情况下选择 MeshStandardMaterial 标准网格材质就够了
那么还有 MeshPhysicalMaterial 物理网格材质
它内部是更高级的渲染引擎效果会比基础网格材质更加逼真
但是会消耗更多的性能
他也是能够更光照发生作用的
在这里插入图片描述
OK 那我们想在就代码搞起喽

我们先把代码搞成这样

import './style.css'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

//创建相机
const camera = new THREE.PerspectiveCamera(
    45, //视角 视角越大  能看到的范围就越大
    window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好
    0.1,
    1000
);
const scene = new THREE.Scene();

//c创建一个canvas容器  并追加到 body上
const renderer = new THREE.WebGLRenderer(0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
camera.position.z = 5;
//设置相机默认看向哪里   三个 0  代表 默认看向原点
camera.lookAt(0, 0, 0);
//将内容渲染到元素上
renderer.render(scene, camera);
const controls = new OrbitControls(camera, renderer.domElement);

function animate() {
    controls.update();
    requestAnimationFrame(animate);
    /*cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;*/
    renderer.render(scene, camera);
}
animate();

运行起来就是一片黑暂时什么都没有
在这里插入图片描述
我们加入如下代码

// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
//直线光源
const directionallight = new THREE.DirectionalLight(0xffffff, 0.5);
directionallight.position.set(10, 10, 10);
scene.add(directionallight);
//创建球形几何体
const sphere1 = new THREE .Mesh(
new THREE.SphereGeometry(0.7, 32, 32),
new THREE.MeshStandardMaterial({
}))
scene.add(sphere1);

这里我们设置了环境光然后创建了一个球形的几何体
球体材质是普通的 MeshStandardMaterial
在这里插入图片描述
我们拖动一下会发现这个球还是有一个反光的效果
我们在他下面加一个平面

//添加平面
const plane = new THREE.Mesh(
  new THREE.PlaneGeometry(3, 3),
  new THREE.MeshStandardMaterial({})
);
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

也是最普通的材质然后 position y下移到负1的位置然后旋转rotation 负90度
在这里插入图片描述
我们转动一下平面

这里虽然我们有灯光反射的一个效果但是显然没有出现阴影的效果

那么想要有阴影首先你要有能达到阴影要求的光照
然后我们渲染器要开启这个渲染的计算

我们官网搜索 WebGLRenderer
下面就有一个 shadowMap 阴影贴图效果
这个属性默认是false 不使用的
在这里插入图片描述
我们找到渲染器所在位置将他的 shadowMap字段下的 enabled 设置为true

开启了之后我们要设置光照投射我们的阴影

我们官网进入平行直线光
在这里插入图片描述
找到属性中的 castShadow 投射阴影

他默认为了避免性能消耗是关闭的
我们直接在平行光这里给他 castShadow 设为true即可开启

然后物体我们也要设置让它能够投射我们的阴影
我们官网进入 Object3D
它的这个属性也叫 castShadow
是否投射阴影
在这里插入图片描述
我们代码中将球形几何体的 castShadow 给个true 把它打开

然后这个阴影是要映射到我们平面上的
那么这里我们平面要去接受这个阴影效果
Object3D 下的 receiveShadow 属性

平面这里我们将 receiveShadow 属性设为true
在这里插入图片描述
这培我们运行代码

阴影的效果就出来啦

所有的步骤一个不能少否则就出不来

好我们最后的代码就是这样的

import './style.css'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

//创建相机
const camera = new THREE.PerspectiveCamera(
    45, //视角 视角越大  能看到的范围就越大
    window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好
    0.1,
    1000
);
const scene = new THREE.Scene();

// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
//直线光源
const directionallight = new THREE.DirectionalLight(0xffffff, 0.5);
directionallight.position.set(10, 10, 10);
directionallight.castShadow = true;
scene.add(directionallight);
//创建球形几何体
const sphere1 = new THREE .Mesh(
  new THREE.SphereGeometry(0.7, 32, 32),
  new THREE.MeshStandardMaterial({})
)
sphere1.castShadow = true;
scene.add(sphere1);
//添加平面
const plane = new THREE.Mesh(
  new THREE.PlaneGeometry(3, 3),
  new THREE.MeshStandardMaterial({})
);
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add(plane);


//c创建一个canvas容器  并追加到 body上
const renderer = new THREE.WebGLRenderer(0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

//设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
camera.position.z = 5;
//设置相机默认看向哪里   三个 0  代表 默认看向原点
camera.lookAt(0, 0, 0);
//将内容渲染到元素上
renderer.render(scene, camera);
const controls = new OrbitControls(camera, renderer.domElement);

function animate() {
    controls.update();
    requestAnimationFrame(animate);
    /*cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;*/
    renderer.render(scene, camera);
}
animate();