webgl_clipping_stencil

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