md,狗不学,我学
源码
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
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)
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)const controls = new OrbitControls(camera, renderer.domElement)
controls.dampingFactor = 0.05
function animate() {controls.update()requestAnimationFrame(animate)renderer.render(scence, camera)TWEEN.update()
}
animate()
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
})const geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16)
const material = new THREE.MeshPhysicalMaterial({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 = trueconst 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)