欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

three.js?Mool3D模型類的使用

 更新時間：2023年03月31日 16:33:09   作者：Mool  
這篇文章主要為大家介紹了three.js?Mool3D模型類的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

Model類

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

場景加載

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

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

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

//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"
      }
    ]
  }
  ......
]

遞歸處理場景模型

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

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

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

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:模型動畫
     ...模型自定義修改
  }
);

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

動畫

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

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

結語

本文為Mool3D引擎下的模型類的介紹和使用，主要設計思想是通過配置文件完成場景加載，提供自定義模型的加載和場景動畫的控制。

更多關于three.js Mool3D模型類的資料請關注腳本之家其它相關文章！

相關文章

最新評論