推荐：将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';，注意通过