我们在开发3D可视化开发的时候，往往需要3D设计师提供三维模型以及相关素材，然后WebGL前端工程师加载解析模型，编写与三维场景交互的代码。

三维模型格式有很多，如：.stl、.obj、.ply、.dae、.fbx、.gltf、stp....

一、推荐导出GLTF格式

一般情况下，场景模型推荐使用GLTF，GLTF格式是新2015发布的三维模型格式，随着物联网、WebGL、5G的进一步发展，会有越来越多的互联网项目Web端引入3D元素，你可以把GLTF格式的三维模型理解为.jpg、.png格式的图片一样，现在的网站，图片基本是标配，对于以后的网站来说如果需要展示一个场景，使用3D来替换图片表达也是很正常的事情。图片有很多格式，对于三维模型自然也是如此，Web开发的时候图片会有常用格式，对于Web3D开发也一样，肯定会根据需要选择一个常见的大家都熟悉的格式，随时时间的发展，GLTF必然称为一个极为重要的标准格式。

threejs、cesium、babylonjs等WebGL三维引擎都对gltf格式有良好的的支持。

相比较obj、stl等格式而言，.gltf格式可以包含更多的模型信息。

.gltf格式文件几乎可以包含所有的三维模型相关信息的数据，比如网格模型、PBR材质、纹理贴图、骨骼、变形、动画、光源、相机...

GLTF文件就是通过JSON的键值对方式来表示模型信息

{"asset": {"version": "2.0",},
...
// 模型材质信息"materials": [{"pbrMetallicRoughness": {//PBR材质"baseColorFactor": [1,1,0,1],"metallicFactor": 0.5,//金属度"roughnessFactor": 1//粗糙度}}],// 网格模型数据"meshes": ...// 纹理贴图"images": [{// uri指向外部图像文件"uri": "贴图名称.png"//图像数据也可以直接存储在.gltf文件中}],"buffers": [// 一个buffer对应一个二进制数据块，可能是顶点位置 、顶点索引等数据{"byteLength": 840,//这里面的顶点数据，也快成单独以.bin文件的形式存在   "uri": "data:application/octet-stream;base64,AAAAPwAAAD8AAAA/AAAAPwAAAD8AAAC/.......}],
}

.bin文件

有些glTF文件会关联一个或多个.bin文件，.bin文件以二进制形式存储了模型的顶点数据等信息。

.bin文件中的信息其实就是对应gltf文件中的buffers属性，buffers.bin中的模型数据，可以存储在.gltf文件中,也可以单独一个二进制.bin文件。

"buffers": [{"byteLength": 102040,"uri": "文件名.bin"}
]

.glb格式文件

gltf格式文件不一定就是以扩展名.gltf结尾，.glb就是gltf格式的二进制文件。比如你可以把.gltf模型和贴图信息全部合成得到一个.glb文件中，.glb文件相对.gltf文件体积更小，网络传输自然更快。

你可以通过gltf-viewer平台预览GLTF格式模型，当然你也可以通过three.js editor预览gltf格式模型。

gltf格式模型在线预览平台

前端预览可以在vscode搜索gltf，可以看到glTF Tools的工具安装下预览。

导出gltf

3damx gltf相关插件：https://github.com/BabylonJS/Exporters/releases

blender：最新版本可以直接导出gltf，旧的版本可以通过gltf插件实现。

3d MAX 2018软件导出GLTF格式注意事项

第一步：

3dMax 2018导出GLTF格式目前是需要装相关插件的，访问https://github.com/BabylonJS/Exporters/releases，根据对应的3D MAX版本下载，

第二步：

关闭你的3dmax软件，解压你下载的zip文件，比如我下载的Max_2018.zip文件,把解压出来的文件全部复制到你3dmax的安装目录\bin\assemblies下面，复制时候如果需要替换原来的文件，直接替换就可以。

3dmax安装后，\bin\assemblies文件我的默认是地址是C:\Program Files\Autodesk\3ds Max 2018\bin\assemblies，可以通过3damx桌面图标右键查看文件地址快速寻找。

