바빌론 JS의 플레이 그라운드에는 멋진 예제들이 많은데요.
제공된 예제 소스들은 플레이 그라운드 내에서만 활용할수가 있습니다.
아니, 그런줄만 알았었지요.
예제 소스들 : https://www.babylonjs.com/featureDemos/
Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best
Babylon.js is one of the world's leading WebGL-based graphics engines. From a new visual scene inspector, best-in-class physically-based rendering, countless performance optimizations, and much more, Babylon.js brings powerful, beautiful, simple, and open
www.babylonjs.com
CDN 파일을 구성한 후에 플레이그라운드 소스를 그대로 활용할 수 있을까 해서 구성을 좀 변경해보니 되더군요! 꽤 간단한데 오늘은 해당 부분을 공유드리겠습니다.
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>
<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>
<!-- 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>
</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(() => {scene.then(returnedScene => { sceneToRender = returnedScene; });
});
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>main.js - 플레이그라운드 소스, 끝!
이제 main.js 에 플레이그라운드 소스를 그대로 넣어 주면 됩니다!
바닥을 클릭하면 눈사람이 생겨나면서 눈이 오는 플레이그라운드 예제 소스를 적용하겠습니다.
아래 페이지 접속하면 플레이그라운드에서 소스를 볼 수 있는데요.
https://playground.babylonjs.com/#LE4PBJ#10
그냥 왼쪽의 소스를 모두 복사해 main.js 에 넣어주면 됩니다.
참고로 눈사람 모델은 외부에서 불러옵니다. 이건 어쩔수 없구요.
var createScene = async function () {
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.72, 0.82, 0.95)
var camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(80), 8, new BABYLON.Vector3(0, 1, 0), scene);
camera.lowerRadiusLimit = 5;
camera.upperRadiusLimit = 40;
camera.upperBetaLimit = BABYLON.Tools.ToRadians(90);
camera.minZ = 0.2;
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
scene.environmentTexture = new BABYLON.HDRCubeTexture("https://assets.babylonjs.com/environments/Snow_Man_Scene/winter_lake_01_1k.hdr", scene, 128, false, true, false, true);
const snowField = (await BABYLON.SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/Demos/Snow_Man_Scene/", "snowField.glb", scene)).meshes[1];
BABYLON.NodeMaterial.ParseFromSnippetAsync("S2X75W#30", scene).then(nodeMaterial => {
snowField.material = nodeMaterial;
});
var dirLight = new BABYLON.DirectionalLight("dirLight", new BABYLON.Vector3(0.25, -0.75, -0.25), scene);
dirLight.position = new BABYLON.Vector3(-2.5, 8.5, 10.75);
dirLight.intensity = 2;
var shadowGenerator = new BABYLON.ShadowGenerator(1024, dirLight);
shadowGenerator.useBlurExponentialShadowMap = true;
snowField.receiveShadows = true;
scene.defaultMaterial = new BABYLON.PBRMaterial("default", scene);
scene.defaultMaterial.metallic = 0;
scene.defaultMaterial.roughness = 0.5;
scene.environmentTexture = new BABYLON.HDRCubeTexture("https://assets.babylonjs.com/environments/Snow_Man_Scene/winter_lake_01_1k.hdr", scene, 128, false, true, false, true);
BABYLON.ParticleHelper.ParseFromSnippetAsync("VK7R6H#2", scene, false);
const geometry = await BABYLON.NodeGeometry.ParseFromSnippetAsync("C01YXD#28");
scene.onPointerDown = function(){
var xPos = scene.pointerX;
var yPos = scene.pointerY;
var pickResult = scene.pick(xPos, yPos);
if(pickResult.pickedMesh){
geometry.build();
let snowMan = geometry.createMesh("snowMan");
shadowGenerator.addShadowCaster(snowMan);
snowMan.position.copyFrom(pickResult.pickedPoint);
snowMan.rotate(BABYLON.Vector3.Up(), BABYLON.Tools.ToRadians(BABYLON.Scalar.RandomRange(-90, 90)));
}
}
return scene;
};폴더 구성은 아래와 같이 심플합니다.
크레이가 준비한 아래 예제페이지에서 결과를 확인하실 수 있습니다.
바닥을 클릭할 때마다 눈사람이 생겨나는데요.
플레이그라운드와 동일하게 작동하는 걸 확인하실 수 있습니다.
http://dreamplan7.cafe24.com/babylon/ex23/
마무~리
간단한 팁인데 필요하신 분께 도움이 되셨을지요 :)
오늘도 방문 주셔서 감사합니다!