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

学习threejs,网格深度材质MeshDepthMaterial

👨‍⚕️ 主页: 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

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️网格深度材质MeshDepthMate…...

算法时间、空间复杂度(二)

目录 大O渐进表示法 一、时间复杂度量级的判断 定义&#xff1a; 例一&#xff1a;执行2*N&#xff0b;1次 例二&#xff1a;执行MN次 例三&#xff1a;执行已知次数 例四:存在最好情况和最坏情况 顺序查找 冒泡排序 二分查找 例五&#xff1a;阶乘递归 ​编辑 例…...

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

如果有遗漏,评论区告诉我进行补充 面试官: Redis都有哪些使用场景? 我回答: Redis 是一个开源的、基于键值对的数据结构存储系统&#xff0c;&#xff0c;它支持多种数据类型&#xff0c;包括字符串、散列、列表、集合和有序集合。它可以用作数据库、缓存和消息中间件。由于…...

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

【python打包分发工具】setuptools详解-CSDN博客...

自定义拦截器处理token

目录 1、WebConfig 配置类 2、TSUserContext 把用户信息放到context中 3、自定义拦截器 4、在controller中可以使用 5、参考链接 1、WebConfig 配置类 @Configuration public class WebConfig implements WebMvcConfigurer {@Autowiredprivate AccessControlInterceptor …...

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

scrapy数据建模与请求 数据建模1.1 为什么建模1.2 如何建模1.3如何使用模板类1.4 开发流程总结 目标&#xff1a; 1.应用在scrapy项目中进行建模 2.应用构造Request对象&#xff0c;并发送请求 3.应用利用meta参数在不同的解析函数中传递数据 数据建模 | 通常在做项目的过程中…...

学习笔记——交换——STP(生成树)基本概念

三、基本概念 1、桥ID/网桥ID (Bridege ID&#xff0c;BID) 每一台运行STP的交换机都拥有一个唯一的桥ID(BID)&#xff0c;BID(Bridge ID/桥ID)。在STP里我们使用不同的桥ID标识不同的交换机。 (2)BID(桥ID)组成 BID(桥ID)组成(8个字节)&#xff1a;由16位(2字节)的桥优先级…...

机器学习笔记-2

文章目录 一、Linear model二、How to represent this function三、Function with unknown parameter四、ReLU总结、A fancy name 一、Linear model 线性模型过于简单&#xff0c;有很大限制&#xff0c;我们需要更多复杂模式 蓝色是线性模型&#xff0c;线性模型无法去表示…...

SpringSecurity(一)——认证实现

一、初步理解 SpringSecurity的原理其实就是一个过滤器链&#xff0c;内部包含了提供各种功能的过滤器。 当前系统中SpringSecurity过滤器链中有哪些过滤器及它们的顺序。 核心过滤器&#xff1a; &#xff08;认证&#xff09;UsernamePasswordAuthenticationFilter:负责处理…...

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

vmware 按照了Linux之后 无法上网&#xff0c;搞定后&#xff0c;记录一些信息。 window有两个虚拟网卡 VMnet1 对应的是 Host-Only&#xff08;仅主机模式&#xff09; VMnet8 对应的是 NAT&#xff08;网络地址转换模式&#xff09; 在NAT模式中&#xff0c;需要设置NAT和D…...

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

几个问题: pca可以用相关系数矩阵做吗?效果比协方差矩阵比怎么样?pca做完后变量和样本的新坐标怎么旋转获得?pca做不做scale和center对结果有影响吗?pca用因子分解和奇异值分解有啥区别?后者怎么获得变量和样本的新坐标?1. 用R全手工实现 PCA(对比 prcomp() ) 不借助包…...

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

10月12日&#xff0c;以“技术引领筑生态&#xff0c;万物智联创未来”为主题的第三届OpenHarmony技术大会&#xff08;以下简称“大会”&#xff09;在上海成功举办。本次大会由OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09;项目群技术指导委员会&…...

数字化:IT部门主导还是业务部门主导?

在这个瞬息万变的数字化时代&#xff0c;企业如同在大海中航行的小船&#xff0c;面对波涛汹涌的市场竞争&#xff0c;数字化转型已成为生存的必经之路。然而&#xff0c;在这条充满挑战的航线上&#xff0c;常常会出现一个让人纠结的问题&#xff1a;数字化转型究竟应该由IT部…...

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

1&#xff0c;update 对查询到的结果进行列值更新&#xff0c;可以和older by&#xff0c;where&#xff0c;limit合并使用&#xff0c;为了方便讲解&#xff0c;将会以题目练习的方式进行说明&#xff1a; 1&#xff0c;将孙悟空同学的数学成绩变更为 80 分 本道题和where联…...

条款3: 理解decltype

目录 一、decltype + 变量 二、decltype + 表达式 三、decltype 使用场景 一、decltype + 变量 🥭 所有的信息都会保留,数组和函数也不会退化 const int &&carref = std::move(ca); decltype(carref) bb; // bb推导为const int &&,不会被忽略掉co…...

TCP:过多的TIME_WAIT

过多的TIME_WAIT 线上问题紧急处理方式tcp_tw_reuse启用主要特点&#xff1a;源码 线上问题 线上机器出现了几万个TIME_WAIT&#xff0c;怎么办&#xff1f; 紧急处理方式 tcp_tw_reuse 启用 默认情况下tcp_tw_reuse是关闭状态&#xff0c;使用sysctl -w net.ipv4.tcp_tw_…...

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

在网上找到的分子量计算类&#xff0c;做了少量修改,有原子量、分子量、氧化物系数的计算。 import re wt_dict{ #该原子量数据从CRC手册第95版提取。"H": 1.008,"He": 4.002602,"Li": 6.94,"Be": 9.0121831,"B": 10.…...

torch.utils.data.DataLoader参数介绍

torch.utils.data.DataLoader 是 PyTorch 用于加载数据的重要工具,特别是在深度学习模型训练中。它可以高效地处理大规模数据集,并支持多线程数据加载。以下是 DataLoader 的关键参数及其功能: 主要参数 dataset: 要加载的数据集,可以是 PyTorch 自带的 torch.utils.data.…...

echarts 入门

工作中第一次碰到echarts&#xff0c;当时有大哥。二进宫没办法&#xff0c;只能搞定它。 感觉生活就是这样&#xff0c;不能解决的问题总是会反复出现。通过看视频、查资料&#xff0c;完成了工作要求。写一篇Hello World&#xff0c;进行备查。 基本使用 快速上手 <!DO…...

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

这里是借助三方UI框架实现了&#xff0c;感兴趣的小伙伴可以看一下。 深色模式&#xff1a;​ 浅色模式&#xff1a; ​这里主要使用了以下三个包&#xff1a; MahApps.Metro&#xff1a;UI库&#xff0c;提供菜单导航和其它控件​​​​​​​ 实现步骤&#xff1a;1、使用B…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

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

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...