diff --git a/assets/Athen-3D.jpg b/assets/Athen-3D.jpg deleted file mode 100644 index 5fb1df5..0000000 Binary files a/assets/Athen-3D.jpg and /dev/null differ diff --git a/assets/Athen-3D_half.jpg b/assets/Athen-3D_half.jpg deleted file mode 100644 index b27e831..0000000 Binary files a/assets/Athen-3D_half.jpg and /dev/null differ diff --git a/assets/Dubai.jpg b/assets/Dubai.jpg deleted file mode 100644 index d7afc15..0000000 Binary files a/assets/Dubai.jpg and /dev/null differ diff --git a/assets/RomeChurch-180-8K.jpg b/assets/RomeChurch-180-8K.jpg deleted file mode 100644 index a89bdd4..0000000 Binary files a/assets/RomeChurch-180-8K.jpg and /dev/null differ diff --git a/assets/bigchurch.jpg b/assets/bigchurch.jpg deleted file mode 100755 index ba41f5d..0000000 Binary files a/assets/bigchurch.jpg and /dev/null differ diff --git a/assets/in_tandem_3d360.mp4 b/assets/in_tandem_3d360.mp4 deleted file mode 100644 index fc543ad..0000000 Binary files a/assets/in_tandem_3d360.mp4 and /dev/null differ diff --git a/index.js b/index.js index 4ab1741..aa1bd96 100644 --- a/index.js +++ b/index.js @@ -34,11 +34,6 @@ import '@babylonjs/core/Materials/Node/Blocks' import losAngeles from "./assets/forFacebook-8K-LA.jpg"; import athens from "./assets/Athens-8K.jpg"; import lakeTahao from "./assets/LakeTahao-10K.jpg"; -import romeChruch from "./assets/bigchurch.jpg"; -//import athen3d from "./assets/Athen-3D.jpg"; -//import dubai from "./assets/Dubai.jpg"; -import inTandem from "./assets/in_tandem_3d360.mp4"; -//import lakeTahao4k360video from "./assets/LakeTahao-4K-360.mp4"; import lakeTahao8k360video from "./assets/LakeTahao-8K-short-360.mp4"; @@ -67,31 +62,31 @@ window.addEventListener("resize", () => { // Create the PhotoDome -// var dome = new PhotoDome( -// "sphere", -// losAngeles, -// { -// resolution: 64, -// size: 1000, -// //halfDomeMode: true, -// useDirectMapping: false -// }, -// scene -// ); -// dome.imageMode = PhotoDome.MODE_MONOSCOPIC; - -// Create the VideoDome -var videoDome = new VideoDome( - "videoSphere", - lakeTahao8k360video, +var dome = new PhotoDome( + "sphere", + losAngeles, { resolution: 64, size: 1000, - clickToPlay: true, + //halfDomeMode: true, useDirectMapping: false }, scene ); +dome.imageMode = PhotoDome.MODE_MONOSCOPIC; + +// Create the VideoDome +// var videoDome = new VideoDome( +// "videoSphere", +// lakeTahao8k360video, +// { +// resolution: 64, +// size: 1000, +// clickToPlay: true, +// useDirectMapping: false +// }, +// scene +// ); //videoDome.imageMode = VideoDome.MODE_TOPBOTTOM; vrHelper.enableInteractions(); @@ -129,6 +124,8 @@ button1.alpha = "0.5"; button1.onPointerUpObservable.add(() => { button1.thickness = 2; button2.thickness = 0; + button3.thickness = 0; + button4.thickness = 0; transition(losAngeles); }); stackPanel.addControl(button1); @@ -152,13 +149,15 @@ button2.alpha = "0.5"; button2.onPointerUpObservable.add(() => { button1.thickness = 0; button2.thickness = 2; + button3.thickness = 0; + button4.thickness = 0; transition(athens); }); stackPanel.addControl(button2); const button3 = Button.CreateSimpleButton( "button3", - "3D 360 Photo" + "Lake Tahoe" ); button3.width = "200px"; button3.height = "100px"; @@ -176,10 +175,36 @@ button3.onPointerUpObservable.add(() => { button1.thickness = 0; button2.thickness = 0; button3.thickness = 2; - transition(athen3d); + button4.thickness = 0; + transition(lakeTahao); }); stackPanel.addControl(button3); +const button4 = Button.CreateSimpleButton( + "button4", + "360 Video" +); +button4.width = "200px"; +button4.height = "100px"; +button4.paddingBottom ="30px"; +button4.cornerRadius="10"; +button4.shadowColor="black"; +button4.shadowOffsetX="2"; +button4.shadowOffsetY="2"; +button4.shadowBlur="30"; +button4.color = "white"; +button4.thickness = 0; +button4.background = "gray"; +button4.alpha = "0.5"; +button4.onPointerUpObservable.add(() => { + button1.thickness = 0; + button2.thickness = 0; + button3.thickness = 0; + button4.thickness = 2 + transitionVideo(lakeTahao); +}); +stackPanel.addControl(button4); + const transition = (image) => { let anim = scene.beginDirectAnimation( dome.mesh, @@ -191,6 +216,17 @@ const transition = (image) => { anim.onAnimationEnd = () => loadNewTexture(image); }; +const transitionVideo = (video) => { + let anim = scene.beginDirectAnimation( + dome.mesh, + [fadeOutAnimation], + 0, + 120, + false + ); + anim.onAnimationEnd = () => loadNewVideoTexture(video); +}; + const loadNewTexture = (image) => { const newTexture = new Texture(image, scene); newTexture.onLoadObservable.add(() => { @@ -220,6 +256,47 @@ const loadNewTexture = (image) => { }); }; +const loadNewVideoTexture = (video) => { + const newTexture = new Texture(video, scene); + newTexture.onLoadObservable.add(() => { + dome.dispose(); + + // Create a new dome with the new texture + // dome = new PhotoDome( + // "sphere", + // image, + // { + // resolution: 128, + // size: 1000, + // useDirectMapping: false + // }, + // scene + // ); + // Create the VideoDome + dome = new VideoDome( + "videoSphere", + lakeTahao8k360video, + { + resolution: 64, + size: 1000, + clickToPlay: true, + useDirectMapping: false + }, + scene + ); + + dome.mesh.material.alpha = 0; + dome.imageMode = PhotoDome.MODE_TOPBOTTOM; + scene.beginDirectAnimation( + dome.mesh, + [fadeInAnimation], + 0, + 120, + false + ); + }); +}; + const fadeOutAnimation = new Animation( "fadeOut", "material.alpha",