快捷導(dǎo)航

three.js?Mool3D模型類(lèi)的使用

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

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

Model類(lèi)

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

場(chǎng)景加載

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

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

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

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

[
  {
    "name": "mool", //名稱(chēng)
    "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)在畫(huà)面上，如果我們需要修改場(chǎng)景模型的材質(zhì)等操作怎么做呢？ 當(dāng)然模型類(lèi)中也考慮到這一點(diǎn)，提供了一個(gè)回調(diào)處理解碼的模型，具體怎么操作見(jiàn)下方～

constructor(options) {
    super(options);
    this.initModel();
    //這是在加載場(chǎng)景模型之前執(zhí)行的回調(diào)，所以建議放在初始化類(lèi)時(shí)完成回調(diào)的注冊(cè)，這樣會(huì)在模型加載過(guò)程中遞歸去修改模型
    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)無(wú)效的情況，出現(xiàn)這種情況是因?yàn)閳?chǎng)景id默認(rèn)值為1，都加載到場(chǎng)景1中去了。所以模型類(lèi)提供一個(gè)場(chǎng)景加載成功的回調(diào)，在里面初始化場(chǎng)景需要的一些修飾類(lèi)如燈光、天空、環(huán)境貼圖等～

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

加載獨(dú)立模型

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

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

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

動(dòng)畫(huà)

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

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