three.js?Mool3D模型類如何使用

這篇文章主要介紹“three.js Mool3D模型類如何使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“three.js Mool3D模型類如何使用”文章能幫助大家解決問題。

Model類

場景加載

加載場景主要使用引擎中的model類來實現，引擎中model類主要功能有配置文件模型加載、場景切換、單一自定義模型加載、場景下動畫的控制等～

//下方為簡單場景的加載
import { Viewer } from "../Threejs/index";
export class Index extends Viewer {
  constructor(options) {
    super(options);
    this.initModel();
  }
}

推薦通過繼承主類的方式擴展業務代碼，上方是一個最簡單的場景加載示例。細心的同學可以發現上方只是初始化了一個model類而已如何完成場景的加載的，當然完成場景加載還需要一個觸發場景的條件，這我們通?？梢栽谌萜魑募袑崿F。下方就是最簡單的場景加載容器～

//vue文件
//初始化
const init = () => {
  const el = refmap.value;
  sceneA = new Index({
    el: el as HTMLElement,
    tween: TWEEN,
    path: "../public/scene/", //基礎路徑
  });
  setScene(1);
};
//切換場景
const setScene = (id) => {
  switch (id) {
    case 1:
      sceneA.setScene(1, () => {
          //場景加載成功回調
      });
      sceneA.flyTo({ //相機位置
        position: [0, 5, 6],
        controls: [0, 0, 0],
        duration: 2000,
      });
      break;
    default:
      break;
  }
};

場景配置文件

上方代碼通過場景id加載場景，那是如何知道需要加載哪些模型呢？引擎通過config.json文件約束不同場景下所依賴的模型文件，配置文件存放路徑為基礎路徑下（../public/scene/） 下方詳細介紹配置文件～

[
  {
    "name": "mool", //名稱
    "target": false, //是否被鼠標拾取
    "layeridx": 1, //場景id
    "scale": 1, //場景縮放
    "positionX": 50, //場景初始位置
    "positionY": 120,
    "positionZ": 170,
    "layers": [ //場景模型配置對象
      {
        "name": "./glb/building1.glb"
      },
      {
        "name": "./glb/building2.glb"
      }
    ]
  }
  ......
]

遞歸處理場景模型

照著上方的操作，我們完成了場景的加載。這時場景已經呈現在畫面上，如果我們需要修改場景模型的材質等操作怎么做呢？ 當然模型類中也考慮到這一點，提供了一個回調處理解碼的模型，具體怎么操作見下方～

constructor(options) {
    super(options);
    this.initModel();
    //這是在加載場景模型之前執行的回調，所以建議放在初始化類時完成回調的注冊，這樣會在模型加載過程中遞歸去修改模型
    this.model.deepFunction.push(({ e , item }) => {
     // e:模型碎片Mesh / item:場景配置文件
      e.scale.set(300, 300, 300);
    });
}

不推薦什么方法都放在constructor中去調用，由于模型加載時才會去設置當前場景的id，如在constructor中初始化天空和燈光等，會出現無效的情況，出現這種情況是因為場景id默認值為1，都加載到場景1中去了。所以模型類提供一個場景加載成功的回調，在里面初始化場景需要的一些修飾類如燈光、天空、環境貼圖等～

sceneA.setScene(1, () => {
    //場景加載成功回調
    sceneA.initEnvironment({
      path: "exr.exr",
      type: "exr",
    });
});

加載獨立模型

如何加載獨立于場景配置文件之外的模型呢？模型類提供GLB和FBX兩種類型模型加載方法，具體見下方說明～

//加載glb/gltf模型
this.model.loadModel(
  "../public/scene/glb/walk.glb",
  this.sceneidx,
  (glb, animations) => {
    glb:為模型對象
    animations:模型動畫
    ...模型自定義修改
  }
);
//加載fbx模型
this.model.loadFbxModel(
  "../public/scene/glb/walk.fbx",
  this.sceneidx,
  (fbx, animations) => {
    fbx:為模型對象
    animations:模型動畫
     ...模型自定義修改
  }
);

注意上方只提供加載模型，不會主動添加到場景中，需修改定制化模型參數之后手動將其add到場景中～

動畫

模型類中提供兩種執行動畫的方法，一種是執行場景下的所有動畫，一種是執行某個名稱的動畫。具體使用見下方說明～

//執行場景下的所有動畫
this.model.playAllClipes(this.sceneidx);//傳入場景的id
//執行某名稱的動畫
this.model.playNameClipes(this.sceneidx,'mool');//傳入場景的id和動畫名稱

關于“three.js Mool3D模型類如何使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。