2. 加载一个 3D 模型

上次修改时间:2021-05-29 00:11:76
/**
 * @title glTF of Duck
 * @category Mesh
 */
import { AmbientLight, WebGLEngine, Camera, Vector3, DirectLight } from 'oasis-engine';
import { OrbitControl } from "@oasis-engine/controls";

// 创建画布 
const engine = new WebGLEngine("canvas");
// 设置屏幕适配
engine.canvas.resizeByClientSize();

const rootEntity = engine.sceneManager.activeScene.createRootEntity();

const cameraEntity = rootEntity.createChild('camera');
cameraEntity.addComponent(Camera);
cameraEntity.transform.setPosition(3, 3, 3);
cameraEntity.transform.lookAt(new Vector3(0, 0, 0));
cameraEntity.addComponent(OrbitControl);

rootEntity.addComponent(AmbientLight).intensity = 0.7;
rootEntity.addComponent(DirectLight).intensity = 0.3;

engine.resourceManager.load(
  'https://gw.alipayobjects.com/os/OasisHub/267000040/9994/%25E5%25BD%2592%25E6%25A1%25A3.gltf',
).then(gltf => {
  rootEntity.addChild(gltf.defaultSceneRoot);
});

engine.run();

基本使用

加载一个 3D 模型只要调用引擎 ResourceManager 实例的 load 方法即可,如下:

engine.resourceManager.load('{gltf source}').then(gltf => {
  entity.addChild(gltf.defaultSceneRoot);
});

如果在一个异步函数体中使用,可以采用 async/await 语法:

const gltf = await this.engine.resourceManager.load('{gltf source}');

entity.addChild(gltf.defaultSceneRoot);

注意:由于 glTF 2.0 的默认材质为 PBR 材质,PBR 材质默认是需要光照的运算模型,所以场景中必须要添加光照,否则会得到黑色的反射结果。