Skip to content
本页内容

坐标变换

Transform 组件是系统内置的基础 组件,默认会添加在所有 Object3D 上,用来控制容器的位置缩放旋转坐标参数。



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

<
ts
import { GUIHelp, Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, LitMaterial, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, RGBEParser, Color, Vector3 } from "@orillusion/core";
async function demo() {
	// 初始化引擎
	await Engine3D.init({});
	GUIHelp.init();
	// 新建场景根节点
	let scene3D: Scene3D = new Scene3D();
	// 新建摄像机实例
	let cameraObj: Object3D = new Object3D();
	let camera = cameraObj.addComponent(Camera3D);
	// 调整摄像机视角
	camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
	// 设置相机位置
	let controller = camera.object3D.addComponent(HoverCameraController);
	controller.setCamera(0, 0, 15);
	// 添加相机节点
	scene3D.addChild(cameraObj);
	// 新建光照
	let light: Object3D = new Object3D();
	// 添加直接光组件
	let component: DirectLight = light.addComponent(DirectLight);
	// 调整光照参数
	light.rotationX = 45;
	light.rotationY = 30;
	component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
	component.intensity = 1;
	// 添加光照对象
	scene3D.addChild(light);
	// 新建对象
	const obj: Object3D = new Object3D();
	GUIHelp.addFolder('Box Transform');
	GUIHelp.add(obj.transform, 'x', -10.0, 10.0, 0.01);
	GUIHelp.add(obj.transform, 'y', -10.0, 10.0, 0.01);
	GUIHelp.add(obj.transform, 'z', -10.0, 10.0, 0.01);
	GUIHelp.add(obj.transform, 'rotationX', 0.0, 360.0, 0.01);
	GUIHelp.add(obj.transform, 'rotationY', 0.0, 360.0, 0.01);
	GUIHelp.add(obj.transform, 'rotationZ', 0.0, 360.0, 0.01);
	GUIHelp.add(obj.transform, 'scaleX', 0.0, 2.0, 0.01);
	GUIHelp.add(obj.transform, 'scaleY', 0.0, 2.0, 0.01);
	GUIHelp.add(obj.transform, 'scaleZ', 0.0, 2.0, 0.01);
	GUIHelp.endFolder();
	// 为对象添 MeshRenderer
	let mr: MeshRenderer = obj.addComponent(MeshRenderer);
	// 设置几何体
	mr.geometry = new BoxGeometry(5, 5, 5);
	// 设置材质
	mr.material = new LitMaterial();
	// 设置位置和旋转
	obj.localPosition = new Vector3(0, 0, 0);
	obj.localRotation = new Vector3(0, 45, 0);
	// 添加对象
	scene3D.addChild(obj);
	// 新建前向渲染业务
	let renderJob: ForwardRenderJob = new ForwardRenderJob(scene3D);
	// 开始渲染
	Engine3D.startRender(renderJob);

	Object.keys(GUIHelp.gui.__folders).map((name) => {
		if (name !== 'Box Transform')
			GUIHelp.gui.removeFolder(GUIHelp.gui.__folders[name])
		else
			GUIHelp.gui.__folders[name].open()
	})
}
demo();

Position

场景节点相对父容器的位置

ts
let obj = new Object3D();
//第一种用法(推荐用法)
obj.x = 0;
obj.y = 0;
obj.z = 0;
// or
obj.transform.x = 0;
obj.transform.y = 0;
obj.transform.z = 0;
//第二种用法
obj.transform.localPosition.set(0,0,0);
//第三种用法
obj.transform.localPosition = new Vector3(0,0,0);

Rotation

场景节点相对父容器的旋转

ts
let obj = new Object3D();
//第一种用法(推荐用法)
obj.rotationX = 0;
obj.rotationY = 0;
obj.rotationZ = 0;
// or
obj.transform.rotationX = 0;
obj.transform.rotationY = 0;
obj.transform.rotationZ = 0;
//第二种用法
obj.transform.localRotation.set(0,0,0);
//第三种用法
obj.transform.localRotation = new Vector3(0,0,0);

Scale

场景节点相对父容器的缩放

ts
let obj = new Object3D();
//第一种用法
obj.scaleX = 1;
obj.scaleY = 1;
obj.scaleZ = 1;
// or
obj.transform.scaleX = 1;
obj.transform.scaleY = 1;
obj.transform.scaleZ = 1;
//第二种用法
obj.transform.localScale.set(1,1,1);
//第三种用法
obj.transform.localScale = new Vector3(0,0,0);

其它用法详见 Transform API