推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 环境贴图2 接着上节课的环境贴图给大家讲解。 环境贴图作用测试 实际生活中光源照射到一个物体上，这个物体反射出去的光线也会影响其他的物体，环境贴图就是用一种简单方式，近似模拟一个物体周边环境对物体表面的影响。 测试：对于PBR材质，如果threejs三维场景不添加任何光源，物体就是完全黑色的，你可以不添加任何光源，尝试只使用环境贴图，你会发现物体表面的颜色也能看到，这说明环境贴图其实相当于提供了物体周围环境发射或反射的光线。 测试：更换不同明暗的环境贴图，你会发现场景中模型的明暗也有变化。 场景环境属性.environment 网格模型可以通过材质的.envMap属性设置环境贴图，如果一个gltf模型中所有的Mesh都要设置环境贴图就需要递归遍历gltf模型，给里面每个Mesh的材质设置.envMap。 loader.load("../工厂.glb", function (gltf) { // 递归遍历批量设置环境贴图 gltf.scene.traverse(fun

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 环境贴图.envMap(金属效果) 环境贴图对PBR材质渲染效果影响还是比较大，一般渲染PBR材质的模型，最好设置一个合适的环境贴图。 立方体纹理加载器CubeTextureLoader * TextureLoader返回Texture * CubeTextureLoader返回CubeTexture 通过前面学习大家知道，通过纹理贴图加载器TextureLoader的.load()方法加载一张图片可以返回一个纹理对象Texture。 立方体纹理加载器CubeTextureLoader的.load()方法是加载6张图片，返回一个立方体纹理对象CubeTexture。 立方体纹理对象CubeTexture的父类是纹理对象Texture。 CubeTextureLoader加载环境贴图 所谓环境贴图，就是一个模型周围的环境的图像，比如一间房子，房子的上下左右前后分别拍摄一张照片，就是3D空间中6个角度方向的照片。 // 加载环境贴图 // 加载周围环境6个方向贴图 // 上下左右

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 PBR材质金属度和粗糙度 本节课给大家介绍PBR材质MeshStandardMaterial金属度metalness和粗糙度roughness,再加上下节课讲解的环境贴图.envMap,给大家呈现一个金属渲染效果。 金属度metalness 金属度属性.metalness表示材质像金属的程度, 非金属材料,如木材或石材,使用0.0,金属使用1.0。 threejs的PBR材质，.metalness默认是0.5,0.0到1.0之间的值可用于生锈的金属外观 new THREE.MeshStandardMaterial({ metalness: 1.0,//金属度属性 }) mesh.material.metalness = 1.0;//金属度 粗糙度roughness 生活中不同物体表面的粗糙程度不同，比如地面比较粗糙，比如镜子表面就非常非常光滑。 粗糙度roughness表示模型表面的光滑或者说粗糙程度，越光滑镜面反射能力越强，越粗糙，表面镜面反射能力越弱，更多地表现为

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 PBR材质简介 本节课没有具体的代码，就是给大家科普一下PBR材质，所谓PBR就是，基于物理的渲染(physically-based rendering)。 Three.js提供了两个PBR材质相关的APIMeshStandardMaterial和MeshPhysicalMaterial,MeshPhysicalMaterial是MeshStandardMaterial扩展的子类，提供了更多功能属性。 光照模型 如果你有初高中最基本的物理光学知识，应该有折射、镜面反射、漫反射等基本光学概念，对于实际生活中的光学问题，Three.js会提供一些的光照模型来模拟物体表面的光照，光照模型就一种模拟光照的计算方法。MeshPhysicalMaterial和MeshLambertMaterial一样都是渲染网格模型的材质，但是他们用的光照模型不同，具体点说就是材质模拟Mesh反射光照的代码算法不同，算法不同，自然模拟光照的真实程度也不同。 如果你想深入研究光照模型，可以学习下原生WebGL或WebG

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 gui调试界面2-颜色命名等 本节课结合threejs，给大家介绍gui.js库更多的方法。 .name()方法 .add()创建的交互界面，会默认显示所改变属性的名字，为了通过交互界面更好理解你改变的某个对象属性，你可以通过.name()方法改变gui生成交互界面显示的内容。 const gui = new GUI();//创建GUI对象 gui.add(ambient, 'intensity', 0, 2.0).name('环境光强度'); gui.add(directionalLight, 'intensity', 0, 2.0).name('平行光强度'); 步长.step()方法 步长.step()方法可以设置交互界面每次改变属性值间隔是多少。 gui.add(ambient, 'intensity',

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 gui.js库(可视化改变三维场景) gui.js库(可视化改变三维场景) dat.gui.js说白了就是一个前端js库，对HTML、CSS和JavaScript进行了封装，学习开发的时候，借助dat.gui.js可以快速创建控制三维场景的UI交互界面，你打开课件中案例源码体验一下就能感受到。 课程学习dat.gui.js也不仅仅是为了学习dat.gui.js，也是建立一种思想，就是threejs三维空间的很多参数，不是心算出来的，往往需要可视化的方式调试出来。 引入dat.gui.js gihtub地址：https://github.com/dataarts/dat.gui npm地址：https://www.npmjs.com/package/dat.gui 你可以通过npm或github方式获得dat.gui.js库，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 阵列立方体和相机适配体验 本节课通过阵列一片立方体，进一步体验下透视投影相机的投影规律。 for循环创建一列模型 const geometry = new THREE.BoxGeometry(100, 100, 100); //材质对象Material const material = new THREE.MeshLambertMaterial({ color: 0x00ffff, //设置材质颜色 transparent: true,//开启透明 opacity: 0.5,//设置透明度 }); for (let i = 0; i < 10; i++) { const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh // 沿着x轴分布 mesh.position.

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 stats查看threejs渲染帧率 three.js每执行WebGL渲染器.render()方法一次，就在canvas画布上得到一帧图像，不停地周期性执行.render()方法就可以更新canvas画布内容，一般场景越复杂往往渲染性能越低，也就是每秒钟执行.render()的次数越低。 通过stats.js库可以查看three.js当前的渲染性能，具体说就是计算three.js的渲染帧率(FPS),所谓渲染帧率(FPS)，简单说就是three.js每秒钟完成的渲染次数，一般渲染达到每秒钟60次为最佳状态。 stats.js下载链接：https://github.com/mrdoob/stats.js 引入Stats //引入性能监视器stats.js import Stats from 'three/addons/libs/stats.module.js'; Stats使用 //创建stats对象

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Canvas画布布局和全屏 threejs渲染输出的结果就是一个Cavnas画布，canvas画布也是HTML的元素之一，这意味着three.js渲染结果的布局和普通web前端习惯是一样的。 通过renderer.domElement属性可以访问threejs的渲染结果，也就是HTML的元素canvas画布。 非全屏局部布局 你可以把threejs的渲染结果renderer.domElement，插入到web页面上任何一个元素中，只要符合你项目的布局规则即可。

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 动画渲染循环 threejs可以借助HTML5的API请求动画帧window.requestAnimationFrame实现动画渲染。 请求动画帧window.requestAnimationFrame // requestAnimationFrame实现周期性循环执行 // requestAnimationFrame默认每秒钟执行60次，但不一定能做到，要看代码的性能 let i = 0; function render() { i+=1; console.log('执行次数'+i); requestAnimationFrame(render);//请求再次执行函数render } render(); threejs旋转动画 动画说白了就是一张张照片，连起来依次展示，这样就形成一个动画效果，只要帧率高，人的眼睛就感觉不到卡顿，是连续的视频效果。 const renderer = new THREE.WebGLRenderer(); renderer.setS

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 相机控件OrbitControls 平时开发调试代码，或者展示模型的时候，可以通过相机控件OrbitControls实现旋转缩放预览效果。 OrbitControls使用 你可以打开课件案例源码测试下效果。 * 旋转：拖动鼠标左键 * 缩放：滚动鼠标中键 * 平移：拖动鼠标右键 引入扩展库OrbitControls.js // 引入轨道控制器扩展库OrbitControls.js import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; 注意：如果你在原生.html文件中，使用上面引入方式import { OrbitControls } from 'three/addons/controls/OrbitControls.js';，注意通过

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 gltf模型更换.map(纹理.flipY) 下面给大家演示如何给gltf的网格模型Mesh更换颜色贴图.map。 加载颜色贴图.map 注意单独加载的纹理贴图的.encoding和webgl渲染器的.outputEncoding保持一致。 const texLoader = new THREE.TextureLoader(); const texture = texLoader.load('./黑色.png');// 加载手机mesh另一个颜色贴图 texture.encoding = THREE.sRGBEncoding; //和渲染器.outputEncoding一样值 更换gltf颜色贴图 执行mesh.material.map = texture;新的纹理对象Texture赋值给.material.map就可以更换材质贴图。 loader.load("../手机模型.glb", function (gltf) { const mesh

在线工具推荐：3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 纹理encoding和渲染器 如果没有特殊需要，一般为了正常渲染，避免颜色偏差，threejs代码中需要颜色贴图.encoding和渲染器.outputEncoding属性值保持一致。 纹理对象Texture颜色空间编码属性.encoding 纹理对象Texture颜色空间 (opens new window)编码属性.encoding有多个属性值，默认值是线性颜色空间THREE.LinearEncoding。 * THREE.LinearEncoding：线性颜色空间 * THREE.sRGBEncoding：sRGB (opens new window)颜色空间 浏览器控制台查看Texture.encoding属性值 const texture = new THREE.TextureLoader(

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 外部模型材质是否共享的问题 美术通过三维建模软件，比如Blender绘制好一个三维场景以后，一些外观一样的Mesh，可能会共享一个材质对象。 改变一个模型颜色其它模型跟着变化 由于楼房的Mesh共享了1号楼Mesh的材质，当你通过mesh1.material改变mesh1材质，本质上是改变所有楼Mesh的材质。 const mesh1 = gltf.scene.getObjectByName("1号楼"); //1. 改变1号楼Mesh材质颜色 mesh1.material.color.set(0xff0000); .name标记材质，判断两个mesh是否共享材质 通过.name标记材质，测试mesh1和mesh2是否共享了材质 const mesh1 = gltf.scene.getObjectByName("1号楼"); mesh1.material.name = '楼房材质';//通过name标记mesh1对应材质 const mesh2 = gltf.scene.getOb

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 递归遍历层级模型修改材质 加载一个外部模型，比如gltf模型，如果你想批量修改每个Mesh的材质，一个一个设置比较麻烦，可以通过递归遍历方法.traverse()批量操作更加方便。 递归遍历方法.traverse() 递归遍历gltf所有的模型节点。 // 递归遍历所有模型节点批量修改材质 gltf.scene.traverse(function(obj) { if (obj.isMesh) {//判断是否是网格模型 console.log('模型节点',obj); console.log('模型节点名字',obj.name); } }); 查看gltf默认的材质 .obj、.gltf、.fbx等不同格式的模型，threejs加载默认的材质可能不同，不过也不用刻意记忆，通过浏览器控制台log打印即可console.log(obj.material)。 threejs解析gltf模型默认材质一般是MeshStandardMaterial

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 模型命名(程序与美术协作) 开发一些web3d项目，比如一个小区、工厂的可视化，场景中会有多个模型对象，程序员加载三维模型的时候，通过什么方式才能获取到自己想要的某个模型节点是个问题。 三维软件模型命名 课程提供了一个Blender的模型例子，你可以打开查看。 其实模型节点命名可以类比前后端API接口命名，web3d前端和后端对接需要命名接口，和3D美术对接，同样需要给一些模型节点命名。 * 模型命名可以使用汉字、英文、拼音其他语言形式。 * 如果使用汉字注意，有些三维建模软件可能存在导出乱码问题。 浏览器控制台查看3D模型树结构 加载gltf模型,通过gltf.scene可以获取模型的数据，你可以通过浏览器控制打印gltf.scene，然后和你三维建模软件中的模型目录树对比，比较两者的结构是否相同。 * 模型父对象节点可以用Object3D对象表示，也可以用组对象Group表示。 * 通过.children属性可以查看一个父对象模型的的所有子对象。 * 通过.name属

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 gltf不同文件形式(.glb) .gltf格式模型文件，有不同的组织形式。 * 单独.gltf文件 * 单独.glb文件 * .gltf + .bin + 贴图文件 这些不同形式的gltf模型，加载代码其实没啥区别。 // 单独.gltf文件 loader.load("../../工厂.gltf", function (gltf) { scene.add(gltf.scene); }) Blender导出gltf不同形式 Blender三维建模软件，可以根据设置，以不同形式导出gltf模型，比如单独导出一个.gltf文件，比如单独导出一个.glb文件，比如导出形式为.gltf + .bin + 贴图多个文件 .glb文件 .glb是gltf格式的二进制形式文件，加载方式和.gltf没啥区别。 // 单独.glb文件 loader.load("../../工厂.

实际开发的时候，一方面可以通过OrbitControls旋转缩放预览3D模型，另一方面也可以辅助你选择合适的相机参数。