推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 加载.gltf文件(模型加载全流程) 本节课，以gltf格式为例，给大家讲解加载外部三维模型的整个过程。 场景、光源、渲染器、相机控件等前面说过基础代码，本节课不专门讲解，主要是把下面三部，给大家全流程演示一遍。 1. gltf模型加载器GLTFLoader.js 2. 相机参数根据需要设置 3. 加载gltf的时候，webgl渲染器编码方式设置 1.1.引入GLTFLoader.js 你在three.js官方文件的**examples/jsm/子文件loaders/**目录下，可以找到一个文件GLTFLoader.js，这个文件就是three.js的一个扩展库，专门用来加载gltf格式模型加载器。 // 引入gltf模型加载库GLTFLoader.js import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 GLTF格式简介 (Web3D领域JPG) 本节课算是科普介绍，不用掌握具体的知识细节，大概有个印象即可。 gltf格式的重要性 GLTF格式是新2015发布的三维模型格式，随着物联网、WebGL、5G的进一步发展，会有越来越多的互联网项目Web端引入3D元素，你可以把GLTF格式的三维模型理解为.jpg、.png格式的图片一样，现在的网站，图片基本是标配，对于以后的网站来说如果需要展示一个场景，使用3D来替换图片表达也是很正常的事情。图片有很多格式，对于三维模型自然也是如此，Web开发的时候图片会有常用格式，对于Web3D开发也一样，肯定会根据需要选择一个常见的大家都熟悉的格式，随时时间的发展，GLTF必然称为一个极为重要的标准格式。 不仅three.js，其它的WebGL三维引擎cesium、babylonjs都对gltf格式有良好的的支持。 GLTF 2.0 Khronos Group组织2015发布了GLTF 1.0版本，在2017年又发布了GLTF2.0的版本。 关于glT

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 UV动画 本节课通过纹理对象的偏移属性.offset给大家实现一个UV动画效果。 纹理对象.offset属性 纹理对象Texture的.offset的功能是偏移贴图在Mesh上位置，本质上相当于修改了UV顶点坐标。 texture.offset.x +=0.5;//纹理U方向偏移 texture.offset.y +=0.5;//纹理V方向偏移 纹理对象.wrapS或.wrapT与.offset组合使用 你可以对比，当你通过.offset设置了纹理映射偏移后，是否把.wrapS或.wrapT设置为重复映射模式THREE.RepeatWrapping，两种情况的渲染效果差异。 texture.offset.x +=0.5;//纹理U方向偏移 // 设置.wrapS也就是U方向，纹理映射模式(包裹模式) texture.wrapS = THREE.RepeatWrapping;

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 矩形Mesh+背景透明png贴图 three.js项目开发中，把一个背景透明的.png图像作为平面矩形网格模型Mesh的颜色贴图是一个非常有用的功能，通过这样一个功能，可以对three.js三维场景进行标注。 整体思路：创建一个矩形平面，设置颜色贴图.map,注意选择背景透明的.png图像作为颜色贴图，同时材质设置transparent: true，这样png图片背景完全透明的部分不显示。 // 矩形平面网格模型设置背景透明的png贴图 const geometry = new THREE.PlaneGeometry(60, 60); //默认在XOY平面上 const textureLoader = new THREE.TextureLoader(); const material = new THREE.MeshBasicMaterial({ map: textureLoader.load('./指南针.png'), transparent: true, //

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 圆形平面设置纹理贴图 你可以思考下，怎么实现矩形图片剪裁为圆形渲染。 其实很简单，可以通过圆形几何体CircleGeometry创建一个网格模型Mesh，把一张图片作为圆形Mesh材质的颜色贴图，这样就可以把一张方形图片剪裁渲染为圆形效果。 //CircleGeometry的顶点UV坐标是按照圆形采样纹理贴图 const geometry = new THREE.CircleGeometry(60, 100); //纹理贴图加载器TextureLoader const texLoader = new THREE.TextureLoader(); const texture = texLoader.load('./texture.jpg'); const material = new THREE.MeshBasicMaterial({ map: texture,//map表示材质的颜色贴图属性 side:THREE.DoubleSide, }); const mesh = new

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 创建纹理贴图 通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture，纹理对象Texture可以作为模型材质颜色贴图.map属性的值。 const geometry = new THREE.PlaneGeometry(200, 100); //纹理贴图加载器TextureLoader const texLoader = new THREE.TextureLoader(); // .load()方法加载图像，返回一个纹理对象Texture const texture = texLoader.load('./earth.jpg'); const material = new THREE.MeshLambertMaterial({ // 设置纹理贴图：Texture对象作为材质map属性的属性值 map: texture,//map表示材质的颜色贴图属性 }); 颜色贴图属性.map 也可以通过颜色贴图属性.map直接设置纹

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 模型隐藏或显示 开发web3d项目，有时候需要临时隐藏一个模型，或者一个模型处于隐藏状态，需要重新恢复显示。 模型属性.visible 模型对象的父类Object3D封装了一个属性.visible，通过该属性可以隐藏或显示一个模型。 mesh.visible =false;// 隐藏一个网格模型，visible的默认值是true group.visible =false;// 隐藏一个包含多个模型的组对象group mesh.visible =true;// 使网格模型mesh处于显示状态 材质属性.visible 材质对象的父类Material封装了一个.visible属性，通过该属性可以控制是否隐藏该材质对应的模型对象。 // 隐藏网格模型mesh，visible的默认值是true mesh.material.visible =false; // 注意如果mesh2和mesh的.material属性指向同一个材质，mesh2也会跟着mesh隐藏 注意:如果多个模型引用了

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 移除对象.remove() 前面课程给大家讲解过.add()方法,比如可以通过.add()可以把模型或光源添加到场景中。 group.add(mesh); scene.add(group); scene.add(light); .remove()方法和.add()方法是相反的，是把子对象从父对象的.children()属性中删除。 查看父类Object3D的移除方法.remove() 场景对象Scene、组对象Group、网格模型对象Mesh的.remove()方法都是继承自它们共同的基类(父类)Object3D。 .remove()方法使用 .add()方法是给父对象添加一个子对象，.remove()方法是删除父对象中的一个子对象。 // 删除父对象group的子对象网格模型mesh1 group.remove(mesh1); scene.remove(ambient)

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 改变模型相对局部坐标原点位置 通过改变几何体顶点坐标，可以改变模型自身相对坐标原点的位置。 //长方体的几何中心默认与本地坐标原点重合 const geometry = new THREE.BoxGeometry(50, 50, 50); // 平移几何体的顶点坐标,改变几何体自身相对局部坐标原点的位置 geometry.translate(50/2,0,0,);; 旋转测试 局部坐标相对模型发生改变，旋转轴自然也会发生变化。 // .rotateY()默认绕几何体中心旋转，经过上面几何体平移变化，你会发现.rotateY()是绕长方体面上一条线旋转 mesh.rotateY(Math.PI/3); 你可以设置旋转动画，观察几何体平移前后旋转动画差异。 function render() { model.rotateY(0.01);//旋转动画 requestAnimationFrame(render); } render(

在线工具推荐：Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 3D数字孪生场景编辑器 本地坐标和世界坐标 通过前面两节课的学习，大家对threejs的层级模型或者模型的树结构有了一定了解。 本地(局部)坐标和世界坐标 // mesh的世界坐标就是mesh.position与group.position的累加 const mesh = new THREE.Mesh(geometry, material); mesh.position.set(50, 0, 0); const group = new THREE.Group(); group.add(mesh); group.position.set(50, 0, 0); 1.

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 遍历模型树结构、查询模型节点 上节课说过Threejs场景对象Scene和各种子对象构成的层级模型就是一个树结构。如果你有一定的算法基础对树结构肯定会非常了解，如果你了解前端的DOM树结构也非常有助于本节课的学习，如果这些都不了解也没有关系，直接体验本节课的案例源码。 模型命名(.name属性) 在层级模型中可以给一些模型对象通过.name属性命名进行标记。 const group = new THREE.Group(); group.name='小区房子'; const mesh = new THREE.Mesh(geometry, material); mesh.name='一号楼'; 树结构层级模型设置.name属性 下面是通过代码创建了一个层级模型，一般实际开发的时候，会加载外部的模型，然后从模型对象通过节点的名称.name查找某个子对象。 // 批量创建多个长方体表示高层楼 const group1 = new THREE.Group(); //所有高层楼的父对象 gro

在线工具推荐：Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 3D数字孪生场景编辑器 Vector3与模型位置、缩放属性 本节课给通过组对象Group (opens new window)给大家讲解一下threejs层级模型或树结构的概念。 Group层级模型(树结构)案例 下面代码创建了两个网格模型mesh1、mesh2，通过THREE.Group类创建一个组对象group,然后通过add方法把网格模型mesh1、mesh2作为设置为组对象group的子对象，然后在通过执行scene.add(group)把组对象group作为场景对象的scene的子对象。也就是说场景对象是scene是group的父对象，group是mesh1、mesh2的父对象。这样就构成了一个三层的层级结构，当然了你也可以通过Group自己创建新模型节点作为层级结构中的一层。 //创建两个网格模型mesh1、mesh2 const geometry = new THREE.BoxGeometry(20, 20, 20); co

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 克隆.clone()和复制.copy() 克隆.clone()、复制.copy()是threejs很多对象都具有的方法，比如三维向量对象Vector3、网格模型Mesh、几何体、材质。 克隆.clone() 克隆.clone()简单说就是复制一个和原对象一样的新对象,下面以三维向量对象Vector3给大家举例，其他的threejs对象都可以参照类似的写法。 const v1 = new THREE.Vector3(1, 2, 3); console.log('v1',v1); //v2是一个新的Vector3对象，和v1的.x、.y、.z属性值一样 const v2 = v1.clone(); console.log('v2',v2); 复制.

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 模型材质和几何体属性 本节课给大家介绍模型对象的几何体.geometry和材质属性.material。 浏览器控制台查看对象和属性 浏览器控制打印模型对象mesh，可以展开对象，查看对象的几何体.geometry和材质属性.material。 const mesh = new THREE.Mesh(geometry, material); console.log('mesh',mesh); 浏览器控制台打印模型的几何体属性.geometry和材质属性.material。 console.log('mesh.geometry',mesh.geometry); console.log('mesh.material',mesh.material); 访问改变模型材质属性 // 访问模型材质,并设置材质的颜色属性 mesh.material.color.set(0xffff00); 访问改变模型几何体属性 // 访问模型几何体,

推荐：将NSDT场景编辑器加入你的3D工具链 其他工具集：NSDT简石数字孪生 模型材质父类Material 学习到现在大家对threejs的材质都有简单的了解，本节课主要结合文档，从JavaScript语法角度，给大家总结一下材质API的语法。 材质父类Material 查询threejs文档，你可以看到基础网格材质MeshBasicMaterial、漫反射网格材质MeshLambertMaterial、高光网格材质MeshPhongMaterial等网格材质都有一个共同的父类Material。 网格材质继承父类属性 从JavaScript语法角度看子类都会继承父类的属性和方法，threejs的材质同样道理。 MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等子类网格材质会从父类Material继承一些属性和方法，比如透明度属性.opacity、面属性.side、是否透明属性.transparent等等。 材质半透明设置 material.transparent = true;//开启透明 ma

推荐：将NSDT场景编辑器加到你的3D工具链 工具集：NSDT简石数字孪生 模型材质颜色(Color对象) 你去文档搜索MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial等网格材质，可以看到他们都有一个颜色属性.color。 下面结合threejs文档，带领大家探索一下，如何通过查询文档来修改模型材质的颜色值.color。 材质颜色属性.color 如果你想修改材质的颜色属性.color,那么你就需要了解该属性对应属性值的形式。 1. 查文档，找到.color属性，可以发现threejs材质对象颜色属性.color是threejs的颜色对象Color。 2. console.log()打印：浏览器控制台查看材质颜色属性的属性值 console.log('material.color',material.color); 颜色对象Color 查看颜色对象Color文档,可以看到颜色对象有三个属性，分别为.r、.g、.b，表示颜色RGB的三个分量。 // 创建一个颜色对象 const color =

推荐：将NSDT场景编辑器加到你的3D工具链 工具集：NSDT简石数字孪生 三维向量Vector3与模型位置 点模型Points、线模型Line、网格网格模型Mesh等模型对象的父类都是Object3D (opens new window)，如果想对这些模型进行旋转、缩放、平移等操作，如何实现，可以查询Threejs文档Object3D (opens new window)对相关属性和方法的介绍。 三维向量Vector3 三维向量Vector3有xyz三个分量，threejs中会用三维向量Vector3表示很多种数据，本节课提到的比较简单，就是位置.position和缩放.scale属性。 查看three.js文档你可以知道Vector3对象具有属性.x、.y、.z，Vector3对象还具有.set()等方法。 //new THREE.Vector3()实例化一个三维向量对象 const v3 = new THREE.Vector3(0,0,0); console.log('v3',

推荐：将NSDT场景编辑器加到你的3D工具链 工具集：NSDT简石数字孪生 查看threejs自带几何体顶点 查看three.js自带几何体顶点结构，基类(父类)BufferGeometry three.js提供的矩形平面PlaneGeometry、长方体BoxGeometry、球体SphereGeometry等各种形状的几何体，他们都有一个共同的父类BufferGeometry。这意味着这些几何体有哪些属性或方法，你可以查询文档关于BufferGeometry的介绍。 查看几何体顶点位置和索引数据 可以用顶点索引index数据构建几何体，也可以不用，threejs默认的大部分几何体都有三角形的顶点索引数据，具体可以通过浏览器控制台打印几何体数据查看。 const geometry = new THREE.PlaneGeometry(100,50); //矩形平面几何体 // const geometry = new THREE.BoxGeometry(50,50,50); //长方体 console.log('几何体',geometry); console.lo

推荐：将NSDT场景编辑器加到你的3D工具链 工具集：NSDT简石数字孪生 顶点法线数据 前面给大家讲解过几何体顶点位置数据geometry.attributes.position，本节课给大家介绍一种新的顶点数据，就是顶点法线(法向量)数据geometry.attributes.normal。 测试：Basic材质改为Lambert材质 你可以测试下，把前面两节课的案例源码中MeshBasicMaterial材质改为MeshLambertMaterial材质，你会发现原来的矩形平面无法正常渲染，这其实很简单，使用受光照影响的材质，几何体BufferGeometry需要定义顶点法线数据。 // MeshBasicMaterial不受光照影响 // 使用受光照影响的材质，几何体Geometry需要定义顶点法线数据 const material = new THREE.MeshLambertMaterial({ color: 0x0000ff, side: THREE.DoubleSide, //两面可见 }); 数学上法线概念 先来理解一下数学上

推荐：将NSDT场景编辑器加到你的3D工具链 工具集：NSDT简石数字孪生 几何体顶点索引数据 网格模型Mesh对应的几何体BufferGeometry，拆分为多个三角后，很多三角形重合的顶点位置坐标是相同的，这时候如果你想减少顶点坐标数据量，可以借助几何体顶点索引geometry.index来实现。 定义顶点位置坐标数据 每个三角形3个顶点坐标，矩形平面可以拆分为两个三角形，也就是6个顶点坐标。 const vertices = new Float32Array([ 0, 0, 0, //顶点1坐标 80, 0, 0, //顶点2坐标 80, 80, 0, //顶点3坐标 0, 0, 0, //顶点4坐标 和顶点1位置相同 80, 80, 0, //顶点5坐标 和顶点3位置相同 0, 80, 0, //顶点6坐标 ]); 如果几何体有顶点索引geometry.index，那么你可以吧三角形重复的顶点位置坐标删除。 const vertices

推荐：将NSDT场景编辑器加到你的3D工具链 工具集：NSDT简石数字孪生 线模型对象 线模型Line渲染顶点数据 下面代码是把几何体作为线模型Line (opens new window)的参数，你会发现渲染效果是从第一个点开始到最后一个点，依次连成线。 // 线材质对象 const material = new THREE.LineBasicMaterial({ color: 0xff0000 //线条颜色 }); // 创建线模型对象 const line = new THREE.Line(geometry, material); 线模型LineLoop、LineSegments threejs线模型除了Line，还提供了LineLoop (opens new window)、LineSegments (opens new window)，区别在于绘制线条的规则不同。 // 闭合线条 const line = new THREE.LineLoop(geometry, material)