学习threejs，网格深度材质MeshDepthMaterial

news2024/10/10 13:11:29

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️网格深度材质MeshDepthMaterial简介
二、🍀实现网格深度材质MeshDepthMaterial效果
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用网格深度材质MeshDepthMaterial，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️网格深度材质MeshDepthMaterial简介

THREE.MeshDepthMaterial 是 Three.js 中的一种特殊材质类型，主要用于绘制场景中物体的深度信息。这种材质仅渲染网格对象的深度值，而不渲染颜色或其他表面属性。THREE.MeshDepthMaterial 通常用于深度遮挡（occlusion）计算、阴影投射（shadow casting）以及其他需要深度信息的场景。

构造函数
new THREE.MeshDepthMaterial(parameters) 接受一个包含材质属性的对象参数 parameters。

常用属性
THREE.MeshDepthMaterial 继承自 THREE.Material，并具有以下一些特定的属性：
color：基础颜色，默认为白色（0xffffff）。虽然这个属性存在，但是在 THREE.MeshDepthMaterial 中不起作用。
opacity：材质的全局透明度，默认为 1（不透明）。虽然这个属性存在，但是在 THREE.MeshDepthMaterial 中不起作用。
transparent：是否开启透明模式，默认为 false。虽然这个属性存在，但是在 THREE.MeshDepthMaterial 中不起作用。
side：指定材质在哪一面渲染，可以是 THREE.FrontSide（正面）、THREE.BackSide（背面）或 THREE.DoubleSide（双面）。
wireframe：是否启用线框模式，默认为 false。
visible：是否渲染该材质，默认为 true。
depthTest：是否进行深度测试，默认为 true。
depthWrite：是否写入深度缓冲区，默认为 true。
blending：混合模式，默认为 THREE.NoBlending。由于 THREE.MeshDepthMaterial 不渲染颜色，所以混合模式在这个材质中不起作用。
vertexColors：是否启用顶点颜色，默认为 THREE.NoColors。虽然这个属性存在，但是在 THREE.MeshDepthMaterial 中不起作用。
flatShading：是否使用平滑着色，默认为 false。如果设置为 true，则每个面片都将使用平均法线。此属性可能影响深度值的计算。

二、🍀实现网格深度材质MeshDepthMaterial效果

1. ☘️实现思路

1、初始化renderer渲染器
2、初始化Scene三维场景
3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt
4、加载几何模型：创建THREE.MeshDepthMaterial网格深度材质，循环创建CubeGeometry立方体并使用THREE.MeshDepthMaterial网格深度材质，创建THREE.AxisHelper坐标辅助工具，Scene场景加入以上几何体和工具。
6、加入controls控制、gui，加入stats监控器，监控帧数信息

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn18(网格深度材质MeshDepthMaterial)</title>
    <script src="https://johnson2heng.github.io/three.js-demo/lib/three-v60.js"></script>
    <!--<script src="lib/threejs/127/three.js-master/build/three.js"></script>-->
    <script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style>
    body {
        margin: 0;
    }

    canvas {
        width: 100%;
        height: 100%;
        display: block;
    }
</style>
<body onload="draw()">
</body>
<script>
  var renderer
  var initRender = () => {
    renderer = new THREE.WebGLRenderer({antialias: true, alpha: true})
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.setClearColor(0x000000)
    // renderer.shadowMap.enabled = true
    document.body.appendChild(renderer.domElement)
  }
  var scene
  var initScene = () => {
    scene = new THREE.Scene()
    // scene.background = new THREE.Color(0x050505)
  }
  var camera
  var initCamera = () => {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(0, 40, 100)
    camera.lookAt(new THREE.Vector3(0, 0, 0))
  }
  var stats
  var initStats = () => {
    stats = new Stats()
    document.body.appendChild(stats.dom)
  }
  var initModel = () => {
    var helper = new THREE.AxisHelper(10)
    scene.add(helper)

    var cubeGeometry = new THREE.CubeGeometry(25, 25, 25)
    var cubeMaterial = new THREE.MeshDepthMaterial()
    for (var i = 0; i < 3000; i++) {
      var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
      // cube.position.set(800 * ( 2.0 * Math.random() - 1.0 ), 800 * ( 2.0 * Math.random() - 1.0 ), 800 * ( 2.0 * Math.random() - 1.0 ))
      cube.position.x = 800 * (2.0 * Math.random() - 1.0)
      cube.position.y = 800 * (2.0 * Math.random() - 1.0)
      cube.position.z = 800 * (2.0 * Math.random() - 1.0)
      cube.rotation.x = Math.random() * Math.PI
      cube.rotation.y = Math.random() * Math.PI
      cube.rotation.z = Math.random() * Math.PI
      cube.castShadow = true
      cube.updateMatrix()
      scene.add(cube)
    }
  }
  var controls
  var initControls = () => {
    controls = new THREE.OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true
    controls.minDistance = 50
    controls.maxDistance = 200
  }
  var render = () => {
    renderer.render(scene, camera)
  }
  //初始化dat.GUI简化试验流程
  var gui

  function initGui() {
    //声明一个保存需求修改的相关数据的对象
    controls = {}
    var gui = new dat.GUI()
  }

  var onWindowResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    render()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }
  var animate = () => {
    render()
    stats.update()
    // if (camera.near = 0.1) {
    //   camera.near += 100
    //   camera.updateProjectionMatrix();
    // }
    // controls.update()
  }
  var draw = () => {
    initRender()
    initScene()
    initCamera()
    initModel()
    initGui()
    initStats()
    // initControls()

    animate()

    window.onresize = onWindowResize
  }
</script>
</html>