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)
  // 更新tween
  TWEEN.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.LessEqualDepth

plane_1.material.depthTest = true
plane_1.material.depthWrite = true
plane_1.material.depthFunc = THREE.LessEqualDepth

const 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, // 仅当深度值大于缓冲区中的值时，通过测试 
})