ThreeJS 官方案例学习（webgl_clipping_stencil）

1.效果图

2.源码

<template>
	<div>
		<div id="container"></div>
	</div>
</template>
<script>
import * as THREE from 'three';
// 导入控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 引入房间环境，创建一个室内环境
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
// 导入性能监视器
import Stats from 'three/examples/jsm/libs/stats.module.js';
// 导入gltf载入库、模型加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
// 引入模型解压器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
//GUI界面
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
import gsap from 'gsap';
export default {
	data() {
		return {
			container: null, //界面需要渲染的容器
			scene: null,	// 场景对象
			camera: null, //相机对象
			renderer: null, //渲染器对象
			controller: null,	// 相机控件对象
			stats: null,// 性能监听器
			model: null,//导入的模型
			clock: new THREE.Clock(),// 创建一个clock对象，用于跟踪时间
			params: {//gui参数
				animate: true,
				planeX: {
					constant: 0,//从原点到平面的有符号距离
					negated: false,//更改剪裁平面的行为，以便仅剪切其交叉点，而不是它们的并集。默认值为 false。
					displayHelper: false,//剪切平面helper隐藏显现
				},
				planeY: {
					constant: 0,
					negated: false,
					displayHelper: false,
				},
				planeZ: {
					constant: 0,
					negated: false,
					displayHelper: false,
				},
			},
			planeHelpers: null,// 剪切平面helpers
			planeObjects: [],//剪切平面对象
			planes: [//剪裁平面集合
				new THREE.Plane(new THREE.Vector3(- 1, 0, 0), 0),
				new THREE.Plane(new THREE.Vector3(0, - 1, 0), 0),
				new THREE.Plane(new THREE.Vector3(0, 0, - 1), 0),
			],
		};
	},
	mounted() {
		this.init()
		this.animate()  //如果引入了模型并存在动画，可在模型引入成功后加载动画
		window.addEventListener("resize", this.onWindowSize)
	},
	beforeUnmount() {
		console.log('beforeUnmount===============');
		// 组件销毁时置空
		this.container = null
		this.scene = null
		this.camera = null
		this.renderer = null
		this.controller = null
		this.stats = null
		this.object = null//物体实列对象
	},
	methods: {
		/**
		* @description 初始化
		 */
		init() {
			this.container = document.getElementById('container')
			this.startTime = Date.now();
			this.setScene()
			this.setCamera()
			this.setRenderer()
			this.setController()
			this.addHelper()
			// this.setPMREMGenerator()
			this.setLight()
			this.setMesh()
			this.addStatus()
		},
		/**
		 * @description 创建场景
		 */
		setScene() {
			// 创建场景对象Scene
			this.scene = new THREE.Scene()
			// 设置场景背景
			// this.scene.background = new THREE.Color(0xbfe3dd);
		},
		/**
		 * @description 创建相机
		*/
		setCamera() {
			// 第二参数就是 长度和宽度比 默认采用浏览器  返回以像素为单位的窗口的内部宽度和高度
			this.camera = new THREE.PerspectiveCamera(36, this.container.clientWidth / this.container.clientHeight, 1, 100)
			// 设置相机位置
			this.camera.position.set(2, 2, 2)
			// 设置摄像头宽高比例
			this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
			// 设置摄像头投影矩阵
			this.camera.updateProjectionMatrix();
			// 设置相机视线方向
			this.camera.lookAt(new THREE.Vector3(0, 0, 0))// 0, 0, 0 this.scene.position
			// 将相机加入场景
			this.scene.add(this.camera)
		},
		/**
		 * @description 创建渲染器
		 */
		setRenderer() {
			// 初始化渲染器
			this.renderer = new THREE.WebGLRenderer({
				antialias: true,// 设置抗锯齿
				logarithmicDepthBuffer: true,  // 是否使用对数深度缓存
			})
			// 设置渲染器宽高
			this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
			// 设置渲染器的像素比
			this.renderer.setPixelRatio(window.devicePixelRatio);
			// 允许在场景中使用阴影贴图
			this.renderer.shadowMap.enabled = true;
			// 定义渲染器是否考虑对象级剪切平面
			this.renderer.localClippingEnabled = true;
			// 是否需要对对象排序
			// !!!!!! 设置剖切面是取消设置
			// this.renderer.sortObjects = false;
			// 设置颜色及其透明度
			this.renderer.setClearColor(0x263238);
			// 将渲染器添加到页面
			this.container.appendChild(this.renderer.domElement);

		},
		/**
		 * @description 添加创建控制器
		 */
		setController() {
			this.controller = new OrbitControls(this.camera, this.renderer.domElement);
			// 控制缩放范围
			this.controller.minDistance = 2;
			this.controller.maxDistance = 20;
			//是否开启右键拖拽
			// this.controller.enablePan = false;
			// 阻尼（惯性）
			this.controller.enableDamping = true; //启用阻尼（惯性）
			this.controller.dampingFactor = 0.04; //阻尼惯性有多大
			// this.controller.autoRotate = true; //自动围绕目标旋转
			// 由于设置了控制器，因此只能改变控制器的target以改变相机的lookAt方向
			// this.controller.target.set(0, 1, 0); //控制器的焦点
		},
		/**
		* @description 添加创建模型
		*/
		setMesh() {
			// 创建物体

			// 创建一个圆环扭结
			const geometry = new THREE.TorusKnotGeometry(0.4, 0.15, 220, 60);
			this.object = new THREE.Group();
			this.scene.add(this.object);

			// 设置剪辑平面渲染
			const planeGeom = new THREE.PlaneGeometry(4, 4);
			// 存在三个剪切平面，需要设置三个剖切面(有问题)
			for (var i = 0; i < 3; i++) {
				const poGroup = new THREE.Group();
				const plane = this.planes[i];
				// 绘制剖切面
				const stencilGroup = this.createPlaneStencilGroup(geometry, plane, i + 1);

				// 平面被其他裁剪平面裁剪 - 剖切面
				const planeMat = new THREE.MeshStandardMaterial({
					color: 0xe91e63,
					metalness: 0.1,
					roughness: 0.75,
					clippingPlanes: this.planes.filter((p) => p !== plane),

					stencilWrite: true,
					stencilRef: 0,
					stencilFunc: THREE.NotEqualStencilFunc,
					stencilFail: THREE.ReplaceStencilOp,
					stencilZFail: THREE.ReplaceStencilOp,
					stencilZPass: THREE.ReplaceStencilOp,
				});
				const po = new THREE.Mesh(planeGeom, planeMat);
				//通过renderOrder设置渲染顺序，保证 物体_背面 和 物体_正面 先绘制，之后在绘制剖切面。如果剖切面存在多个在绘制一个之后需要清除模板缓冲区后，再绘制下一个
				//物体渲染之后直接执行 - 清除模板缓冲区
				po.onAfterRender = (renderer) => {
					renderer.clearStencil();
				};
				po.renderOrder = i + 1.2;

				this.object.add(stencilGroup);
				poGroup.add(po);
				this.planeObjects.push(po);
				this.scene.add(poGroup);
			}


			// 添加颜色

			const material = new THREE.MeshStandardMaterial({
				color: 0xffc107,
				metalness: 0.1,// 金属度（光反射的光泽程度，1 是最高）
				roughness: 0.75,// 粗糙度设置（0 光滑， 1 粗糙）
				side: THREE.DoubleSide,//渲染哪一面,双面
				// ***** Clipping setup (material): *****
				clippingPlanes: this.planes,//定义剪裁平面,需要WebGLRenderer.localClippingEnabled为true。
				clipShadows: true,//是否根据此材质上指定的剪裁平面剪切阴影
			})
			const clippedColorFront = new THREE.Mesh(geometry, material);
			clippedColorFront.castShadow = true;// 对象是否被渲染到阴影贴图中
			clippedColorFront.renderOrder = 16;
			this.object.add(clippedColorFront);


			// 创建地面
			const ground = new THREE.Mesh(
				new THREE.PlaneGeometry(9, 9, 1, 1),
				new THREE.ShadowMaterial({//阴影材质,此材质可以接收阴影，但在其他方面完全透明
					color: 0x000000,
					opacity: 0.25,
					side: THREE.DoubleSide,
				})
			);

			ground.rotation.x = -Math.PI / 2; // rotates X/Y to X/Z
			ground.position.y = -1;
			ground.receiveShadow = true;
			this.scene.add(ground);


			// ***** Clipping setup (renderer): *****
			// GUI
			const gui = new GUI()
			gui.add(this.params, "animate");

			// planeX - gui设置
			const planeX = gui.addFolder("planeX");
			planeX.add(this.params.planeX, 'displayHelper').onChange((v) => (this.planeHelpers[0].visible = v));
			planeX.add(this.params.planeX, "constant", -1, 1).step(0.01).onChange((d) => (this.planes[0].constant = d));
			planeX.add(this.params.planeX, "negated").onChange(() => {
				this.planes[0].negate();//将法向量与常量求反（乘以-1）
				this.params.planeX.constant = this.planes[0].constant;
			});
			planeX.open();//打开面板

			// planeY - gui设置
			const planeY = gui.addFolder("planeY");
			planeY.add(this.params.planeY, "displayHelper").onChange((v) => (this.planeHelpers[1].visible = v));
			planeY.add(this.params.planeY, "constant", -1, 1).onChange((d) => (this.planes[1].constant = d));
			planeY.add(this.params.planeY, "negated").onChange(() => {
				this.planes[1].negate();
				this.params.planeY.constant = this.planes[1].constant;
			});
			planeY.open();

			// planeZ - gui设置
			const planeZ = gui.addFolder("planeZ");
			planeZ.add(this.params.planeZ, "displayHelper").onChange((v) => (this.planeHelpers[2].visible = v));
			planeZ.add(this.params.planeZ, "constant", -1, 1).onChange((d) => (this.planes[2].constant = d));
			planeZ.add(this.params.planeZ, "negated").onChange(() => {
				this.planes[2].negate();
				this.params.planeZ.constant = this.planes[2].constant;
			});
			planeZ.open();

		},
		/**
		* @description 绘制剖切面（直接用即可,无需深度理解）
		*/
		createPlaneStencilGroup(geometry, plane, renderOrder) {
			// 物体_背面 和 物体_正面 都需要关闭深度检测、深度写入、颜色写入，因为他们的主要目的是使模板缓冲区中最终记录插值部分即剖切面
			const group = new THREE.Group();
			const baseMat = new THREE.MeshBasicMaterial();
			baseMat.depthWrite = false;//深度写入
			baseMat.depthTest = false;//深度检测
			baseMat.colorWrite = false;//颜色写入
			baseMat.stencilWrite = true;//是否对模板缓冲执行模板操作,如果执行写入或者与模板缓冲进行比较，这个值需要设置为true
			baseMat.stencilFunc = THREE.AlwaysStencilFunc;//模板函数。AlwaysStencilFunc - 模板比较方法

			// back faces(背面)
			const mat0 = baseMat.clone();
			mat0.side = THREE.BackSide;
			mat0.clippingPlanes = [plane];
			//模板操作,当提供的模板函数通过的时候，材质会在模板缓冲像素上执行怎样的模板操作。
			//IncrementWrapStencilOp - 将当前模板值加1，如果这个值超过了255则会设置为0
			mat0.stencilFail = THREE.IncrementWrapStencilOp;//当比较函数没有通过的时候要执行的模板操作
			mat0.stencilZFail = THREE.IncrementWrapStencilOp;//当比较函数通过了但是深度检测没有通过的时候要执行的模板操作
			mat0.stencilZPass = THREE.IncrementWrapStencilOp;//当比较函数和深度检测都通过时要执行的模板操作

			const mesh0 = new THREE.Mesh(geometry, mat0);
			mesh0.renderOrder = renderOrder;//渲染顺序是由低到高来排序的，默认值为0
			group.add(mesh0);

			// front faces(正面)
			const mat1 = baseMat.clone();
			mat1.side = THREE.FrontSide;
			mat1.clippingPlanes = [plane];
			// DecrementWrapStencilOp - 将当前模板值减1，如果这个值低于0则会设置为255
			mat1.stencilFail = THREE.DecrementWrapStencilOp;
			mat1.stencilZFail = THREE.DecrementWrapStencilOp;
			mat1.stencilZPass = THREE.DecrementWrapStencilOp;

			const mesh1 = new THREE.Mesh(geometry, mat1);
			mesh1.renderOrder = renderOrder;//渲染顺序是由低到高来排序的，默认值为0

			group.add(mesh1);

			return group;
		},

		/**
		 * @description 创建辅助坐标轴
		 */
		addHelper() {
			// 模拟相机视锥体的辅助对象
			let helper = new THREE.CameraHelper(this.camera);
			// this.scene.add(helper);
			//创建辅助坐标轴、轴辅助 （每一个轴的长度）
			let axisHelper = new THREE.AxesHelper(150);  // 红线是X轴，绿线是Y轴，蓝线是Z轴
			// this.scene.add(axisHelper)
			// 坐标格辅助对象
			let gridHelper = new THREE.GridHelper(100, 30, 0x2C2C2C, 0x888888);
			// this.scene.add(gridHelper);

			this.planeHelpers = this.planes.map(p => new THREE.PlaneHelper(p, 2, 0xffffff))
			this.planeHelpers.map(ph => {
				ph.visible = false
				this.scene.add(ph)
			})
		},
		/**
		 * @description 给场景添加环境光效果
		 */
		setPMREMGenerator() {
			// 预过滤的Mipmapped辐射环境贴图
			const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
			this.scene.environment = pmremGenerator.fromScene(new RoomEnvironment(this.renderer), 0.04).texture;
		},
		/**
		 * @description 设置光源
		 */
		setLight() {
			// 环境光
			const ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
			this.scene.add(ambientLight);
			// 聚光灯
			const spotLight = new THREE.SpotLight(0xffffff, 60);
			spotLight.angle = Math.PI / 5;
			spotLight.penumbra = 0.2;
			spotLight.position.set(2, 3, 3);
			spotLight.castShadow = true;
			spotLight.shadow.camera.near = 3;
			spotLight.shadow.camera.far = 10;
			spotLight.shadow.mapSize.width = 1024;
			spotLight.shadow.mapSize.height = 1024;
			// this.scene.add(spotLight);

			// 平行光
			const dirLight = new THREE.DirectionalLight(0xffffff, 3);
			dirLight.position.set(5, 10, 7.5);
			dirLight.castShadow = true;
			dirLight.shadow.camera.right = 2;
			dirLight.shadow.camera.left = - 2;
			dirLight.shadow.camera.top = 2;
			dirLight.shadow.camera.bottom = - 2;

			dirLight.shadow.mapSize.width = 1024;
			dirLight.shadow.mapSize.height = 1024;
			this.scene.add(dirLight);
		},
		/**
		 * @description 创建性能监听器
		*/
		addStatus() {
			// 创建一个性能监听器
			this.stats = new Stats();
			// 将性能监听器添加到容器中
			this.container.appendChild(this.stats.dom);
		},
		/**
		 * @description 监听屏幕的大小改变，修改渲染器的宽高，相机的比例
		*/
		// 窗口变化
		onWindowSize() {
			// 更新摄像头
			this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
			// 更新摄像机的投影矩阵
			this.camera.updateProjectionMatrix();
			//更新渲染器
			this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
			// 设置渲染器的像素比
			this.renderer.setPixelRatio(window.devicePixelRatio)
		},
		/**
		* @description 动画执行函数
		*/
		animate() {
			const delta = this.clock.getDelta();
			if (this.params.animate) {
				this.object.rotation.x += delta * 0.5;
				this.object.rotation.y += delta * 0.2;
			}
			for (let i = 0; i < this.planeObjects.length; i++) {
				const plane = this.planes[i];
				const po = this.planeObjects[i];
				plane.coplanarPoint(po.position);
				po.lookAt(
					po.position.x - plane.normal.x,
					po.position.y - plane.normal.y,
					po.position.z - plane.normal.z
				);

			}
			// 引擎自动更新渲染器
			requestAnimationFrame(this.animate);
			//update()函数内会执行camera.lookAt(x, y, z)
			this.controller.update();
			// 更新性能监听器
			this.stats.update();
			// 重新渲染场景
			this.renderer.render(this.scene, this.camera);
		},
	},
};
</script>
<style>
#container {
	position: absolute;
	width: 100%;
	height: 100%;
}
</style>