推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 辅助调节光源阴影 光源阴影范围，也可以通过GUI界面可视化调节，这样更形象。 关于gui的介绍，参考入门部分18. gui.js库(可视化改变三维场景)(opens new window) 阴影范围可视化调节 * 根据工厂尺寸数量级预先设置.shadow.camera，然后通过GUI调试选择一个合适的值 * .shadow.camera的位置通过光源的位置调试。 * .shadow.camera参数改变后，注意执行cameraHelper.update();更新 // 阴影子菜单 const shadowFolder = gui.addFolder('平行光阴影'); const cam = directionalLight.shadow.camera; // 相机left、right等属性变化执行.updateProjectionMatrix(); // 相机变化了，执行CameraHelper的更新方法.update(); shadowFolder.add(cam,'left',

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 工厂(模拟太阳光阴影) 真实生活中物体在太阳光下往往是有影子的，在threejs你可以通过平行光阴影模拟太阳光阴影。 工厂设置平行光阴影 首先你可以先回顾一下前面讲解的11.2 平行光阴影计算，设置工厂3D场景的平行光阴影流程是一样的。 和前面设置一样，允许光源和渲染器光源投影计算。 directionalLight.castShadow = true; renderer.shadowMap.enabled = true; * .castShadow设置产生阴影的模型对象 * .receiveShadow设置接收阴影效果的模型 实际生活中所有物体都可以产生阴影，同时所有物体都可以接收其它物体的阴影，所以所有Mesh都批量设置.castShadow和.receiveShadow属性。 //递归遍历场景，允许所有Mesh产生投影、接收投影 gltf.scene.traverse(function (obj) { if (obj.isMesh) { //判断是否是网格模型

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 工厂光源(平行光模拟太阳光) 继续上节课内容讲解。 * 环境贴图(上节课) * 环境光(上节课) * 平行光模拟太阳光 平行光模拟太阳光 比如实际生活中一个三维场景中，可能会有太阳光照射，太阳距离地球足够远，可以近似认为太阳光是平行光。 工厂地面坐标为0的话，光源从斜上方照射到物体上，可以y给予一个大于0的高度值，xz设置不同的值，控制不同的光线照射方向。 在设置光源高度的时候，你可以先大概测量下三场场景的尺寸，布局具体值，知道大概数量级即可，比如几十、几百，工厂长宽方向100量级，高度方向10量级。 const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(100, 60, 50); scene.add(directionalLight); 平行光辅助对象DirectionalLightHelper 通过平行光DirectionalLig

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 工厂光源(环境贴图和环境光) 接下来两节课利用前面知识，给大家总结下，如何设置类似工厂、园区等3D场景的光照。 * 环境贴图 * 环境光 * 平行光模拟太阳光(下节课内容) 具体threejs知识点前面基本都讲解过，下面把重点放在整体思路讲解上，具体代码你可以参考课件源码。 测试工厂模型中光源 课件“演示”文件加载了一个工厂模型，你可以把代码中所有光源注释，执行代码，你无法正常看到工厂模型颜色。 环境贴图 如果你不设置任何光源和环境贴图，gltf模型默认PBR材质不会正常显示，一片漆黑。 不过你不设置任何光源，只设置环境贴图，物体表面也能看到。虽然环境贴图不是光源，但是会模拟物体周围环境的反射光。就好比你站在街上，周围房子、树木、马路也会反射光线到你身上。 通过.envMapIntensity可以调节环境贴图对模型外表面的影响程度,.envMapIntensity的值可以通过gui交互界面调节。 const textureCube = new THREE.CubeText

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 阴影.mapSize和.radius 接着上节课阴影范围讲解，本节课给大家介绍阴影渲染质量的问题 前面给大家介绍过平行光阴影对象DirectionalLightShadow的阴影相机属性.camera，本节课为大家介绍该阴影对象的阴影贴图尺寸.mapSize属性和阴影半径.radius属性。 * light.shadow.mapSize阴影贴图尺寸属性(提升边缘渲染效果) * light.shadow.radius弱化模糊阴影边缘 light.shadow.mapSize阴影贴图尺寸属性 你可以把threejs生成的光源阴影类比为前面学习过的颜色贴图.map，阴影投射到其它物体上，可以理解为阴影就像贴图一样映射到Mesh上。 // mapSize属性默认512x512 console.log('阴影默认像素',directionalLight.shadow.mapSize); 你可以尝试把.mapSize设置为比较小的值(尺寸一般2的n次方)，查看阴影渲染质量。 directi

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 相机控件MapControls 地图导航相机控件MapControls，你可实现一个类似百度地图的3D导航功能。 MapControls使用操作 你可以打开课件案例源码测试下效果。 * 平移：鼠标左键拖动 * 旋转：鼠标右键拖动 * 缩放：鼠标中键滚动 引入相机控件MapControls 引入相机控件MapControls类，旧版本是通过扩展库文件MapControls.js实现,不过新版本MapControls类和OrbitControls类一样通过 \examples\jsm\controls目录下的OrbitControls.js文件引入。 // 引入相机控件`MapControls` import { MapControls } from 'three/addons/controls/OrbitControls.js'; 注意：如果你在原生.html文件中，使用import { MapControls } from 'three/addons/controls/Or

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 OrbitControls旋转缩放限制 课程中经常会用到相机控件OrbitControls的不同功能,本节课就会大家补充新的知识点，比如控制缩放的最大最小范围，比如限制旋转的角度范围，比如禁止平移。 * 1.9. 相机控件OrbitControls(opens new window) * 6.4. OrbitControls辅助设置相机参数(opens new window) 禁止右键平移.enablePan属性 比如一个展示一个三维场景，你不希望鼠标右键拖动会产生一个平移效果。可以通过设置相机空间对象OrbitControls的.enablePan属性，查看OrbitControls源码可以看到.enablePan属性的默认值是true。 controls.enablePan = false; //禁止右键拖拽 禁止缩放或旋转 通过.enableZoom属性可以控制是否允许鼠标中键缩放场景，.enableZoom属性默认值true。 controls.enableZoom

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 旋转渲染结果(.up相机上方向) .up是相机对象的上方向属性，当你改变.up属性时候，就好比你生活中拍照时候，扭转你的相机姿态角度进行拍照，这时候你的照片也会跟着相机姿态旋转。 .up属性默认值是new THREE.Vector3(0,1,0),意思是沿着y轴朝上。 console.log('.up默认值',camera.up); 测试改变上方向.up 你可以改变相机的上方向.up属性值，然后观察canvas画布上模型渲染的效果有什么变化，还可以观察三维坐标轴new THREE.AxesHelper()的变化。 把相机对象.up属性默认值new THREE.Vector3(0,1,0)改为相反方向new THREE.Vector3(0,-1,0)，沿着y轴负方向，up改变后的渲染效果你可以看到，绿色y轴向下，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 不同方向的投影视图 本节课给大家讲解，通过UI按钮界面交互改变threejs相机的观察视角。 x轴方向观察 // 通过UI按钮改变相机观察角度 document.getElementById('x').addEventListener('click', function () { camera.position.set(500, 0, 0); //x轴方向观察 camera.lookAt(0, 0, 0); //重新计算相机视线方向 }) y轴方向观察 // 通过UI按钮改变相机观察角度 document.getElementById('y').addEventListener('click', function () { camera.position.set(0, 500, 0); //y轴方向观察 camera.lookAt(0, 0, 0); //重新计算相机视线方向 }) z轴方向观察

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 相机动画(.position和.lookAt()) 下面给大家讲解，通过相机对象Camera的.position属性和.lookAt()方法，实现一段相机动画。 相机运动动画 改变相机的位置.position，三维场景在canvas画布上呈现不同的效果，如果连续改变相机的位置.position，就可以获得一个动画效果。 课件案例源码是一个工厂模型，相机在空中俯视工厂，如果在渲染循环中不停地改变相机位置，这时候产生的视觉效果，就好比你在天上运动，看地面的效果。 // 渲染循环 function render() { camera.position.z -= 0.3;//相机直线运动动画 renderer.render(scene, camera); requestAnimationFrame(render); } render(); 相机圆周运动 在渲染循环中，改变相机位置，在XOZ平面上绕着y轴圆周运动。 // 渲染循环 let angle

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 正投影相机-Canvas尺寸变化 前面给大家讲解过(1.12、8.1两小节)，一些应用场景Cnavas画布可能不是固定尺寸，而是变化的。这时候就需要重新设置WebGL渲染器、相机等参数。 前面给大家演示的时候，相机是用的透视投影，下面主要演示下，正投影相机的参数如何随着Canvas画布尺寸的变化而变化。 * 1.12.Canvas画布尺寸变化(opens new window) * 8.1.three.js Canvas画布布局(opens new window) WebGL渲染器更新Canvas画布尺寸 // onresize 事件会在窗口被调整大小时发生 window.onresize = function () { const width = window.innerWidth; //canvas画布宽度 const height = window.innerHeight; //canvas画布高度 // 重置渲染器输出画布canvas尺寸 ren

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 查看或设置gltf几何体顶点 前面给大家介绍过几何体BufferGeometry对象，以及用来表示BufferGeometry顶点数据的属性缓冲对象BufferAttribute。 geometry.attributes.position = new THREE.BufferAttribute(); geometry.attributes.normal = new THREE.BufferAttribute(); geometry.attributes.color = new THREE.BufferAttribute(); geometry.attributes.uv = new THREE.BufferAttribute(); geometry.index = new THREE.BufferAttribute(); 下面通过加载一个外部gltf模型为例，给大家演示如何获取、修改外部模型的几何体顶点数据，也就是说获取、修改BufferAttribute对象里面的顶点数据。 获取

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Color颜色渐变插值 下面给大家介绍一个颜色对象Color颜色渐变插值方法.lerpColors()和.lerp()。 颜色对象Color颜色插值方法.lerpColors() 通过浏览器控制台测试.lerpColors()方法颜色插值的规律。 执行.lerpColors(Color1,Color2, percent)通过一个百分比参数percent，可以控制Color1和Color2两种颜色混合的百分比，Color1对应1-percent，Color2对应percent。 const c1 = new THREE.Color(0xff0000); //红色 const c2 = new THREE.Color(0x0000ff); //蓝色 const c = new THREE.Color(); 颜色插值结果，和c1一样rgb(1,0,0),100% c1 + 0%

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 一段曲线颜色渐变 可以通过几何体顶点颜色.attributes.color数据，实现一段曲线颜色渐变效果。 样条曲线几何体 首先提供一个样条曲线生成的几何体。 const geometry = new THREE.BufferGeometry(); //创建一个几何体对象 // 三维样条曲线 const curve = new THREE.CatmullRomCurve3([ new THREE.Vector3(-50, 20, 90), new THREE.Vector3(-10, 40, 40), new THREE.Vector3(0, 0, 0), new THREE.Vector3(60, -60, 0), new THREE.Vector3(