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

news2024/10/5 14:30:51

看图

在这里插入图片描述

代码


// @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)
  // 更新tween
  TWEEN.update()
}
animate()
//#endregion

// --------------------------------------------------------------
// --------------------------------------------------------------

let rgbeLoader = new RGBELoader()
rgbeLoader.load('../public/assets/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', envMap => {
  envMap.mapping = THREE.EquirectangularRefractionMapping
  scence.background = envMap
  scence.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')