I have a Viewer
class that will initialize SceneHelper
when instantiated, this class will add some GUI to Scene
export class Viewer {
engine: Engine;
private _engineOption: EngineOptions = {
preserveDrawingBuffer: true,
stencil: true,
};
private _sceneHelper: SceneHelper;
constructor(
public canvas: HTMLCanvasElement,
private preview = false,
private _option = { defaultLight: false }
) {
this.init();
this._regiser();
this.render();
}
init() {
this._initEngine();
this._initScene();
this._initCamera();
this._initSceneHelper();
}
render() {
this.engine.runRenderLoop(() => {
if (this.Reading) return;
this.sceneControl.render();
if (this._sceneHelper) this._sceneHelper.render();
});
}
private _regiser() {
window.addEventListener("resize", () => {
this.setSize();
});
}
private _initEngine() {
const engine = new Engine(this.canvas, true, this._engineOption);
this.engine = engine;
}
private _initScene() {
this.sceneControl = new SceneControl(this.engine);
}
private _initCamera() {
this.cameraControl = new CameraControl(this.Scene, this.canvas);
}
private _initLight() {
const light = new BHLight("global-light", new Vector3(1, 1, 1), this.Scene);
}
private _initSceneHelper() {
this._sceneHelper = new SceneHelper(this.engine, this.Camera);
this.Scene.onAfterRenderObservable.add(() => {
const activeCamera = this._sceneHelper.Scene
.activeCamera as ArcRotateCamera;
activeCamera.inertialAlphaOffset = this.Camera.inertialAlphaOffset;
activeCamera.inertialBetaOffset = this.Camera.inertialBetaOffset;
});
}
}
export class SceneHelper {
private _scene: Scene;
private _cameraHeight = 3.2;
private ellipses: Ellipse[] = [];
constructor(private engine: Engine, private camera: ArcRotateCamera) {
this.init();
this.initViewHelper();
}
public render() {
if (this._scene.activeCamera) {
this._scene.render();
}
}
private init() {
const scene = new Scene(this.engine);
scene.autoClear = false;
scene.ambientColor = Color3.White();
scene.createDefaultCamera(true, true, true);
scene.useRightHandedSystem = true;
const activeCamera = scene.activeCamera as ArcRotateCamera;
activeCamera.viewport = new Viewport(0.85, 0.85, 0.15, 0.15);
activeCamera.detachControl();
activeCamera.target = Vector3.Zero();
activeCamera.setPosition(new Vector3(0, 0, this._cameraHeight));
this._scene = scene;
}
private initViewHelper() {
const height = 1;
const option = { diameter: 0.05, height, tessellation: 96 };
const root = new TransformNode("viewerHelper", this._scene);
const Red = "#ff3653";
const Green = "#8adb00";
const Blue = "#2c8fff";
//x-line
const xl = CylinderBuilder.CreateCylinder("x-line", option, this._scene);
xl.position.x += height / 2;
xl.rotation.z = Math.PI / 2;
xl.parent = root;
const xMlt = new StandardMaterial("", this._scene);
xMlt.ambientColor = Color3.FromHexString(Red);
xl.material = xMlt;
const yl = CylinderBuilder.CreateCylinder("y-line", option, this._scene);
const yMlt = new StandardMaterial("", this._scene);
yMlt.ambientColor = Color3.FromHexString(Green);
yl.material = yMlt;
yl.position.y += height / 2;
const zl = CylinderBuilder.CreateCylinder("z-line", option, this._scene);
const zMlt = new StandardMaterial("", this._scene);
zMlt.ambientColor = Color3.FromHexString(Blue);
zl.material = zMlt;
zl.rotation.x = Math.PI / 2;
zl.position.z += height / 2;
const advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI(
"UI",
true,
this._scene
);
const opt = {
height,
cameraHeight: this._cameraHeight,
scene: this._scene,
camera: this.camera,
};
advancedTexture.addControl(GUI)
}
}