当前位置：首页 > news >正文

学习threejs，网格深度材质MeshDepthMaterial

news 2025/7/8 4:42:48

👨‍⚕️ 主页： 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 renderervar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true, alpha: true})renderer.setSize(window.innerWidth, window.innerHeight)renderer.setClearColor(0x000000)// renderer.shadowMap.enabled = truedocument.body.appendChild(renderer.domElement)}var scenevar initScene = () => {scene = new THREE.Scene()// scene.background = new THREE.Color(0x050505)}var cameravar 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 statsvar 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.PIcube.rotation.y = Math.random() * Math.PIcube.rotation.z = Math.random() * Math.PIcube.castShadow = truecube.updateMatrix()scene.add(cube)}}var controlsvar initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping = truecontrols.minDistance = 50controls.maxDistance = 200}var render = () => {renderer.render(scene, camera)}//初始化dat.GUI简化试验流程var guifunction initGui() {//声明一个保存需求修改的相关数据的对象controls = {}var gui = new dat.GUI()}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.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>

效果如下：
在这里插入图片描述

学习threejs，网格深度材质MeshDepthMaterial

文章目录

一、🍀前言

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

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

1. ☘️实现思路

2. ☘️代码样例

相关文章：

学习threejs，网格深度材质MeshDepthMaterial

算法时间、空间复杂度（二）

高级java每日一道面试题-2024年10月11日-数据库篇[Redis篇]-Redis都有哪些使用场景?

0047__【python打包分发工具】setuptools详解

自定义拦截器处理token

Scrapy | 使用Scrapy进行数据建模和请求

学习笔记——交换——STP（生成树）基本概念

机器学习笔记-2

SpringSecurity（一）——认证实现

VMWare NAT 模式下虚拟机上不了网原因排查

R语言手工实现主成分分析 PCA | 奇异值分解(svd) 与PCA | PCA的疑问和解答

第三届OpenHarmony技术大会在上海成功举办

数字化：IT部门主导还是业务部门主导？

MySQL表的基本查询下/分组聚合统计

条款3：理解decltype

TCP：过多的TIME_WAIT

化学元素分子量、氧化物系数计算python类

torch.utils.data.DataLoader参数介绍

echarts 入门

WPF实现类似网易云音乐的菜单切换

UE5 学习系列（二）用户操作界面及介绍

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

conda相比python好处

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

手游刚开服就被攻击怎么办？如何防御DDoS？

linux之kylin系统nginx的安装

day52 ResNet18 CBAM

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

vue3 字体颜色设置的多种方式

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）