Three.js - 模型加载需要注意的问题

外部模型有很无数种格式,每种格式都有不同的用途、不同的特性和不同的复杂性。
尽管three.js提供了很多的加载器,但是选择正确的格式是非常重要的,有些格式很难处理,并且容易出现很多难以解决的问题。

① three.js 推荐格式

three.js 官方推荐格式是glTF (GL Transmission Format),.GLB 和**.GLTF都得到了很好的支持,因为glTF格式专注于数据传输,它快速的数据传输和加载,得到了three.js**的青睐。

glTF格式简介

1、什么是glTF格式

  • glTF 即是 GL Transmission Format 的缩写。
  • glTF 是一种3D内容的格式标准,由Khronos Group管理,(Khronos Group还管理着OpenGL系列、OpenCL等重要的行业标准)。
  • glTF 的设计是面向实时渲染应用的,尽量提供可以直接传输给图形API的数据形式,不再需要二次转换
  • glTFOpenGL ESWebGL非常友好。
  • glTF 的目标是:3D领域的JPEG
  • 作为一个标准,自2015年10月发布(glTF 1.0)以来,已经得到了业界广泛的认可,你可以相信它的水平。
  • glTF目前最新版本为2.0已于2017年6月正式发布。

2、glTF 2.0 所定义的数据结构
Three.js - 模型加载需要注意的问题_第1张图片

  • 一个JSON文本文件,作为整个标准的核心,描述场景结构,数据对应关系等。
  • 一个二进制文件,用来存储Vertex BufferIndex Buffer等,这些数据可以直接通过OpenGL或者WebGL API直接上传到显示驱动,无需再做解析和转换。
  • 还包含所引用的shader文件、贴图文件等。

3、glTF 官方示例
Three.js - 模型加载需要注意的问题_第2张图片

https://gltf-viewer.donmccurdy.com/demo
4、文档
glTF官方网站
glTf 文档 2.0
glTf 文档 1.0
glTF简介-燕良博客

② three.js 推荐的工作流程

既然glTF格式具有高效率传输快的优势,那么一般制作模型的时候尽量导出glTF格式。
现在一般的3D模型厂商已经实现了glTF格式接口,模型制作完之后可以直接导出glTF格式,然后通过three.js的加载器**THREE.GLTFLoader()**进行加载即可。

如果你的工具不支持导出glTF格式,你也可以导出例如:FBX, OBJ, 或者 COLLAD等,的模型格式,three.js同样对一些比较流行的格式支持进行定期的维护。

也可以使用下面的方式,进行格式的转换:

  • 1、blender 内置的插件 可以用于导出 glTF 格式 Blender glTF 2.0 Exporter
  • 2、COLLADA格式 转换为 glTF COLLADA2GLTF
  • 3、FBX格式转换为glTF FBX2glTF
  • 4、OBJ转换为glTF OBJ2GLTF

③ three.js 模型加载故障排查

你花了很大的经历制作的模型,当把它加载进网页的时候,却发现它严重变形,或者缺少了一些东西,也许根本就无法加载,可以通过下面的方式进行调试。

  • 检查JavaScript控制台的错误,并确保在调用.load()时使用onError回调来记录结果
  • 在另一个程序中打开模型进行查看,例如three.js提供的编辑器 three.js editor,或者glTF Viewer,以及babylonjs来预览模型。
  • 如果模型在以上程序中可以出现,但是通过three.js提供的加载器无法加载,那么就把这个问题提交给three.js官方进行处理
  • 试着将模型向上或向下缩放1000倍。许多模型的规模不同,如果摄像机在模型中,大型模型可能不会出现
  • 在网络选项卡中寻找失败的纹理请求,比如C:\Path\To\Model\texture.jpg 使用相对于路径,例如images/texture.jpg——这可能需要在文本编辑器中编辑模型文件
  • 在论坛中寻求帮助 three.js 论坛https://discourse.threejs.org/

你可能感兴趣的:(ThreeJS开发)