当前位置：首页 > news >正文

3.js - 裁剪平面（clipIntersection：交集、并集）

news 2025/6/20 21:29:01

看图

在这里插入图片描述

代码


// @ts-nocheck// 引入three.js
import * as THREE from 'three'// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'// 导入tween
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'// 导入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'// 导入gltf加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'// 导入draco解码器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'//#region
const scence = new THREE.Scene()const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(2, 2, 5) // 设置相机位置
camera.lookAt(0, 0, 0)const renderer = new THREE.WebGLRenderer({antialias: true // 开启抗锯齿
})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
//#endregion//#region
// 添加世界坐标辅助器，红色-X轴； 绿色-Y轴； 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
// controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05// 每一帧根据控制器更新画面
function animate() {// 如果，需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入`controls.update()`controls.update()// `requestAnimationFrame`：在屏幕渲染下一帧画面时，触发回调函数来执行画面的渲染requestAnimationFrame(animate)// 渲染renderer.render(scence, camera)// 更新tweenTWEEN.update()
}
animate()
//#endregion// --------------------------------------------------------------
// --------------------------------------------------------------let rgbeLoader = new RGBELoader()
rgbeLoader.load('../public/assets/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', envMap => {envMap.mapping = THREE.EquirectangularRefractionMappingscence.background = envMapscence.environment = envMap
})/*new THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments)创建环形结的几何体，radius：环形（Torus）的半径，即：环形中心到环形表面的距离；这个值越大，环形就越大。tube(管半径): 环形上的管道的半径，这个值决定了环形表面的厚度。radialSegments(径向分段数)：环形沿着其半径的分段数。这个值越大，环形的边缘就越平滑。tubularSegments(管分段数)：管道沿着其长度的分段数。这个值也影响表面的平滑度，但它是沿着环形的周长方向。
*/
const geometry = new THREE.TorusKnotGeometry(5, 1, 100, 16)
const material = new THREE.MeshPhysicalMaterial({side: THREE.DoubleSide
})
const torusKnot = new THREE.Mesh(geometry, material)
scence.add(torusKnot)/*const plane = new THREE.Plane(normal, constant)normal：THREE.Vector3对象，表示平面的法线向量constant：一个数值，代表平面方程中的常数项在三维空间中，平面可以由方程：Ax + By + Cz + D = 0表示，其中(A, B, C)是平面的法线向量的坐标，D是常数项；比如：当法线向量为(1, 0, 0)时，平面方程则是：x + D = 0；
*/
const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)
// 在这里，constant的值是0，因此平面方程是x = 0，即：平面是通过原点并垂直于X轴的YZ平面
const plane_2 = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0)// ---------- 方案1（局部的） ----------
// material.clippingPlanes：一个数组(元素是THREE.Plane平面对象)，这些平面决定了哪些部分的网格将被渲染，哪些部分将被裁剪掉
// material.clippingPlanes = [plane]
material.clippingPlanes = [plane, plane_2]
// false：交集（默认值）；true：并集
material.clipIntersection = false
renderer.localClippingEnabled = true // 设置渲染器的`localClippingEnabled`为true，裁剪才有效果
material.clipShadows = true // 设置裁剪阴影// ---------- 方案2（全局的，就没有交集、并集这一说了） ----------
// renderer.clippingPlanes = [plane, plane2]// 创建gui
const gui = new GUI()
const folder = gui.addFolder('裁剪平面')
// 添加一个滑块
gui.add(plane, 'constant', -10, 10).name('位置')
// 设置 plane 的normal属性
folder.add(plane.normal, 'x', -1, 1).name('法向量x')
folder.add(plane.normal, 'y', -1, 1).name('法向量y')
folder.add(plane.normal, 'z', -1, 1).name('法向量z')