ThingOrigin.js

导入模型 ​

通过模型所在路径导入一个模型，根据模型的类型，设置 modelType 的值，其他模型参数，请查看 modelInfoParams。

容器 ​

设置一个 div 宽度为600px， 高度为 400px， id设置为TO。

html
<div id="TO" style="width: 600px; height: 400px"></div>

初始化 ​

js
let TO = new ThingOrigin("fileModel", document.getElementById("TO"));

模型数据 ​

这里的 modelUrl 表示模型地址，例子中用的是本地地址，也可以用服务器地址。

js
let modelInfo = {
    modelName: "fileModel-abb", //模型名称
    base: {
      modelUrl: './model/abb.gltf', //模型地址
    },
    modelType: "gltf", //模型类型
    position: { //位置
      x: 0,
      y: 0,
      z: 0,
    },
    scale: { //缩放大小
      x: 1, 
      y: 1,
      z: 1,
    },
    rotation: { //旋转角度
      x: 0,
      y: 0,
      z: 0,
    },
    userData: {//其他自定义参数
      by: 'ThingOrigin',
      rootName: "ABB",
    }
}

导入模型 ​

使用 initFileModel 的方法导入上述模型，采用的是异步加载的方法，模型加载完毕后，再添加到场景中。

js
TO.model.initFileModel(
    modelInfo
  ).then((model) => {
    console.log(model);
    TO.scene.add(model.scene);//将模型添加到场景
  });

需要注意的点：gltf、glb 模型添加到场景时使用 model.scene，其他模型则使用 model 。