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

最新推荐文章于 2023-12-14 13:55:35 发布

xyphf_和派孔明

最新推荐文章于 2023-12-14 13:55:35 发布

阅读量932

点赞数 1

分类专栏： WEBGL/ThreeJS 文章标签：前端团队沟通

本文链接：https://blog.csdn.net/xyphf/article/details/125031342

版权

WEBGL/ThreeJS 专栏收录该内容

27 篇文章 7 订阅

订阅专栏

我们在开发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属性，命名：中文名、英文名、汉语拼音都可以，可以根据公司规定或开发习惯命名，不是说中文命名一定会乱码，但是可能会乱码，为了避免乱码，强烈建议模型和贴图文件以及贴图文件夹的名称都使用英文命名，避免出现解析乱码情况。

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