Skip to content

Transform

Transform is a built-in basic Component, which will be added on all Object3D by default, used to control the position, scale and rotation of the container coordinate parameters.


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

<
ts
import { Engine3D, Scene3D, Object3D, Camera3D, AtmosphericComponent, LitMaterial, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, RGBEParser, Color, Vector3, View3D } from '@orillusion/core';
import * as dat from 'dat.gui';

// init Engine3D
await Engine3D.init();

// create a root Scene3D
let scene3D: Scene3D = new Scene3D();
// add an Atmospheric sky enviroment
let sky = scene3D.addComponent(AtmosphericComponent);
sky.sunY = 0.6;
// create cmaera object
let cameraObj: Object3D = new Object3D();
// add Camera3D
let camera = cameraObj.addComponent(Camera3D);
// use a perspective view
camera.perspective(60, Engine3D.aspect, 1, 5000.0);
// set camera controller
let controller = camera.object3D.addComponent(HoverCameraController);
controller.setCamera(0, 0, 15);
// add camera to scene
scene3D.addChild(cameraObj);
// add a light object
let light: Object3D = new Object3D();
// add a dir light component
let component: DirectLight = light.addComponent(DirectLight);
// change light direction & color
light.rotationX = 45;
light.rotationY = 30;
component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
component.intensity = 10;
// add light to scene
scene3D.addChild(light);
// create a object
const obj: Object3D = new Object3D();
// add MeshRenderer
let mr: MeshRenderer = obj.addComponent(MeshRenderer);
// set geometry
mr.geometry = new BoxGeometry(5, 5, 5);
// set material
mr.material = new LitMaterial();
// set poisiton and rotation
obj.localPosition = new Vector3(0, 0, 0);
obj.localRotation = new Vector3(0, 45, 0);
// add to scene
scene3D.addChild(obj);

// create a view with target scene and camera
let view = new View3D();
view.scene = scene3D;
view.camera = camera;
// start render
Engine3D.startRenderView(view);

const GUIHelp = new dat.GUI();
let f = GUIHelp.addFolder('Box Transform');
f.add(obj.transform, 'enable');
f.add(obj.transform, 'x', -10.0, 10.0, 0.01);
f.add(obj.transform, 'y', -10.0, 10.0, 0.01);
f.add(obj.transform, 'z', -10.0, 10.0, 0.01);
f.add(obj.transform, 'rotationX', 0.0, 360.0, 0.01);
f.add(obj.transform, 'rotationY', 0.0, 360.0, 0.01);
f.add(obj.transform, 'rotationZ', 0.0, 360.0, 0.01);
f.add(obj.transform, 'scaleX', 0.0, 2.0, 0.01);
f.add(obj.transform, 'scaleY', 0.0, 2.0, 0.01);
f.add(obj.transform, 'scaleZ', 0.0, 2.0, 0.01);
f.open();

Position

The position of the node relative to the parent container

ts
let obj = new Object3D();
// The frist method (Recommended)
obj.x = 0;
obj.y = 0;
obj.z = 0;
// Or
obj.transform.x = 0;
obj.transform.y = 0;
obj.transform.z = 0;
// The second method
obj.transform.localPosition.set(0,0,0);
// The third method
obj.transform.localPosition = new Vector3(0,0,0);

Rotation

The rotation of the node relative to the parent container

ts
let obj = new Object3D();
// The frist method (Recommended)
obj.rotationX = 0;
obj.rotationY = 0;
obj.rotationZ = 0;
// Or
obj.transform.rotationX = 0;
obj.transform.rotationY = 0;
obj.transform.rotationZ = 0;
// The second method
obj.transform.localRotation.set(0,0,0);
// The third method
obj.transform.localRotation = new Vector3(0,0,0);

Scale

The scale of the node relative to the parent container

ts
let obj = new Object3D();
// The frist method
obj.scaleX = 1;
obj.scaleY = 1;
obj.scaleZ = 1;
// Or
obj.transform.scaleX = 1;
obj.transform.scaleY = 1;
obj.transform.scaleZ = 1;
// The second method
obj.transform.localScale.set(1,1,1);
// The third method
obj.transform.localScale = new Vector3(0,0,0);

See more usages in Transform API