<canvas id="renderCanvas"></canvas>
html, body { overflow: hidden; margin: 0; padding: 0; width: 100%; height: 100%; } #renderCanvas { touch-action: none; width: 100%; height: 100%; }
console.log("hello"); 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/wjvobkacnyvxgp3/CristmasTreeScene.babylon", _engine, function (newScene) { newScene.executeWhenReady(function () { _scene = newScene; var light = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(-1, -1, -1), _scene); var light2 = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0), _scene); light2.diffuse = new BABYLON.Color3(0.2, 0.2, 0.2); light2.specular = new BABYLON.Color3(0, 0, 0); var camera = new BABYLON.ArcRotateCamera("Camera", 30 * Math.PI / 180, 70 * Math.PI / 180, 15, new BABYLON.Vector3(0, 2, 0), _scene); camera.minZ = 0.1; camera.wheelPrecision = 100; _scene.activeCamera = camera; camera.attachControl(_canvas, true); //_scene.activeCamera.attachControl(_canvas); var planeMesh = _scene.meshes[1]; var planeMaterial = new BABYLON.StandardMaterial("planeMat", _scene); planeMaterial.diffuseTexture = new BABYLON.Texture("https://dl.dropboxusercontent.com/s/wwpenimo7hcee7g/TexturesCom_SnowPlain_3x3_512_albedo.png"); planeMaterial.invertNormalMapX = true; planeMaterial.invertNormalMapY = true; var planeNormalTexture = new BABYLON.Texture("https://dl.dropboxusercontent.com/s/oubt7a1o0gln21j/TexturesCom_SnowPlain_3x3_512_normal.png", _scene); planeMaterial.bumpTexture = planeNormalTexture; planeMesh.scaling.x = 100; planeMesh.scaling.z = 100; planeMaterial.diffuseTexture.uScale = 100; planeMaterial.diffuseTexture.vScale = 100; planeMaterial.bumpTexture.uScale = 100; planeMaterial.bumpTexture.vScale = 100; planeMesh.material = planeMaterial; var firMesh = _scene.meshes[0]; var firMaterial = new BABYLON.StandardMaterial("firMat", _scene); firMaterial.diffuseTexture = new BABYLON.Texture("https://dl.dropboxusercontent.com/s/lgbzq4hfrwjs9eu/CristmasTreeScene.png"); firMaterial.diffuseTexture.hasAlpha = true; firMaterial.backFaceCulling = false; // firMaterial.sideOrientation = BABYLON.Mesh.DOUBLESIDE; firMesh.material = firMaterial; // 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; }()); function main() { Scene.Create("renderCanvas"); } main();