지난 그라운드 배경에 이어서,
https://itadventure.tistory.com/713
바빌론JS - 그라운드 배경
지난 게시글에서는 HDRI를 큐브맵으로 전환, 가상공간 배경으로 활용해보았는데요.https://itadventure.tistory.com/712 CUBEMAP" data-og-description="HDRI 텍스쳐는 가상공간에서 360도 전 방향의 배경을 표현하는
itadventure.tistory.com
오늘은 360 영상을 재생하는 방법을 알아보겠습니다 :)
360 영상을 다운로드
360 무료 영상은 좀처럼 구하기 어려운데요.
매틀 사이트 ( https://www.mettle.com/ ) 에서 가까스로 몇개 구할수 있었습니다.
소스 코드 구성
바빌론 cdn 은 구성하셨다는 전제로,
바로 소스코드를 공개합니다.
다운받으신 mp4 영상 파일은 index.html 과 같은 폴더에 넣어 주세요.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Babylon.js sample code</title>
<!-- Babylon.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
<script src="https://assets.babylonjs.com/generated/Assets.js"></script>
<script src="../snapshot/recast.js"></script>
<script src="../snapshot/ammo.js"></script>
<script src="../snapshot/havok/HavokPhysics_umd.js"></script>
<script src="../snapshot/cannon.js"></script>
<script src="../snapshot/Oimo.js"></script>
<script src="../snapshot/earcut.min.js"></script>
<script src="../snapshot/babylon.js"></script>
<script src="../snapshot/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="../snapshot/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="../snapshot/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="../snapshot/loaders/babylonjs.loaders.js"></script>
<script src="../snapshot/serializers/babylonjs.serializers.min.js"></script>
<script src="../snapshot/gui/babylon.gui.min.js"></script>
<script src="../snapshot/inspector/babylon.inspector.bundle.js"></script>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
#canvasZone {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="canvasZone"><canvas id="renderCanvas"></canvas></div>
<script>
var canvas = document.getElementById("renderCanvas");
var startRenderLoop = function (engine, canvas) {
engine.runRenderLoop(function () {
if (sceneToRender && sceneToRender.activeCamera) {
sceneToRender.render();
}
});
}
var engine = null;
var scene = null;
var sceneToRender = null;
var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false}); };
</script>
<script src="./main.js"></script>
<script>
window.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();
}
}
window.engine = await asyncEngineCreation();
if (!engine) throw 'engine should not be null.';
startRenderLoop(engine, canvas);
window.scene = createScene();};
initFunction().then(() => {sceneToRender = scene
});
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>main.js
var dome;
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
camera.inputs.attached.mousewheel.detachControl(canvas);
dome = new BABYLON.VideoDome(
"testdome",
["360_vr_master_series___free_download___london_park_ducks_swans (1080p).mp4"],
{
resolution: 16,
clickToPlay: true,
useDirectMapping: false
},
scene
);
return scene;
};결과물
이제 웹페이지를 열면, 동영상이 표시됩니다.
이 영상은 360 영상이기 때문에 마우스로 드래그하면 화면이 회전합니다.
마무~리
360도 회전하는 배경이라니 멋지지 않나요 ?
360 카메라라는게 있는데 웬지 갖고 싶어지는 요즘입니다 :)
비싸서 문제이지만요 ㅎ..
오늘도 방문해주신 모든 분들께 감사드립니다.