three.js?Mool3D模型類的使用

更新時(shí)間：2023年03月31日 16:33:09 作者：Mool

這篇文章主要為大家介紹了three.js?Mool3D模型類的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Model類

之前的引擎介紹文章中有人留言想了解如何通過引擎加載自定義的模型場(chǎng)景，這篇文章將詳細(xì)介紹如何加載場(chǎng)景及場(chǎng)景配置文件的說明～

場(chǎng)景加載

加載場(chǎng)景主要使用引擎中的model類來實(shí)現(xiàn)，引擎中model類主要功能有配置文件模型加載、場(chǎng)景切換、單一自定義模型加載、場(chǎng)景下動(dòng)畫的控制等～

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

推薦通過繼承主類的方式擴(kuò)展業(yè)務(wù)代碼，上方是一個(gè)最簡單的場(chǎng)景加載示例。細(xì)心的同學(xué)可以發(fā)現(xiàn)上方只是初始化了一個(gè)model類而已如何完成場(chǎng)景的加載的，當(dāng)然完成場(chǎng)景加載還需要一個(gè)觸發(fā)場(chǎng)景的條件，這我們通?？梢栽谌萜魑募袑?shí)現(xiàn)。下方就是最簡單的場(chǎng)景加載容器～

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

場(chǎng)景配置文件

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

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

遞歸處理場(chǎng)景模型

照著上方的操作，我們完成了場(chǎng)景的加載。這時(shí)場(chǎng)景已經(jīng)呈現(xiàn)在畫面上，如果我們需要修改場(chǎng)景模型的材質(zhì)等操作怎么做呢？ 當(dāng)然模型類中也考慮到這一點(diǎn)，提供了一個(gè)回調(diào)處理解碼的模型，具體怎么操作見下方～

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

不推薦什么方法都放在constructor中去調(diào)用，由于模型加載時(shí)才會(huì)去設(shè)置當(dāng)前場(chǎng)景的id，如在constructor中初始化天空和燈光等，會(huì)出現(xiàn)無效的情況，出現(xiàn)這種情況是因?yàn)閳?chǎng)景id默認(rèn)值為1，都加載到場(chǎng)景1中去了。所以模型類提供一個(gè)場(chǎng)景加載成功的回調(diào)，在里面初始化場(chǎng)景需要的一些修飾類如燈光、天空、環(huán)境貼圖等～

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

加載獨(dú)立模型

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

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

注意上方只提供加載模型，不會(huì)主動(dòng)添加到場(chǎng)景中，需修改定制化模型參數(shù)之后手動(dòng)將其add到場(chǎng)景中～

動(dòng)畫

模型類中提供兩種執(zhí)行動(dòng)畫的方法，一種是執(zhí)行場(chǎng)景下的所有動(dòng)畫，一種是執(zhí)行某個(gè)名稱的動(dòng)畫。具體使用見下方說明～

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