Orillusion

Appearance

本页内容

Scene3D ​

Scene3D 继承自 Object3D，拥有 Object3D 相同的属性和方法，不同的是 Scene3D 是引擎渲染根节点，是场景树的最高层级，所有想要被渲染的节点必须添加到 Scene3D 或 Scene3D 的子节点中。

Scene3D

Scene3D 主要功能：

  1. Scene3D 中定义了场景的天空盒和环境光贴图。
  2. Scene3D 可以用来控制和管理场景树中的节点，例如：添加、删除、查找节点。

基础用法 ​

ts
await Engine3D.init();
// 指定天空盒子大小
Engine3D.setting.sky.defaultFar = 5000;
// 创建场景
let scene = new Scene3D();
// 添加一个节点
let obj = new Object3D();
scene.addChild(obj);
// 添加相机节点
let camera = new Object3D();
camera.addComponent(Camera3D);
scene.addChild(camera);
// 开启渲染循环
let renderJob = new ForwardRenderJob(this.scene);
Engine3D.startRender(renderJob);

// 移除一个节点
scene.removeChild(obj);

天空盒 ​

默认配置下，引擎会创建一个 AtmosphericScatteringSky 天空盒，可以通过 envMap 设置太阳的位置等参数。


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

<
ts
import { Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, GUIHelp, AtmosphericSky} from "@orillusion/core";

async function demo() {
	// initializa engine
	await Engine3D.init();
    GUIHelp.init();
	// 创建 Scene3D，使用默认的 AtmosphericSky 盒子
	let scene3D:Scene3D = new Scene3D();
    // 显示 AtmosphericSky 设置菜单
    scene3D.debugAtomSky();
	// 环境光整体强度
	scene3D.exposure = 1
    // 设置太阳位置
    let sun = scene3D.envMap as AtmosphericSky
    sun.sunX = 0.8;
	
	let cameraObj:Object3D = new Object3D();
	let camera = cameraObj.addComponent(Camera3D);
	camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
	scene3D.addChild(cameraObj);
	let renderJob:ForwardRenderJob = new ForwardRenderJob(scene3D);
	Engine3D.startRender(renderJob);
}

demo();

引擎默认使用天空盒贴图做为场景的环境光，通过 Scene3D 对象的 exposure 属性来调整环境光的曝光度。

ts
let scene = new Scene3D();
scene.exposure = 1.5; //调整环境光曝光度, 默认值1

如果想要自定义天空盒材质纹理，可以通过更新 Scene3D 对象的 envMap 属性来设置自定义天空盒。

1. 纯色背景 ​

可以通过 SolidColorSky 创建一个纯色的背景贴图:

ts
import {Scene3D, SolidColorSky, Color} from '@orillusion/core';

let scene = new Scene3D();
// 设置一个纯色的背景贴图
scene.envMap = new SolidColorSky(new Color(0.5, 1.0, 0.8, 1));

2. 十字天空盒 ​

可以通过加载 十字立方贴图 设置天空盒:

ts
let textureCube = Engine3D.res.loadTextureCube('path/to/sky.png')
// 或加载独立的6张立方贴图
textureCube = Engine3D.res.loadTextureCube([
    'path/to/sky1.png',
    'path/to/sky2.png',
    'path/to/sky3.png',
    'path/to/sky4.png',
    'path/to/sky5.png',
    'path/to/sky6.png'
])
// 设置天空盒
scene.envMap = textureCube;

目前十字天空盒只支持 LDR 普通格式的图片。

3. 全景天空盒 ​

引擎还支持设置 全景图（equirectangular） 类型的天空盒。我们可以通过内置的 res 快速加载普通 RGBA 格式的 LDR 图片， 也支持加载 RGBE 格式的 HDR 图片:

ts
// 普通全景贴图
let skyTexture = Engine3D.res.loadLDRTextureCube('path/to/sky.png');
// HDR全景贴图
skyTexture = Engine3D.res.loadHDRTextureCube('path/to/sky.hdr');
// 设置天空盒
scene.envMap = skyTexture;

4. 透明背景 ​

如果想显示透明背景，可以调用 hideSky 隐藏天空盒，注意需要也需要配置 Canvas 透明:

ts
// 初始化引擎，使用透明的 Canvas 配置
await Engine3D.init({
    canvasConfig:{
        alpha: true,
        zIndex: 1
    }
});
let scene = new Scene3D();
// 隐藏天空盒
scene.hideSky();

更多详细用法请参考 Scene3D