blender 2021软件导出GLTF格式注意事项

1、改成中文界面

二、WebGL/Threejs贴图颜色偏差问题的解决

参加GLTFLoader加载器文档

纹理默认是线性颜色空间THREE.LinearEncoding，更多参考，更多参考

通过TextureLoader加载图片返回的纹理对象`Texture`默认是线性颜色空间THREE.LinearEncoding,如果WebGL渲染器设置renderer.outputEncoding = THREE.sRGBEncoding;需要设置`Texture.encoding = THREE.sRGBEncoding;。

var texture = new THREE.TextureLoader().load( './scene/model_img3.png' );//加载纹理贴图
var geometry = new THREE.PlaneGeometry(185, 260, 32);
var material = new THREE.MeshLambertMaterial({ // color: 0xffff00, side: THREE.DoubleSide ,map:texture,
});
material.map.encoding = THREE.sRGBEncoding;//设置纹理贴图编码方式和WebGL渲染器一致
var plane = new THREE.Mesh(geometry, material);
plane.position.x = -200
plane.rotateX(Math.PI/2)
model.add(plane);

三、相机参数沟通与模型尺寸沟通

为了展示整个场景，要和设计师沟通整个模型场景的尺寸；

向设计师问清楚场景模型的长宽之后可以设置相机的参数了

// width和height用来设置Three.js输出Canvas画布尺寸，同时用来辅助设置相机渲染范围
var width = window.innerWidth; //窗口文档显示区的宽度
var height = window.innerHeight; //窗口文档显示区的高度
/**
* 正交相机设置
*/
var k = width / height; //Three.js输出的Cnavas画布宽高比
// var s = 200; //控制相机渲染空间左右上下渲染范围，s越大，相机渲染范围越大
var s = 100; // ***** 根据你想要渲染的粮仓范围设置相机渲染范围大小
//THREE.OrthographicCamera()创建一个正投影相机对象
// -s * k, s * k, s, -s, 1, 1000定义了一个长方体渲染空间，渲染空间外的模型不会被渲染
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
// camera.position.set(200, 300, 200); //相机在Three.js坐标系中的位置
//通过相机控件OrbitControls旋转相机，选择一个合适场景渲染角度
// 既然要整体观察，相机的位置就要放在场景的外面
camera.position.set(292, 223, 185);
camera.lookAt(0, 0, 0); //相机指向Three.js坐标系原点//  透视相机
// var camera = new THREE.PerspectiveCamera(45, width / height, 1, 3000);
// 通过相机控件OrbitControls旋转相机，选择一个合适场景渲染角度
// camera.position.set(318, 162, 204);
// camera.lookAt(0, 0, 0);

四、默认视角问题

先打印出来合适的相机位置，再设置相机的默认视角

// 渲染循环
function render() {
// 执行渲染操作renderer.render(scene, camera);
// 请求再次执行渲染函数render，渲染下一帧requestAnimationFrame(render);
//  通过相机控件OrbitControls旋转相机，选择一个合适场景渲染角度console.log(camera.position);
}
render();

五、模型坐标原点位置

和三维设计师沟通好，要把模型的哪个位置设置坐标原点。

也就是想哪个位置在canvas画布的中间，就告诉设计师把坐标原点对准那个位置。

六、导出模型姿态问题

告诉设计师尽量保持横平竖着，比如保持和X或Z某个轴垂直或平行。

七、模型命名问题

也就是分清某个模型是哪个，一般三维建模软件的目录树都有模型的名称，three.js加载外部模型，外部模型的名称会解析为three.js对象的.name属性，命名：中文名、英文名、汉语拼音都可以，可以根据公司规定或开发习惯命名，不是说中文命名一定会乱码，但是可能会乱码，为了避免乱码，强烈建议模型和贴图文件以及贴图文件夹的名称都使用英文命名，避免出现解析乱码情况。

下面为中文乱码的异常情况

凡事需要被交互操作的模型，命名都不要重名。例如下面的仓库,尽量标号

和后端接口的沟通，比如有模型需要被点击的时候显示该模型相关的数据，而这个数据是需要从后端请求的，这个时候我们把这个模型对应的命名参数传给后端获取数据。比如下图要求点击哪个仓库就显示那个仓库的数据，我们可以提前沟通好，把仓库的唯一名称传给后端去获取该仓库的数据。

八、凡事需要被单独操作的模型，都不要合并

如果某个模型需要被单独操作，他就不能和其他的模型合并在一起，比如要单独选中某个仓库，那它就不能和其他仓库合并模型，如果仓库上单个的门或窗需要被单独操作，那它就不能和仓库合并模型。

九、模型需要清晰的分组和归类

比如所有的粮仓(granary)归为一类(组)，然后粮仓下面的立筒仓(L)、平房仓(P)、浅圆仓(Q)再次分类，这样做的好长是完成快速选中所有的粮仓或快速选中所有的立筒仓这样按类型披量选中的需求。

WebGL(Threejs)工程师与三维设计师沟通注意事项相关推荐

Web前端开发工程师与UI设计师的区别是什么？
一般来说在提起Web前端开发工程师的时候,人们会联想到UI设计师,并且这两个都是热门的岗位之一,接下来小编带你了解以下,Web前端开发工程师与UI设计师的区别: Web前端开发工程师与UI设计师的区别 ...
三维软件测试工资,（人才测评）三维设计师的招聘入职测评方案
原标题:(人才测评)三维设计师的招聘入职测评方案三维设计师作为视觉效果的呈现者,不仅要有扎实的美术功底,同时丰富的想象力和优秀的审美能力也是必不可少的.企业招聘期间如何考察潜在能力呢?这就需要利用类 ...
Web 3D机房，智能数字机房HTML5 WebGL(ThreeJS)匠心打造
在H5使用3D技术门槛比较低了,它的基础是WebGL(ThreeJS),一个OpenGL的浏览器子集,支持大部分主要3D功能接口.目前主流的浏览器都有较好的支持,IE需要11.最近web 3D机房研发 ...
CSS学习笔记(十四) 我们前端是怎么跟设计师沟通的
1.交付一般设计师给前端的只有psd,没有其它多余的东西,连基本的文档都懒得给.前端期望中的设计能给予的除了psd之外, 还有设计上游岗位传递下来的东西. 比如: 产品原型, 需求文档, 交互文档等 ...
基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用
前言得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应 ...
雨棚板弹性法计算简图_造价工程师：钢结构工程量计算注意事项
造价工程师:钢结构工程量计算注意事项一.图纸:根据图纸目录,清理核对图纸数量,检查是否有遗漏. 二.建筑施工图 1. 设计总说明 1.1 建筑面积.结构形式.柱距.跨度.结构布置情况: 1.2 工程 ...
计算机资格考试中级工程师种类,中级工程师职称考试类别及注意事项
中级工程师职称考试类别及注意事项工程师职称也分为好多类,不同领域的研究人员都会评不同的职称.但是理工类的职称可统一称为工程师.那么中级工程师职称考试类别都有哪些呢?主要有以下几种类别:生物与医学.化 ...
AGV智能三维数字物流库房HTML5+WebGL(Threejs)解决方案
智能三维数字库房系统是物流系统中的重要组成部分,是一种多层存放货物的立体高架系统.自动化立体仓库采用计算机管理系统.电气控制系统与物流仓储设备的结合,在人工不直接进行干预的情况下自动地存储和取出货物, ...
基于 HTML5 WebGL 的高炉炉体三维热力图监控，展示“智慧工厂”十八般武艺
前言我国的钢铁产业一直致力于炼铁传感器.物联网.工业模型软件.专家系统.企业级炼铁大数据平台以及行业级工业互联网平台整体解决方案的研发和推广.目前已完成国内260座高炉的数字化和智能化落地,并推动炼 ...

WebGL(Threejs)工程师与三维设计师沟通注意事项