dede分类信息网站,政法网站内容建设,网络服务合同范本大全,中国造价工程建设管理协会网站#x1f468;⚕️ 主页#xff1a; gis分享者 #x1f468;⚕️ 感谢各位大佬 点赞#x1f44d; 收藏⭐ 留言#x1f4dd; 加关注✅! #x1f468;⚕️ 收录于专栏#xff1a;threejs gis工程师 文章目录 一、#x1f340;前言1.1 ☘️网格深度材质MeshDepthMate…⚕️ 主页 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.lookAt4、加载几何模型创建THREE.MeshDepthMaterial网格深度材质循环创建CubeGeometry立方体并使用THREE.MeshDepthMaterial网格深度材质创建THREE.AxisHelper坐标辅助工具Scene场景加入以上几何体和工具。6、加入controls控制、gui加入stats监控器监控帧数信息
2. ☘️代码样例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlelearn18(网格深度材质MeshDepthMaterial)/titlescript srchttps://johnson2heng.github.io/three.js-demo/lib/three-v60.js/script!--script srclib/threejs/127/three.js-master/build/three.js/script--script srclib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js/scriptscript srclib/threejs/127/three.js-master/examples/js/libs/stats.min.js/scriptscript srclib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js/script
/head
stylebody {margin: 0;}canvas {width: 100%;height: 100%;display: block;}
/style
body onloaddraw()
/body
scriptvar 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效果如下
