3.js - 模板渲染 - 金属切面效果

md，狗不学，我学

源码

// @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
})

const geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16)
const material = new THREE.MeshPhysicalMaterial({
  // side: THREE.DoubleSide // 双面
  side: THREE.FrontSide // 前面
})
const torusKnot = new THREE.Mesh(geometry, material)
scence.add(torusKnot)

// 创建裁剪平面
const plane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 0)
material.clippingPlanes = [plane]
renderer.localClippingEnabled = true

const material_1 = new THREE.MeshBasicMaterial({
  side: THREE.BackSide,
  color: 0xffcccc,
  stencilWrite: true,
  stencilRef: 1,
  stencilWriteMask: 0xff,
  stencilZPass: THREE.ReplaceStencilOp
})
const torusKnot_1 = new THREE.Mesh(geometry, material_1)
scence.add(torusKnot_1)
material_1.clippingPlanes = [plane]

// 创建平面
let planeGeometry = new THREE.PlaneGeometry(40, 40, 1, 1)
let planeMaterial = new THREE.MeshPhysicalMaterial({
  color: 0xccccff,
  metalness: 0.95,
  roughness: 0.1,
  stencilWrite: true,
  stencilRef: 1,
  stencilFunc: THREE.EqualStencilFunc
})
let planeMesh = new THREE.Mesh(planeGeometry, planeMaterial)
planeMesh.rotation.x = -Math.PI / 2
scence.add(planeMesh)