Skip to main content

前端3D框架选型

· 4 min read

three.js​

Three.js是纯渲染引擎，而且代码易读，容易作为学习WebGL.3D图形.3D数学应用的平台，也可以做中小型的重表现的Web项目。

但如果要做中大型项目，尤其是多种媒体混杂的或者是游戏项目VR体验项目，Three.js必须要配合更多扩展库才能完成，因为你可能会需要联网通信功能的封装.声音普通控制甚至高级频谱控制.输入设备信息的处理等诸多渲染以外的功能。这时候，就比较适合使用Babylon.js或者国内的一些针对游戏和多媒体应用开发的引擎或者说框架，例如LayaAir以及Egret3D。

Hightopo​

信息​

http://www.hightopo.com/blog/461.html 数百个 HTML5 例子学习 HT 图形组件 掌握 HT 基础：

  1. 先入门手册 http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html
  2. 看数据模型 http://www.hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html
  3. 阅矢量手册 http://www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html
  4. 读数据绑定 http://www.hightopo.com/guide/guide/core/databinding/ht-databinding-guide.html
  5. 序列化机制 hightopo.com/guide/guide/core/serialization/ht-serialization-guide.html

如有三维需求：

  1. 入门手册 http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html
  2. 建模手册 http://www.hightopo.com/guide/guide/plugin/modeling/ht-modeling-guide.html
  3. OBJ 导入 http://www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html

thing.js​

image.png

  1. 更合理的API接口设计
  2. 在线编辑器。
  3. 3D模型可使用 3Dmax等工具来创建，并导入。
  4. 自带的快捷界面库更好。

对比​

  1. 2D支持：things是一个完整的3D框架，没有2D相关的支持，hightopo本身支持2D和3D。
  2. 模型：在现实中所有的3D模型
    1. hightopo
      1. 没有太多模型
      2. 支持obj格式，可使用常见3D建模软件开发。
        1. 也可完全自定义模型的定义需要定义所有的点和动画
    2. thingjs
      1. 已有上千免费模型，和一些可选付费模型。
      2. 场景定义：可创建一些模型的组合。
      3. 支持obj，gltf 多种格式，可使用常见3D建模软件开发。
  3. 文档API：在文档和API提供商，thingjs这边的API设计更加的合理，文档更好理解，例子的代码注释也比较清晰。
  4. 组件：都可使用官方组件或者自定义组件。thingjs的官方组件更漂亮。
  5. 数据结构：数据结构差不多，但是 thingjs的结构更加清晰简单。文档说明清楚。 hightopo的属性都是堆在一块，可能上手成本比较高。

框架选择​

  1. 是否需要2D功能：是的话 最好hightopo。
  2. 需要做的东西是否高度匹配hightopo 的例子。
  3. 其他情况下 things 占优。

工作流程​

  1. 需要所需模型
  2. 创建场景。
  3. 数据对接：对接当前设备的信息，修改对应设备的状态。
  4. 增加组件界面。
    1. 增加
    2. 修改
    3. 位移