Hey! for some reason old scene meshes still exist on a newly rendered one, is this normal?
My goal is when you click on a mesh on scene1 it loads scene2, I created both so the transition is fast
this is the code I’m using:
var canvas = document.getElementById("renderCanvas");
var engine = null;
var sceneToRender = null;
var createDefaultEngine = function () { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: false, stencil: true, disableWebGL2Support: false }); };
var fadeLevel = 1;
function createWelcomeScene () {
// This creates a basic Babylon Scene object (non-mesh)
let scene = new BABYLON.Scene(engine);
// This creates and positions a free camera (non-mesh)
let camera = new BABYLON.ArcRotateCamera("camera1", 0, Math.PI / 4.0, 4, new BABYLON.Vector3(0, 0, 0), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);
camera.upperRadiusLimit = 25;
camera.lowerRadiusLimit = 0.1;
camera.lowerBetaLimit = 1.2;
camera.position = new BABYLON.Vector3(-24, 2.74, -0.21);
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0;
var mat = new BABYLON.StandardMaterial("mat", scene);
mat.reflectionTexture = new BABYLON.Texture("558.jpg", scene, true);
mat.reflectionTexture.coordinatesMode = BABYLON.Texture.EQUIRECTANGULAR_MODE;
// Skybox
var skybox = BABYLON.Mesh.CreateBox("skyBox", 500.0, scene);
camera.lockedTarget = skybox;
var skyboxMaterial = new BABYLON.StandardMaterial("mat", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.Texture("558.jpg", scene, true);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.FIXED_EQUIRECTANGULAR_MODE;
skybox.material = skyboxMaterial;
skyboxMaterial.disableLighting = true;
BABYLON.Effect.ShadersStore["fadePixelShader"] =
"precision highp float;" +
"varying vec2 vUV;" +
"uniform sampler2D textureSampler; " +
"uniform float fadeLevel; " +
"void main(void){" +
"vec4 baseColor = texture2D(textureSampler, vUV) * fadeLevel;" +
"baseColor.a = 1.0;" +
"gl_FragColor = baseColor;" +
"}";
var postProcess = new BABYLON.PostProcess("Fade", "fade", ["fadeLevel"], null, 1.0, camera);
postProcess.onApply = (effect) => {
effect.setFloat("fadeLevel", fadeLevel);
};
/*/ var advancedTextures = [
BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, RoomScene)
];/*/
var animation = new BABYLON.Animation("myAnimation", "fade", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
var keys = [];
keys.push({
frame: 0,
value: fadeLevel
});
keys.push({
frame: 30,
value: 0
});
animation.setKeys(keys);
scene.activeCamera.animations.push(animation);
var button = BABYLON.GUI.Button.CreateSimpleButton("but", "Scene " + 0);
button.width = 0.2;
button.height = "40px";
button.color = "white";
button.background = "green";
// button.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP
// advancedTextures[0].addControl(button);
/*/ button.onPointerUpObservable.add(function () {
const sc = clicks % 2 === 0 ? WelcomeScene : RoomScene;
sc.beginAnimation(sc.activeCamera, 0, 30, false, 3, () => {
clicks++;
button.textBlock.text = "Scene " + clicks % 2;
window.setTimeout(() => sc.activeCamera.fov = 0.8, 0);
});
});/*/
/*/ scene.executeOnceBeforeRender(function(){
fadeInEffect();
});/*/
var redMat = new BABYLON.StandardMaterial("redMat", scene);
redMat.ambientColor = new BABYLON.Color3(1, 0, 0);
var door1 = BABYLON.MeshBuilder.CreatePlane("Door1", {size: 100}, scene);
door1.material = redMat;
door1.position = new BABYLON.Vector3(240, 0, 0);
door1.billboardMode = BABYLON.AbstractMesh.BILLBOARDMODE_ALL;
door1.actionManager = new BABYLON.ActionManager(scene);
door1.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(
{
trigger: BABYLON.ActionManager.OnPickTrigger,
},
function () {
if(sceneID == 0){
sceneID = 1;
}
console.log('Going to the Room');
}
)
);
return scene;
};
function createRoomScene() {
let scene = new BABYLON.Scene(engine);
let camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
camera.fov = 1.2;
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0;
var videoDome = new BABYLON.VideoDome(
"videoDome",
["room.mp4"],
{
resolution: 32,
clickToPlay: true
},
scene
);
var redMat = new BABYLON.StandardMaterial("redMat", scene);
redMat.ambientColor = new BABYLON.Color3(1, 0, 0);
var leftSideMnqn = BABYLON.MeshBuilder.CreateBox("B1", {size: 100, height: 1000}, scene);
leftSideMnqn.material = redMat;
leftSideMnqn.position = new BABYLON.Vector3(-1000, -180, 180);
leftSideMnqn.visibility = 0;
leftSideMnqn.actionManager = new BABYLON.ActionManager(scene);
leftSideMnqn.actionManager.registerAction(
new BABYLON.ExecuteCodeAction(
{
trigger: BABYLON.ActionManager.OnPickTrigger,
},
function () {
console.log('Manq1');
}
)
);
// door1.billboardMode = BABYLON.AbstractMesh.BILLBOARDMODE_ALL;
return scene;
};
var engine;
var scene;
var sceneID = 1;
var WelcomeScene = null;
var RoomScene = null;
initFunction = async function () {
var asyncEngineCreation = async function () {
try {
return createDefaultEngine();
} catch (e) {
console.log("the available createEngine function failed. Creating the default engine instead");
return createDefaultEngine();
}
}
engine = await asyncEngineCreation();
if (!engine) throw 'engine should not be null.';
WelcomeScene = createWelcomeScene();
RoomScene = createRoomScene();
// scene = RoomScene();
};
initFunction().then(() => {
sceneToRender = scene;
engine.runRenderLoop(function () {
// if (sceneToRender && sceneToRender.activeCamera) {
switch (sceneID) {
case 0:
if(WelcomeScene == null || WelcomeScene.isDisposed){
WelcomeScene = createWelcomeScene();
}
WelcomeScene.render();
break
case 1:
RoomScene.render();
break;
}
// }
});
});
// Resize
window.addEventListener("resize", function () {
engine.resize();
});