바빌론JS 에서는 프로덕트 ( 상용서비스) 환경에서 자기네 CDN 서버를 사용하지 말라고 하는데요.
그 이유는 파일이 갑자기 변경될 수도 있고 CDN 서버 요금 발생 때문도 아닐까 생각됩니다 :)
바빌론JS의 최신버전은 7.20.1 버전인데요 ( 2024. 8. 11일 기준 )
다 만들어진 최적화 세팅 파일은 cdnSnapshot.zip 파일입니다. 타입스크립트를 이용해 컴파일할 필요도 없지요. 그러다 보니 사용법이 더 간편한 부분도 있습니다.
이 파일을 다운받아 압축을 풀어 서버에 올려 놓으시면 되는데요.
PC에 다운받아 PC에서 돌려도 문제는 없습니다.
index.html 파일이 샘플로 제공되는데요.
늘씬한 로봇 모델을 걷고 뛰게 할 수 있는 페이지입니다.
다만 위 페이지 소스는 알아보기 어렵게 제공하니 무리하기 분석하시지는 않는게 좋을것 같습니다 :)
(()=>{const e=document.getElementById("babylon-canvas"),n=new BABYLON.Engine(e,!0);
class t{static CreateScene(e,n){const t=new BABYLON.Scene(e),r=new BABYLON.FreeCamera("camera1",
new BABYLON.Vector3(0,5,-10),t);return r.setTarget(BABYLON.Vector3.Zero()),r.attachControl(n,!0),
new BABYLON.HemisphericLight("light1",new BABYLON.Vector3(0,1,0),t).intensity=.7,
BABYLON.MeshBuilder.CreateSphere("sphere",{diameter:2,segments:32},t).position.y=1,
:그동안 바빌론 JS 라이브러리를 사용하기 위한 CDN 서버 연결 링크들을
<script src="https://cdn.babylonjs.com/babylon.js"></script>내 서버의 주소로 바꿔주면 됩니다. 상대주소로 제공해도 문제 없더라구요.
<script src="../snapshot/babylon.js"></script>index.html 의 cdn 주소 변경 샘플입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Babylon.js App</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<!-- <script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.js"></script>
<script src="https://cdn.babylonjs.com/earcut.min.js"></script> -->
<script src="../snapshot/babylon.js"></script>
<script src="../snapshot/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
<script src="../snapshot/gui/babylon.gui.min.js"></script>
<script src="../snapshot/serializers/babylonjs.serializers.js"></script>
<script src="../snapshot/earcut.min.js"></script>
<script src="./main.js"></script>
</body>
</html>샘플페이지를 마련했는데요. 바빌론공식사이트 CDN 이 아닌 크레이 개인 서버에 CDN 파일을 올려 적용해 보았습니다.
http://dreamplan7.cafe24.com/babylon/ex19/
최근 모델링한 NPC 애리를 보실수 있습니다 :)
트래픽 제한량이 적어 금방 끊길수도 있으니까요 :)
마무~리
타입스크립트로 개발하려다 보니 알아봐야 할 부분들이 너무 많다는 생각이 들더군요.
차라리 바빌론JS의 CDN서비스를 통째로 올릴 수 있는 방법이 없나 찾아본 결과 수월한 방법을 발견하였습니다.아무쪼록 필요하신 분들에게 도움이 되셨으면 하며 오늘은 약간 짧게 마칩니다 :)
오늘도 방문해주신 모든 분들께 감사드립니다.