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'// 导入exrloader
import { EXRLoader } from 'three/addons/loaders/EXRLoader.js'// 导入tif
import { LogLuvLoader } from 'three/addons/loaders/LogLuvLoader.js'// 导入rgbmloader
import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.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// --------------------------------------------------------------
// --------------------------------------------------------------// 平面-1
const planeGeometry = new THREE.PlaneGeometry(2, 2)
const planeMaterial = new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('../public/assets/texture/sprite0.png'),side: THREE.DoubleSide,transparent: true
})
const plane = new THREE.Mesh(planeGeometry, planeMaterial)
// 渲染顺序，小的先渲染
plane.renderOrder = 0
scence.add(plane)// 平面-2
const planeGeometry_1 = new THREE.PlaneGeometry(2, 2)
const planeMaterial_1 = new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('../public/assets/texture/lensflare0_alpha.png'),side: THREE.DoubleSide,transparent: true
})
const plane_1 = new THREE.Mesh(planeGeometry_1, planeMaterial_1)
plane_1.position.z = 2
plane_1.renderOrder = 1
scence.add(plane_1)/*
depthTest：布尔值，是否开启深度测试true：WebGL渲染器会检查每个像素的深度值，以确定它是否应该被绘制，即：它是否比当前深度缓冲区中存储的像素更接近相机。false：深度测试被忽略，所有物体都将按照它们在场景中的顺序绘制，而不管它们的实际深度如何，这通常用于创建特定的视觉效果，比如，粒子系统、某些类型的后处理效果。
*/
plane.material.depthTest = true/*
depthWrite：布尔值，绘制当前材质时，控制当前材质，是否将深度信息，写入深度缓冲区true：渲染的物体（可以理解为，每个物体都有一个深度信息，只是你看不见而已），将更新深度缓冲区中的相应像素，以反映其深度false：渲染的物体将不会更新深度缓冲区，可以用于创建叠加效果，或确保某些物体（如：玻璃或水）不会遮挡其后的物体，即使它们在几何上应该这样做。
*/
plane.material.depthWrite = true/*
depthFunc：函数，用于定义深度测试的具体行为（就是设置深度模式）`THREE.LessEqualDepth`：默认值，只有当，当前像素的深度值，小于或等于，深度缓冲区中的值时，该像素才会被绘制。这是最常见的设置，用于确保离相机较近的物体遮挡离相机较远的物体。`THREE.NeverDepth`：从不通过深度测试`THREE.AlwaysDepth`：总是通过深度测试`THREE.GreaterDepth`：仅当深度值大于缓冲区中的值时，通过测试
*/
plane.material.depthFunc = THREE.LessEqualDepthplane_1.material.depthTest = true
plane_1.material.depthWrite = true
plane_1.material.depthFunc = THREE.LessEqualDepthconst gui = new GUI()let gui_0 = gui.addFolder('plane')
gui_0.add(plane.material, 'depthTest').name('深度测试').onChange(() => {plane.material.needsUpdate = true
})gui_0.add(plane.material, 'depthWrite').name('深度写入').onChange(() => {plane.material.needsUpdate = true
})gui_0.add(plane.material, 'depthFunc', {'THREE.LessEqualDepth': THREE.LessEqualDepth, // 默认值'THREE.NeverDepth': THREE.NeverDepth,'THREE.AlwaysDepth': THREE.AlwaysDepth,'THREE.GreaterDepth': THREE.GreaterDepth, // 仅当深度值大于缓冲区中的值时，通过测试 
})let gui_1 = gui.addFolder('plane_1')
gui_1.add(plane_1.material, 'depthTest').name('深度测试').onChange(() => {plane_1.material.needsUpdate = true
})gui_1.add(plane_1.material, 'depthWrite').name('深度写入').onChange(() => {plane_1.material.needsUpdate = true
})gui_1.add(plane_1.material, 'depthFunc', {'THREE.LessEqualDepth': THREE.LessEqualDepth, // 默认值'THREE.NeverDepth': THREE.NeverDepth,'THREE.AlwaysDepth': THREE.AlwaysDepth,'THREE.GreaterDepth': THREE.GreaterDepth, // 仅当深度值大于缓冲区中的值时，通过测试 
})