推荐：将NSDT场景编辑器加到你的3D工具链 工具集：NSDT简石数字孪生 几何体顶点位置数据和点模型 本章节主要目的是给大家讲解几何体geometry的顶点概念,相对偏底层一些，不过掌握以后，你更容易深入理解Threejs的几何体和模型对象。 缓冲类型几何体BufferGeometry threejs的长方体BoxGeometry、球体SphereGeometry等几何体都是基于BufferGeometry (opens new window)类构建的，BufferGeometry是一个没有任何形状的空几何体，你可以通过BufferGeometry自定义任何几何形状，具体一点说就是定义顶点数据。 //创建一个空的几何体对象 const geometry = new THREE.BufferGeometry(); BufferAttribute定义几何体顶点数据 通过javascript类型化数组 (opens new window)Float32Array创建一组xyz坐标数据用来表示几何体的顶点坐标。 //类型化数组创建顶点数据 const vertic

推荐：将NSDT场景编辑器加入你的3D工具链 其他系列工具：NSDT简石数字孪生 threejs语法总结 本节课从JavaScript面向对象语法的角度，给大家总结下threejs API的使用习惯，这样方便大家更好的使用threejs API。 Three.js语法总结：类(构造函数) Three.js提供了各种各样的类(构造函数),通过new关键字可以实例化类(构造函数)，获得一个对象，对象具有属性和方法。 // new实例化类THREE.MeshLambertMaterial，创建一个材质对象 const material = new THREE.MeshLambertMaterial(); // 可以看到材质对象的属性color、side、opacity、transparent... // 通过属性可以看到threejs默认的属性值 console.log('查看材质对象',material); // 查看材质默认属性值 console.log('material.color',material.color); console.log('material.s

推荐：将NSDT场景编辑器加入你的3D工具链 其他系列工具：NSDT简石数字孪生 gui.js库(分组) 当GUI交互界面需要控制的属性比较多的时候，为了避免混合，可以适当分组管理，这样更清晰。 gui交互界面不分组 gui交互界面不分组,只有一个默认的总的菜单。 const gui = new GUI(); //创建GUI对象 //创建一个对象，对象属性的值可以被GUI库创建的交互界面改变 const obj = { color: 0x00ffff,// 材质颜色 specular: 0x111111,// 材质高光颜色 }; // 材质颜色color gui.addColor(obj, 'color').onChange(function(value){ material.color.set(value); }); // 材质高光颜色specular gui.addColor(obj, 'specular').onChange(function(value){ material.

推荐：将NSDT场景编辑器加入你的3D工具链 其他系列工具：NSDT简石数字孪生 gui调试3-下拉菜单、单选框 前面大家学过通过.add()方法可以添加一个拖动条用来改变对象的某个属性，本节课给大家介绍.add()方法创建新的UI交互界面，比如下拉菜单、单选框。 .add()方法参数3和4数据类型：数字 格式：add(控制对象，对象具体属性，其他参数) 其他参数，可以一个或多个，数据类型也可以不同，gui会自动根据参数形式，自动生成对应的交互界面。 参数3和参数4，分别是一个数字，交互界面是一个鼠标可以拖动的拖动条，可以在一个区间改变属性的值 // 参数3、参数4数据类型：数字(拖动条) gui.add(obj, 'x', 0, 180).onChange(function (value) { mesh.position.x = value; }); .add()方法参数3数据类型：

推荐：将NSDT场景编辑器加入你的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工具链 其他系列工具：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工具链 其他系列工具：NSDT简石数字孪生 WebGL渲染器设置(锯齿模糊) 一般实际开发，threejs的WebGL渲染器需要进行一些通用的基础配置，本节课给大家简单介绍下,比如渲染模糊或锯齿问题。 渲染器锯齿属性.antialias 设置渲染器锯齿属性.antialias的值可以直接在参数中设置，也可通过渲染器对象属性设置。 const renderer = new THREE.WebGLRenderer({ antialias:true, }); 或 renderer.antialias = true, 设备像素比window.devicePixelRatio 如果你有web前端基础，应该了解window对象，设备像素比.devicePixelRatio是window对象的一个属性，该属性的值和你的硬件设备屏幕相关，不同硬件设备的屏幕window.devicePixelRatio的值可能不同，可能就是1、1.5、2.0等其它值。 // 不同硬件设备的屏幕的设备像素比window.devicePixelRat

推荐：将NSDT场景编辑器加入你的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工具链 其他系列工具：NSDT简石数字孪生 stats性能监视器(计算渲染帧率FPS) 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使用

在线工具推荐：三维数字孪生场景工具 - GLTF/GLB在线编辑器 - Three.js AI自动纹理化开发 - YOLO 虚幻合成数据生成器 - 3D模型在线转换 -  3D模型预览图生成服务 Canvas画布布局和全屏 threejs渲染输出的结果就是一个Cavnas画布，canvas画布也是HTML的元素之一，这意味着three.js渲染结果的布局和普通web前端习惯是一样的。 通过renderer.domElement属性可以访问threejs的渲染结果，也就是HTML的元素canvas画布。 非全屏局部布局 你可以把threejs的渲染结果renderer.domElement，插入到web页面上任何一个元素中，只要符合你项目的布局规则即可。

推荐：将NSDT场景编辑器加入你的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.set

推荐：将NSDT场景编辑器加入你的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简石数字孪生 三维坐标系 本节课的目的就是为了加强大家对threejs三维空间的认识。 辅助观察坐标系 THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小，你可以根据需要改变尺寸。 // AxesHelper：辅助观察的坐标系 const axesHelper = new THREE.AxesHelper(150); scene.add(axesHelper); 材质半透明设置 设置材质半透明,这样可以看到坐标系的坐标原点。 const material = new THREE.MeshBasicMaterial({ color: 0x0000ff, //设置材质颜色 transparent:true,//开启透明 opacity:0.5,//设置透明度 }); AxesHelper的xyz轴 three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。 设置模型在坐标系中的位置或