<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Normal Map in Babylon.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://dl.dropboxusercontent.com/s/r6uhslpxq36s8vu/babylon.js"></script>
<script src="Scene.js"></script>
<script src="main.js"></script>
</head>
<body>
<canvas id="renderCanvas"></canvas>
</body>
</html>
"use strict";
function main()
{
Scene.Create("renderCanvas");
}
window.onload = main;
html, body {
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#renderCanvas {
touch-action: none;
width: 100%;
height: 100%;
}
"use strict";
// http://www.babylonjs-playground.com/#AVG8L#1
var Scene = (function ()
{
var _canvas = null;
var _engine = null;
var _scene = null;
var _Create = function (canvasID)
{
_canvas = document.getElementById(canvasID);
_engine = new BABYLON.Engine(_canvas, true);
document.addEventListener('contextmenu', function (event) { event.preventDefault(); }, false);
BABYLON.SceneLoader.Load("", "https://dl.dropboxusercontent.com/s/or8i2wso3kjpp7n/plane.babylon", _engine,
function (newScene)
{
newScene.executeWhenReady(function ()
{
_scene = newScene;
var light = new BABYLON.PointLight("light1", new BABYLON.Vector3(0, 1, 0), _scene);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, 0, 5, BABYLON.Vector3.Zero(), _scene);
camera.minZ = 0.1;
camera.wheelPrecision = 100;
_scene.activeCamera = camera;
camera.attachControl(_canvas, true);
//_scene.activeCamera.attachControl(_canvas);
var mesh = _scene.meshes[0];
var normalTexture = new BABYLON.Texture("https://dl.dropboxusercontent.com/s/0zvyycqh3ehakx7/norm.png", _scene);
var material = new BABYLON.StandardMaterial("planeMat", _scene);
material.diffuseColor = new BABYLON.Color3(0.596, 0.356, 0.164);
material.invertNormalMapX = true;
material.invertNormalMapY = true;
material.bumpTexture = normalTexture;
mesh.material = material;
// Skybox
var skybox = BABYLON.MeshBuilder.CreateBox("skybox", { size: 1000 }, _scene);
skybox.infiniteDistance = true;
var skyboxMaterial = new BABYLON.StandardMaterial("skybox", _scene);
skyboxMaterial.backFaceCulling = false;
var files = [
"https://dl.dropboxusercontent.com/s/d6pb1vco30tb1qd/skybox_px.jpg",
"https://dl.dropboxusercontent.com/s/j8r319homxctq46/skybox_py.jpg",
"https://dl.dropboxusercontent.com/s/owtkos3hjayv819/skybox_pz.jpg",
"https://dl.dropboxusercontent.com/s/fn49xqtrz18h6vn/skybox_nx.jpg",
"https://dl.dropboxusercontent.com/s/jdtd2cgpe13930o/skybox_ny.jpg",
"https://dl.dropboxusercontent.com/s/shin4itwifrypl5/skybox_nz.jpg",
];
skyboxMaterial.reflectionTexture = BABYLON.CubeTexture.CreateFromImages(files, _scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skybox.material = skyboxMaterial;
_Animate();
});
});
};
var _Animate = function ()
{
_engine.runRenderLoop(function ()
{
_scene.render();
});
window.addEventListener("resize", function ()
{
_engine.resize();
});
};
var mPublic = {
Create: _Create
};
return mPublic;
}());