BabylonJS-기본 요소
Babylon.js는 개발자를위한 3D 게임 빌드를 돕는 인기있는 프레임 워크입니다. 3D 기능을 구현하는 기능이 내장되어 있습니다. Babylon.js를 사용하여 간단한 데모를 만들고 시작하는 데 필요한 기본 기능을 이해하겠습니다.
먼저 Babylon.js의 기본 요소가 포함 된 데모를 만듭니다. 또한 Babylon.js의 다양한 기능에 대해서도 알아 봅니다.
샘플 데모 1
이 섹션에서는 BabylonJS의 기본 요소를 포함하는 데모를 만드는 방법을 배웁니다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo2</title>
<script src = "babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
scene.activeCamera.attachControl(canvas);
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>
BabylonJS를 실행하려면 WEBGL을 지원하는 최신 브라우저가 필요합니다. 최신 브라우저-Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+ 등은 WEBGL을 지원하며 동일한 플랫폼에서 데모를 실행하여 출력을 볼 수 있습니다. babylonjs 용 파일을 저장할 디렉토리를 만듭니다. BabylonJS 사이트에서 최신 BabylonJSscripts 파일을 가져옵니다. 이 튜토리얼의 모든 데모 링크는 babylonjs 버전 3.3에서 테스트되었습니다.
1 단계
간단한 html 페이지를 만들고 Babylon.js 파일을 포함합니다.
아래와 같이 body 태그 안에 BabylonJS에서 콘텐츠를 렌더링하는 데 사용되는 캔버스 태그를 만듭니다.
캔버스에 CSS를 추가하여 화면의 전체 너비와 높이를 차지합니다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
</body>
</html>2 단계
이제 캔버스에 콘텐츠를 렌더링하기위한 BabylonJScode부터 시작하겠습니다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
</script>
</body>
</html>이제 html 구조에 스크립트 태그를 추가하고 캔버스 참조를 가변 캔버스에 저장합니다.
Babylon.js를 시작하려면 엔진 인스턴스를 만들고 캔버스 참조를 전달하여 렌더링합니다.
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
</script>BABYLON 전역 개체에는 엔진에서 사용할 수있는 모든 Babylon.js 함수가 포함되어 있습니다.
3 단계
이 단계에서는 먼저 장면을 만듭니다.
장면은 모든 내용이 표시되는 곳입니다. 다양한 유형의 오브젝트를 만들고 화면에 보이도록 장면에 같은 것을 추가합니다. 장면을 생성하려면 이미 생성 된 html 구조에 다음 코드를 추가합니다. 현재 우리는 이미 생성 된 코드에 위의 html 구조를 이어갈 것입니다.
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
};
var scene = createScene();최종 HTML 파일은 다음과 같습니다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
return scene;
};
var scene = createScene();
</script>
</body>
</html>위의 예에서 CreateScene 함수가 정의되고 var scene = createScene ()이 함수를 호출합니다.
CreateScene 함수에는 내부에 장면이 생성되고 다음 줄은 장면에 색상을 추가합니다.이 작업은 BABYLON.Color3 (1, 0.8, 0.8)을 사용하여 수행되며 여기에있는 색상은 분홍색입니다.
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);브라우저에서 위의 데모 링크를 실행하면 지금 브라우저 화면에 아무것도 표시되지 않습니다. 4 단계에서와 같이 engine.runRenderLoop이라는 코드에 추가 할 단계가 하나 더 있습니다.
4 단계
장면을 실제로 화면에 표시하려면 engine.runRenderLoop 호출을 사용하여 렌더링해야합니다. 이제 이것이 어떻게 수행되는지 살펴 보겠습니다.
렌더링 루프
engine.runRenderLoop(function() {
scene.render();
});Engine.runRenderLoop 함수는 scene.render를 호출하여 장면을 렌더링하고 사용자에게 표시합니다. 최종 .html은 다음과 같습니다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>위 파일을 basicscene.html로 저장하고 브라우저에서 출력을 확인합니다. 표시된 화면은 아래와 같이 분홍색으로 표시됩니다.
5 단계
이제 장면이 생겼으니 카메라를 추가해야합니다.
카메라 및 조명 추가
아래 주어진 코드는 장면에 카메라를 추가합니다. Babylon에서 사용할 수있는 카메라에는 여러 유형이 있습니다.
ArcRotateCamera대상을 중심으로 회전하는 카메라입니다. 마우스, 커서 또는 터치 이벤트로 제어 할 수 있습니다. 필요한 매개 변수는 이름, 알파, 베타, 반경, 대상 및 장면입니다. 다음 섹션에서 카메라의 세부 사항에 대해 논의하겠습니다.
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);이제 빛을 추가하는 방법을 이해해야합니다.
조명은 각 픽셀이받는 확산 및 반사 색상을 생성하는 데 사용됩니다. 조명에는 여러 종류가 있습니다. 조명 섹션에서 다양한 유형의 조명에 대해 알아 봅니다.
여기서는 장면에서 PointLight를 사용하고 있습니다. PointLight는 태양과 같은 모든 방향으로 방출됩니다. 매개 변수는 이름, 위치 및 사용할 장면입니다.
빛을 추가하려면 다음 코드를 실행하십시오.
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);6 단계
이제 모양을 추가하는 방법을 살펴 보겠습니다.
도형 추가
위에서 공유 한 데모에는 4 개의 모양이 추가되었습니다.
- Sphere
- Torus
- Box
- Cylinder
구를 추가하려면 다음 코드를 실행하십시오.
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);구가 추가되면 코드는 다음과 같습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MDN Games: Babylon.js demo - shapes</title>
<script src = "babylon.js"></script>
<style>
html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
scene.activeCamera.attachControl(canvas);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>산출
위의 코드는 다음 출력을 생성합니다.
이제 다른 모양 인 Torus와 Box를 추가하겠습니다. 다음 코드를 실행하여 Torus 모양을 추가합니다.
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);상자에 위치를 추가합니다. BABYLON.Vector3 (-5, 0, 0)은 x, y 및 z 방향을 취합니다.
실행시 위의 코드는 다음 출력을 생성합니다.
이제 위의 스크린 샷에 표시된 최종 모양 인 실린더를 추가하겠습니다.
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);위치가 x 방향 5 인 실린더에 추가됩니다. 최종 코드는 다음과 같습니다.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo2</title>
<script src = "babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(1, 0.8, 0.8);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
scene.activeCamera.attachControl(canvas);
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
var origin = BABYLON.Mesh.CreateSphere("origin", 10, 1.0, scene);
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false);
var box = BABYLON.Mesh.CreateBox("box", 3.0, scene);
box.position = new BABYLON.Vector3(-5, 0, 0);
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false);
cylinder.position = new BABYLON.Vector3(5, 0, 0);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>산출
실행시 위의 코드는 다음과 같은 출력을 생성합니다.
커서를 이동하는 방향에 따라 모양이 이동합니다. 장면에 카메라의 연결 컨트롤을 사용하여 동일한 작업이 수행됩니다.
scene.activeCamera.attachControl(canvas);이제 각 모양에 대해 자세히 설명하겠습니다.
다음은 모든 모양과 구문의 요약입니다.
| Sr. 아니요 | 모양 | 통사론 |
|---|---|---|
| 1 | 상자 | |
| 2 | 구체 | |
| 삼 | 비행기 | |
| 4 | 디스크 | |
| 5 | 실린더 | |
| 6 | 큰 쇠시리 | |
| 7 | 매듭 | |
| 8 | 라인 메쉬 | |
| 9 | 대시 라인 | |
| 10 | 리본 | |
| 11 | 튜브 | |
| 12 | 바닥 | |
| 13 | HeightMap에서지면 | |
| 14 | 타일 바닥 | |
기본 요소-위치, 회전 및 크기 조정
이 섹션에서는 지금까지 추가 한 요소를 배치, 회전 또는 크기 조정하는 방법을 배웁니다.
상자, 구, 원통, 매듭 등을 만들었습니다. 이제 모양을 배치하고 크기를 조정하고 회전하는 방법을 살펴 보겠습니다.
| Sr. 아니. | 요소 및 설명 |
|---|---|
| 1 | 위치 위치 변경으로 메시가 한 위치에서 다른 위치로 변경됩니다. |
| 2 | 회전 회전하면 메쉬가 메쉬를 중심으로 회전합니다. |
| 삼 | 스케일링 메쉬의 배율은 x, y 또는 z 축에 대해 수행 할 수 있습니다. |
기본 요소-육아
Parenting을 사용하면 메시 사이에 부모-자식 관계를 만들고 어떻게 작동하는지 확인합니다. 따라서 부모에게 적용하는 변형은 자식에게도 동일하게 적용됩니다. 이제 아래의 데모를 통해 동일한 내용을 이해하겠습니다.
데모
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>BabylonJs - Basic Element-Creating Scene</title>
<script src = "babylon.js"></script>
<style>
canvas {width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0, 1, 0);
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
scene.activeCamera.attachControl(canvas);
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 100, 100), scene);
var boxa = BABYLON.Mesh.CreateBox("BoxA", 1.0, scene);
boxa.position = new BABYLON.Vector3(0,0.5,0);
var boxb = BABYLON.Mesh.CreateBox("BoxB", 1.0, scene);
boxb.position = new BABYLON.Vector3(3,0.5,0);
boxb.scaling = new BABYLON.Vector3(2,1,2);
var boxc = BABYLON.Mesh.CreateBox("BoxC", 1.0, scene);
boxc.parent = boxb;
boxc.position.z = -3;
var ground = BABYLON.Mesh.CreateGround("ground1", 10, 6, 2, scene);
ground.position = new BABYLON.Vector3(0,0,0);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>산출
설명
위의 메시에 3 개의 상자를 만들었습니다. 데모에서는 boxb 크기 조정이 적용되고 부모 boxb와 동일한 크기가 조정되기 때문에 크기가 조정되는 boxc의 부모로 할당됩니다. 데모를 통해 부모-자식 링크가 어떻게 작동하는지 확인할 수 있습니다.
메시를 만들려면 다른 메시의 부모를 사용해야합니다.
child.parent = parentmesh;
기본 요소-환경
이제이 섹션에서 장면 환경에 대해 설명하겠습니다. 우리는scene background color, ambientcolor, skyboxes, fog mode, 등등.
우리는 scene background color is demos 지금까지 만들었습니다.
장면 배경색
이제 장면 배경색이 어떻게 작동하는지 살펴 보겠습니다.
통사론
다음은 장면 배경색에 대한 구문입니다.
scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);
or
scene.clearColor = BABYLON.Color3.Blue();위의 속성은 장면의 배경색을 변경합니다.
장면 주변 색상
이제 장면 주변 색상이 어떻게 작동하는지 살펴 보겠습니다.
통사론
다음은 장면 주변 색상의 구문입니다.
scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3);AmbientColor는 StandardMaterial주변 색상 및 질감. 장면에 ambientColor가 없으면StandardMaterial.ambientColor 과 StandardMaterial.ambientTexture효과가 없습니다. StandardMaterial AmbientColor / ambientTexture는 장면에 AmbientColor가 적용되면 활성화됩니다. 기본적으로 장면이 제공됩니다.scene.ambientColor 및 설정 Color3 (0, 0, 0)은 앰비언트 컬러가 없음을 의미합니다.
장면 안개 모드
이제 Scene Fog Mode가 어떻게 작동하는지 이해할 것입니다.
통사론
다음은 장면 안개 모드의 구문입니다.
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;사용 가능한 안개 모드의 다음 목록-
BABYLON.Scene.FOGMODE_NONE − 기본값은 안개가 비활성화됩니다.
BABYLON.Scene.FOGMODE_EXP − 안개 밀도는 지수 함수를 따릅니다.
BABYLON.Scene.FOGMODE_EXP2 − 위와 동일하지만 더 빠릅니다.
BABYLON.Scene.FOGMODE_LINEAR − 안개 밀도는 선형 함수를 따릅니다.
포그 모드 EXP 또는 EXP2가 정의 된 경우 다음과 같이 밀도를 정의 할 수 있습니다.
scene.fogDensity = 0.01;안개 모드가 LINEAR이면 다음과 같이 안개가 시작되고 끝나는 위치를 정의 할 수 있습니다.
scene.fogStart = 20.0;
scene.fogEnd = 60.0;안개에 색상을 부여하려면 다음 코드를 실행하십시오.
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);스카이 박스
Skybox는 장면을 사실적으로 보이게하는 게임에서 배경을 만드는 방법입니다. 재료에 사용되는 텍스처로 덮는 화면 주변의 래퍼에 가깝습니다. 만들려는 장면에 대해 사실적으로 보이도록 이미지를 적절하게 선택하십시오. 스카이 박스를 만들려면 상자를 만들고 여기에 재질을 적용해야합니다. 다음 장에서 다른 자료에 대해 자세히 설명합니다.
이제 상자와 재질을 사용하여 스카이 박스를 만드는 방법을 살펴 보겠습니다.
var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);전체 장면을 덮도록 크기가 100 인 상자를 만듭니다. 다음과 같이 만들어진 상자에 재료를주는 것으로 시작합니다.
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);이 재료에 속성을 할당합니다.
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);거울과 같은 재질을 만들기 위해 기본적으로 사용되는 반사 텍스처를 사용해야합니다. 반사 텍스처 속성은 이미지를 입력으로받는 CubeTexture를 사용합니다. 큐브에는 6 개의면이 있으므로 skybox에 필요한 이미지는 6 개 여야합니다. 즉, 내부적으로 skybox_nx, skybox_ny, skybox_nz, skybox_px, skybox_py, skybox_pz로 저장되어야합니다. 스카이 박스에 사용 된 이미지는 아래에 붙여 넣습니다. 6면 모두 큐브의면입니다. 모양에 텍스처를 적용하면 사용 된 이미지의 세부 사항이 제공되고 장면이 사실적으로 보입니다. 우리는 아래 그림과 같이 좌표 모드를 SKYBOX_MODE로 사용했습니다.
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;backfaceCulling, diffuseColor, specularColor, disableLighting 등과 같은 재질에 사용되는 다른 속성이 있습니다. 속성은 재질 섹션에서 자세히 설명합니다.
데모에서는 스카이 박스를 사용하여 만든 환경 장면, 장면에서 회전하는 구 및 주위를 이동하는 평면을 보여줍니다. 안개는 장면에 적용되며 회전 할 때 알 수 있습니다.
환경 장면을 보여주는 데모
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> Babylon.JS : Demo</title>
<script src = "babylon.js"></script>
<style>
canvas { width: 100%; height: 100%;}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
var light = new BABYLON.PointLight("Omni",
new BABYLON.Vector3(10, 50, 50), scene);
var camera = new BABYLON.ArcRotateCamera("Camera", 0.4, 1.2, 20, new BABYLON.Vector3(-10, 0, 0), scene);
camera.attachControl(canvas, true);
var material1 = new BABYLON.StandardMaterial("mat1", scene);
material1.diffuseTexture = new BABYLON.Texture("images/tsphere.jpg", scene);
var sphere = BABYLON.Mesh.CreateSphere("red", 32, 2, scene);
sphere.setPivotMatrix(BABYLON.Matrix.Translation(2, 0, 0));
sphere.material = material1;
// Fog
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
scene.fogDensity = 0.01;
//skybox
var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("images/cubetexture/skybox", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.disableLighting = true;
skybox.material = skyboxMaterial;
var spriteManagerPlayer = new BABYLON.SpriteManager("playerManager", "images/plane.png", 8, 1000, scene);
var plane = new BABYLON.Sprite("plane", spriteManagerPlayer);
plane.position.x = -2;
plane.position.y = 2;
plane.position.z = 0;
var alpha = 0;
var x = 2;
var y = 0;
scene.registerBeforeRender(function () {
scene.fogDensity = Math.cos(alpha) / 10;
alpha += 0.02;
sphere.rotation.y += 0.01;
y += 0.05;
if (x > 50) {
x = -2;
}
plane.position.x = -x;
x += 0.02;
});
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>산출
설명
위의 예에서 우리는 fog에 다음 코드를 사용했습니다.
scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);
scene.fogDensity = 0.01;scene.fogMode = BABYLON.Scene.FOGMODE_EXP − 여기서 안개 밀도는 지수 함수를 따릅니다.
scene.registerBeforeRender =이를 통해 안개 밀도는 다음과 같이 변경됩니다.
var alpha = 0;
scene.registerBeforeRender(function () {
scene.fogDensity = Math.cos(alpha) / 10;
alpha += 0.02;
});알파 값은 위의 함수에서와 같이 루프로 이동함에 따라 0.02 씩 계속 증가합니다.
여기에 평면 스프라이트 이미지를 추가하고 scene.registerBeforeRender 다음과 같이 기능-
var alpha = 0;
var x = 2;
var y = 0;
scene.registerBeforeRender(function () {
scene.fogDensity = Math.cos(alpha) / 10;
alpha += 0.02;
sphere.rotation.y += 0.01;
y += 0.05;
if (x > 50) {
x = -2;
}
plane.position.x = -x;
x += 0.02;
});
return scene;
};s평면의 x 축을 변경하고 50 이상이되면 재설정합니다.
또한 구는 y 축을 따라 회전합니다. 위의 예에서 볼 수 있으며, sphere.rotation.y를 사용하여 값을 변경합니다.
구에 사용되는 텍스처는 다음과 같습니다. images/tshphere.jpg. 이미지는 로컬로 images / 폴더에 저장되며 참조를 위해 아래에 붙여 넣습니다. 원하는 이미지를 다운로드하여 데모 링크에서 사용할 수 있습니다.
큐브에 6 개의 이미지가 필요합니다. 이미지는 images / cubetexture / 폴더에 로컬로 저장됩니다. 원하는 이미지를 다운로드 할 수 있지만 저장할 때 nameoftheimage_nx, nameoftheimage_ny, nameoftheimage_nz, nameoftheimage_px, nameoftheimage_py, nameoftheimage_pz로 저장합니다. 선택한 이미지는 배경이 스카이 박스에 표시된 것과 같이 사실적으로 보이도록 순서대로되어 있어야합니다.
스카이 박스를 만드는 데 사용되는 이미지는 다음과 같습니다. images/cubetexture/skybox
skybox_nx
skybox_ny
skybox_nz
skybox_px
skybox_py
skybox_pz
