跳到主要内容

舞台

要唱戏先搭台

舞台（Stage）是 Tinoe 内场景的容器，同时也向用户提供了大量的引擎能力。

示例​

使用​

创建 Stage 实例需要传入canvas以及必要的 webGL 参数，不传入canvas的情况 Tinoe 内部会自动创建，参数说明详见 API

import { Stage } from 'tinoe';

const stage = new Stage({ canvas });

常用能力​

场景渲染​

Stage是场景运行的关键，调用stage.run方法会开启渲染：

stage.run(scene);

需要注意的是stage.run提供的是单帧渲染，如果需要每帧持续绘制，需要使用Stage.loop方法：

stage.loop(scene);

loop 方法还可以接收一个渲染函数，方便控制每帧渲染逻辑：

stage.loop((deltaTime: number) => {
  stage.setViewport(x, y, w, z);
  stage.run(scene1);
});

插件​

Tinoe引擎提供丰富的插件能力，部分插件内置，可以通过Stage简单启用，另一部分插件由我们的插件库@tinoe/glk提供。

资源加载​

Tinoe 的资源加载器放在了插件库内，包含有 2D 纹理、纹理盒、GLTF 模型以及图片的加载，加载过程是异步的。

  • 2D 纹理
import { Texture2DLoader } from '@tinoe/glk';

// 同时提供了loadAll方法方便并行加载
const texture2d = await Texture2DLoader.load('/path/to/texture_2d_source');
  • 纹理盒
import { TextureCubeLoader } from '@tinoe/glk';

const textureCube = await TextureCubeLoader.load([
  face: TextureCubeFace.PositiveX,
  url: 'path/to/facePosX'
],[
  face: TextureCubeFace.PositiveY,
  url: 'path/to/facePosY'
],[
  face: TextureCubeFace.PositiveZ,
  url: 'path/to/facePosZ'
],[
  face: TextureCubeFace.NegativeX,
  url: 'path/to/faceNegX'
],[
  face: TextureCubeFace.NegativeY,
  url: 'path/to/faceNegY'
],[
  face: TextureCubeFace.NegativeZ,
  url: 'path/to/faceNegZ'
]);
  • GLTF 模型
import { GLTFLoader } from '@tinoe/glk';
const model = await GLTFLoader.load('/path/to/gltf');
  • 图片
import { ImageLoader } from '@tinoe/glk';
const img = await ImageLoader.load({
  url: 'path/to/image',
  crossOrigin: 'Anonymous', // 跨域头
});

交互​

内置插件，默认开启

stage.enableInteraction();

详见 这里

阴影​

内置插件，默认关闭

stage.enableShadow();

详见 这里

相机控制​

内置插件，默认关闭

stage.enableControl();

详见 这里

GPU 拾取​

内置插件，默认关闭，内部默认使用射线拾取，GPU 拾取成本会更高

stage.enablePicker();

详见 这里

对于某些复杂场景可能需要获取到插件实例：

// 开启时获取
const pluginX = stage.engine.pluginManager.addPlugin(XPlugin);
// 后续获取
const pluginX = stage.engine.pluginManager.getPlugin(XPlugin);

画布​

Stage还提供了几个简单的 API 用于操作画布，比如：

stage.resize();
// 设置dpr，默认为1
stage.setPixelRation();

API​

Stage

Q&A​