Oasis Engine

案例

换装 Spine Hack Slot Texture

换人物 Spine Change Skin

歌词播放Text KTV Subtitle

随机运动 Particle Sprite Sheet

旋转的鸭子 GLTF Basic

画画 Draw Lines

1. 安装

Engine

npm install --save oasis-engine

Engine toolkit

npm install --save oasis-engine-toolkit

2. 引入

Engine

import{ WebGLEngine, Camera }from'oasis-engine';

Engine toolkit

import{ OrbitControl, Stats }from'oasis-engine-toolkit';

创建画布

在 HTML 中插入一个 <canvas> 标签，指定一个 id：

<canvas id="canvas" style="width: 500px; height: 500px"/>

创建 WebGLEngine 实例的时候会自动创建一个 WebCanvas 实例：

会根据 canvas 元素的 css 样式自动适配

const engine = new WebGLEngine("canvas");
engine.canvas.resizeByClientSize();

创建场景根节点

const scene = engine.sceneManager.activeScene;
const rootEntity = scene.createRootEntity('root');

创建一个相机实体

let cameraEntity = rootEntity.createChild('camera_entity');

cameraEntity.transform.position = new Vector3(0, 5, 10);
cameraEntity.transform.lookAt(new Vector3(0, 0, 0));

let camera = cameraEntity.addComponent(Camera);

背景

engine.resourceManager
    .load([
      {
        url: "https://gw.alipayobjects.com/mdn/rms_2e421e/afts/img/A*BcWiRYM7hroAAAAAAAAAAAAAARQnAQ",
        type: AssetType.Texture2D,
      },
    ])
    .then(([texture]) => {
      console.log(texture);
      background.texture = texture as unknown as Texture2D;
    });

  background.mode = BackgroundMode.Texture;