I am new to babylonJS. I am trying to render 3d models from glb files. But the scene itself is upside-down (Object, camera everything).
Below is my code.
var createScene = async function () {
var scene = new Scene(engine);
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0.9);
this.camera = new BABYLON.ArcRotateCamera(
'camera',
Math.PI / 2,
Math.PI / 2,
0,
new BABYLON.Vector3(),
this.scene
);
this.camera.fov = 25;
this.camera.speed = 0.1853;
this.camera.lowerRadiusLimit = 1.25;
this.camera.useAutoRotationBehavior = true;
this.camera.attachControl(this.canvas, true);
scene.activeCamera = this.camera;
scene.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(
'https://playground.babylonjs.com/textures/environment.dds',
scene
);
scene.createDefaultSkybox(
scene.environmentTexture,
true,
(scene.activeCamera.maxZ - scene.activeCamera.minZ) / 2,
0.3,
false
);
const light = new BABYLON.HemisphericLight(
'light',
new BABYLON.Vector3(0, 1, 0),
scene
);
light.intensity = 0.7;
var advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI(
'UI',
true,
scene
);
const fullScreenBtn = GUI.Button.CreateSimpleButton('but1', 'Full screen');
fullScreenBtn.width = '200px';
fullScreenBtn.height = '60px';
fullScreenBtn.color = 'white';
fullScreenBtn.background = 'green';
fullScreenBtn.top = this.canvas.height / 0;
fullScreenBtn.left = window.innerWidth / 0;
fullScreenBtn.onPointerUpObservable.add(function () {
scene.getEngine().switchFullscreen(false);
fullScreenBtn.isVisible = false;
});
advancedTexture.addControl(fullScreenBtn);
SceneLoader.ImportMesh(
'',
'',
'https://models.babylonjs.com/boombox.glb',
scene
);
return scene;
};