Orillusion

Appearance

统计面板 ​

Orillusion 提供了 Stats 组件用来显示引擎当前的运行状态，目前支持包括当前运行时的 FPS 和 运行内存， 一般添加给 Scene3D 对象即可。

跟引擎安装方法一致，我们可以通过 NPM 和 CDN 链接两种方式来引入统计插件:

bash
npm install @orillusion/core --save
npm install @orillusion/stats --save

引入模块

ts
import { Scene3D } from "@orillusion/core"
import { Stats } from "@orillusion/stats"

let scene = new Scene3D();
scene.addComponent(Stats);

或全局加载 <script>，在全局 Orillusion 变量中获取 Stats 模块：

html
<script src="https://cdn.orillusion.com/orillusion.umd.js"></script>
<script src="https://cdn.orillusion.com/stats.umd.js"></script>
ts
const { Scene3D, Stats } = Orillusion 

let scene = new Scene3D();
scene.addComponent(Stats);


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

<
ts
import {
    Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, LitMaterial, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, ComponentBase
} from "@orillusion/core";
import {Stats} from  '@orillusion/stats';

async function demo() {
    await Engine3D.init({});
    let scene3D = new Scene3D();
    // 添加统计面板
    scene3D.addComponent(Stats);
    let cameraObj = new Object3D();
    let camera = cameraObj.addComponent(Camera3D);
    camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
    Camera3D.mainCamera = camera
    cameraObj.addComponent(HoverCameraController);
    scene3D.addChild(cameraObj);

    let light: Object3D = new Object3D();
    let component = light.addComponent(DirectLight);
    component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
    component.intensity = 1;
    scene3D.addChild(light);

    const obj = new Object3D();
    let mr = obj.addComponent(MeshRenderer);
    mr.geometry = new BoxGeometry(5, 5, 5);
    mr.material = new LitMaterial();

    obj.addComponent(RotateScript)
    scene3D.addChild(obj);

    let renderJob = new ForwardRenderJob(scene3D);
    Engine3D.startRender(renderJob);
}

class RotateScript extends ComponentBase {
    protected update() {
        this.object3D.rotationY += 1;
    }
}

demo();

默认窗口内会在左上方出现一个矩形悬浮面板，如果需要修改位置，可以通过修改 stats.container 的 style 属性进行设置，或者添加 css 对 .stats class 进行设置。

ts
  let stats = scene.addComponent(Stats);
  stats.container.style.left = '10px';
  stats.container.style.top = '10px';