Orillusion

简体中文

English

简体中文

English

Appearance

统计面板 ​

Orillusion 提供了 Stats 组件用来显示引擎当前的运行状态，目前支持包括当前运行时的 FPS 和 运行内存。

安装 ​

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

1. 通过 NPM 包安装 ​

bash
npm install @orillusion/core --save
npm install @orillusion/stats --save
npm install @orillusion/core --save
npm install @orillusion/stats --save
ts
import { Engine3D } from "@orillusion/core"
import { Stats } from "@orillusion/stats"
import { Engine3D } from "@orillusion/core"
import { Stats } from "@orillusion/stats"

2. 通过 CDN 链接引入 ​

推荐使用 ESModule 构建版本

html
<script type="module">
  import { Engine3D } from "https://unpkg.com/@orillusion/core/dist/orillusion.es.js" 
  import { Stats } from "https://unpkg.com/@orillusion/stats/dist/stats.es.js" 
</script>
<script type="module">
  import { Engine3D } from "https://unpkg.com/@orillusion/core/dist/orillusion.es.js" 
  import { Stats } from "https://unpkg.com/@orillusion/stats/dist/stats.es.js" 
</script>

或通过 <script> 加载构建 UMD 版本，在全局 Orillusion 变量中获取 Stats 模块：

html
<script src="https://unpkg.com/@orillusion/core/orillusion.umd.js"></script>
<script src="https://unpkg.com/@orillusion/stats/dist/stats.umd.js"></script>
<script>
  const {Engine3D, Stats} = Orillusion
</script>
<script src="https://unpkg.com/@orillusion/core/orillusion.umd.js"></script>
<script src="https://unpkg.com/@orillusion/stats/dist/stats.umd.js"></script>
<script>
  const {Engine3D, Stats} = Orillusion
</script>

示例 ​

一般将 Stats 组件添加到 Scene3D 对象即可：

ts
import { Scene } from "@orillusion/core"
import { Stats } from "@orillusion/stats"
let scene = new Scene3D();
scene.addComponent(Stats);
import { Scene } from "@orillusion/core"
import { Stats } from "@orillusion/stats"
let scene = new Scene3D();
scene.addComponent(Stats);


WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

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

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

await Engine3D.init()
let scene3D = new Scene3D()
// add a default skybox
scene3D.addComponent(AtmosphericComponent)
// add the performance stats panel
scene3D.addComponent(Stats)

let cameraObj = new Object3D()
let camera = cameraObj.addComponent(Camera3D)
camera.perspective(60, Engine3D.aspect, 1, 5000.0)
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 view = new View3D()
view.scene = scene3D
view.camera = camera
Engine3D.startRenderView(view)
import { Engine3D, Scene3D, Object3D, Camera3D, View3D, LitMaterial, AtmosphericComponent, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, ComponentBase } from '@orillusion/core'
import { Stats } from '@orillusion/stats'

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

await Engine3D.init()
let scene3D = new Scene3D()
// add a default skybox
scene3D.addComponent(AtmosphericComponent)
// add the performance stats panel
scene3D.addComponent(Stats)

let cameraObj = new Object3D()
let camera = cameraObj.addComponent(Camera3D)
camera.perspective(60, Engine3D.aspect, 1, 5000.0)
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 view = new View3D()
view.scene = scene3D
view.camera = camera
Engine3D.startRenderView(view)

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

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