Test.js 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. var Test = (function () {
  2. function Test(canvasId) {
  3. var _this = this;
  4. var canvas = document.getElementById(canvasId);
  5. this.engine = new BABYLON.Engine(canvas, true);
  6. this.scene = null;
  7. window.addEventListener("resize", function () {
  8. _this.engine.resize();
  9. });
  10. this._run();
  11. }
  12. Test.prototype._run = function () {
  13. var _this = this;
  14. this._initScene();
  15. // new INSPECTOR.Inspector(this.scene);
  16. BABYLON.DebugLayer.InspectorURL = 'http://localhost:3000/dist/libs/inspector.js';
  17. this.scene.debugLayer.show();
  18. this.scene.executeWhenReady(function () {
  19. _this._initGame();
  20. _this.engine.runRenderLoop(function () {
  21. _this.scene.render();
  22. });
  23. });
  24. };
  25. Test.prototype._initScene = function () {
  26. var scene = new BABYLON.Scene(this.engine);
  27. var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 4, Math.PI / 2.5, 200, BABYLON.Vector3.Zero(), scene);
  28. camera.attachControl(this.engine.getRenderingCanvas(), true);
  29. camera.minZ = 0.1;
  30. // Lights
  31. var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 10, 0), scene);
  32. var light1 = new BABYLON.PointLight("Omni1", new BABYLON.Vector3(0, -10, 0), scene);
  33. var light2 = new BABYLON.PointLight("Omni2", new BABYLON.Vector3(10, 0, 0), scene);
  34. var light3 = new BABYLON.DirectionalLight("Dir0", new BABYLON.Vector3(1, -1, 0), scene);
  35. var material = new BABYLON.StandardMaterial("kosh", scene);
  36. var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene);
  37. // Creating light sphere
  38. var lightSphere0 = BABYLON.Mesh.CreateSphere("Sphere0", 16, 0.5, scene);
  39. var lightSphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 16, 0.5, scene);
  40. var lightSphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 16, 0.5, scene);
  41. lightSphere0.material = new BABYLON.StandardMaterial("red", scene);
  42. lightSphere0.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
  43. lightSphere0.material.specularColor = new BABYLON.Color3(0, 0, 0);
  44. lightSphere0.material.emissiveColor = new BABYLON.Color3(1, 0, 0);
  45. lightSphere1.material = new BABYLON.StandardMaterial("green", scene);
  46. lightSphere1.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
  47. lightSphere1.material.specularColor = new BABYLON.Color3(0, 0, 0);
  48. lightSphere1.material.emissiveColor = new BABYLON.Color3(0, 1, 0);
  49. lightSphere2.material = new BABYLON.StandardMaterial("blue", scene);
  50. lightSphere2.material.diffuseColor = new BABYLON.Color3(0, 0, 0);
  51. lightSphere2.material.specularColor = new BABYLON.Color3(0, 0, 0);
  52. lightSphere2.material.emissiveColor = new BABYLON.Color3(0, 0, 1);
  53. // Sphere material
  54. material.diffuseColor = new BABYLON.Color3(1, 1, 1);
  55. sphere.material = material;
  56. // Lights colors
  57. light0.diffuse = new BABYLON.Color3(1, 0, 0);
  58. light0.specular = new BABYLON.Color3(1, 0, 0);
  59. light1.diffuse = new BABYLON.Color3(0, 1, 0);
  60. light1.specular = new BABYLON.Color3(0, 1, 0);
  61. light2.diffuse = new BABYLON.Color3(0, 0, 1);
  62. light2.specular = new BABYLON.Color3(0, 0, 1);
  63. light3.diffuse = new BABYLON.Color3(1, 1, 1);
  64. light3.specular = new BABYLON.Color3(1, 1, 1);
  65. BABYLON.Effect.ShadersStore["customVertexShader"] = 'precision highp float;attribute vec3 position;attribute vec2 uv;uniform mat4 worldViewProjection;varying vec2 vUV;varying vec3 vPos;void main(){gl_Position=worldViewProjection*vec4(position,1.),vPos=gl_Position.xyz;if(position.x >2.0) {gl_Position.x = 2.0;} else { gl_Position.y = 1.0;}}';
  66. BABYLON.Effect.ShadersStore["customFragmentShader"] = 'precision highp float;varying vec3 vPos;uniform vec3 color;void main(){gl_FragColor=vec4(mix(color,vPos,.05),1.);}';
  67. var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
  68. vertex: "custom",
  69. fragment: "custom",
  70. }, {
  71. attributes: ["position", "normal", "uv"],
  72. uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
  73. });
  74. sphere.material = shaderMaterial;
  75. // Animations
  76. var alpha = 0;
  77. scene.beforeRender = function () {
  78. light0.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, 10 * Math.cos(alpha));
  79. light1.position = new BABYLON.Vector3(10 * Math.sin(alpha), 0, -10 * Math.cos(alpha));
  80. light2.position = new BABYLON.Vector3(10 * Math.cos(alpha), 0, 10 * Math.sin(alpha));
  81. lightSphere0.position = light0.position;
  82. lightSphere1.position = light1.position;
  83. lightSphere2.position = light2.position;
  84. alpha += 0.01;
  85. };
  86. this.scene = scene;
  87. };
  88. Test.prototype._initGame = function () {
  89. this._createCanvas();
  90. };
  91. /**
  92. * Create the canvas2D
  93. */
  94. Test.prototype._createCanvas = function () {
  95. var canvas = new BABYLON.ScreenSpaceCanvas2D(this.scene, {
  96. id: "Hello world SC",
  97. size: new BABYLON.Size(300, 100),
  98. backgroundFill: "#4040408F",
  99. backgroundRoundRadius: 50,
  100. children: [
  101. new BABYLON.Text2D("Hello World!", {
  102. id: "text",
  103. marginAlignment: "h: center, v:center",
  104. fontName: "20pt Arial",
  105. })
  106. ]
  107. });
  108. var infoCanvas = new BABYLON.ScreenSpaceCanvas2D(this.scene, { id: "PINK CUBE SC", size: new BABYLON.Size(500, 500) });
  109. var text2 = new BABYLON.Text2D("UnbindTime", { parent: infoCanvas, id: "Text", marginAlignment: "h: left, v: bottom", fontName: "10pt Arial" });
  110. canvas = new BABYLON.WorldSpaceCanvas2D(this.scene, new BABYLON.Size(150, 150), {
  111. id: "WorldSpaceCanvas",
  112. worldPosition: new BABYLON.Vector3(0, 0, 0),
  113. worldRotation: BABYLON.Quaternion.RotationYawPitchRoll(Math.PI / 4, Math.PI / 4, 0),
  114. enableInteraction: true,
  115. backgroundFill: "#C0C0C040",
  116. backgroundRoundRadius: 20,
  117. children: [
  118. new BABYLON.Text2D("World Space Canvas", { fontName: "8pt Arial", marginAlignment: "h: center, v: bottom", fontSuperSample: true })
  119. ]
  120. });
  121. var rect = new BABYLON.Rectangle2D({ parent: canvas, x: 45, y: 45, width: 30, height: 30, fill: null, border: BABYLON.Canvas2D.GetGradientColorBrush(new BABYLON.Color4(0.9, 0.3, 0.9, 1), new BABYLON.Color4(1.0, 1.0, 1.0, 1)), borderThickness: 2 });
  122. var buttonRect = new BABYLON.Rectangle2D({ parent: canvas, id: "button", x: 12, y: 12, width: 50, height: 15, fill: "#40C040FF", roundRadius: 2, children: [new BABYLON.Text2D("Click Me!", { fontName: "8pt Arial", marginAlignment: "h: center, v: center", fontSuperSample: true })] });
  123. var button2Rect = new BABYLON.Rectangle2D({ parent: canvas, id: "button2", x: 70, y: 12, width: 40, height: 15, fill: "#4040C0FF", roundRadius: 2, isVisible: false, children: [new BABYLON.Text2D("Great!", { fontName: "8pt Arial", marginAlignment: "h: center, v: center", fontSuperSample: true })] });
  124. ;
  125. buttonRect.pointerEventObservable.add(function (d, s) {
  126. button2Rect.levelVisible = !button2Rect.levelVisible;
  127. }, BABYLON.PrimitivePointerInfo.PointerUp);
  128. var insideRect = new BABYLON.Rectangle2D({ parent: rect, width: 10, height: 10, marginAlignment: "h: center, v: center", fill: "#0040F0FF" });
  129. insideRect.roundRadius = 2;
  130. };
  131. return Test;
  132. }());
  133. //# sourceMappingURL=Test.js.map