WEB3D技术three.js阴影属性

上文 WEB 3D技术 three.js 光照与阴影 我们说了阴影 那么 我们继续将阴影的属性

目前 我们的代码

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();

目前阴影效果是这样的 我们可以设置它的一个模糊度

我们官网搜索 LightShadow 下面找到 radius 模糊度的一个属性 这里 我们可以

光照对象.shadow.radius = 20;

设置 20 的一个模糊度 运行代码 然后看我们的模糊度 明显就有一点模糊的效果了 然后 我们 官网 LightShadow 下还有一个可以控制阴影贴图的大小 这上面说的是宽度和高度 我们通过 directionallight 光对象 调用代码如下

directionallight.shadow.mapSize.set(20,20);

这里 我们设置 mapSize 宽 高 20 明显小的就已经看不到了 这个先注释掉了 然后就是 阴影相机属性 从图中看 我们光应该是从下图箭头指向处打下来的 我们这里 directionallight 光照属性下可以这样写

directionallight.shadow.camera.near = 0.5; directionallight.shadow.camera.far = 500; directionallight.shadow.camera.top = 5; directionallight.shadow.camera.bottom = -5; directionallight.shadow.camera.left = -5; directionallight.shadow.camera.right = 5;

near 远端相机效果 0 到 1 far 近端 数值类型 top 上 bottom 下 left 左 right 右

例如 我们这里 上下左右 全0 运行代码 如下 大家可以自己调看看效果 如果你现在逻辑事件中 修改 光对象.shadow.camera 内的属性 需要调用

光对象.shadow.camera.updateProjectionMatrix();

例如 directionallight.shadow.camera.updateProjectionMatrix(); 去举证一下 否则 UI是不会发生变化的