Guest User

Untitled

a guest
Nov 20th, 2017
89
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.25 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. <style>
  5. body {
  6. /* set margin to 0 and overflow to hidden, to go fullscreen */
  7. margin: 0;
  8. overflow: hidden;
  9. }
  10. </style>
  11.  
  12. <head>
  13. <title>Rigid body - Physijs</title>
  14.  
  15.  
  16. <script type="text/javascript" src="../libs/three.js"></script>
  17. <script type="text/javascript" src="../libs/stats.js"></script>
  18. <script type="text/javascript" src="../libs/physi.js"></script>
  19. <script type="text/javascript" src="../libs/chroma.js"></script>
  20. <script type="text/javascript" src="../libs/dat.gui.js"></script>
  21.  
  22.  
  23. <script type="text/javascript">
  24. 'use strict';
  25. var scale = chroma.scale(['green', 'white']);
  26. Physijs.scripts.worker = '../libs/physijs_worker.js';
  27. Physijs.scripts.ammo = '../libs/ammo.js';
  28. var initScene, render, applyForce, setMousePosition, mouse_position,
  29. ground_material, box_material,
  30. renderer, render_stats, scene, ground, light, camera, box, boxes = [];
  31. initScene = function () {
  32. renderer = new THREE.WebGLRenderer({antialias: true});
  33. renderer.setSize(window.innerWidth, window.innerHeight);
  34. renderer.setClearColor(new THREE.Color(0x000000));
  35. document.getElementById('viewport').appendChild(renderer.domElement);
  36. render_stats = new Stats();
  37. render_stats.domElement.style.position = 'absolute';
  38. render_stats.domElement.style.top = '1px';
  39. render_stats.domElement.style.zIndex = 100;
  40. document.getElementById('viewport').appendChild(render_stats.domElement);
  41. scene = new Physijs.Scene;
  42. scene.setGravity(new THREE.Vector3(0, -50, 0));
  43. camera = new THREE.PerspectiveCamera(
  44. 35,
  45. window.innerWidth / window.innerHeight,
  46. 1,
  47. 1000
  48. );
  49. camera.position.set(50, 30, 50);
  50. camera.lookAt(new THREE.Vector3(10, 0, 10));
  51. scene.add(camera);
  52. // Light
  53. light = new THREE.SpotLight(0xFFFFFF);
  54. light.position.set(20, 100, 50);
  55. scene.add(light);
  56. createGround();
  57. var points = getPoints();
  58. var stones = [];
  59. requestAnimationFrame(render);
  60. var controls = new function () {
  61. this.gravityX = 0;
  62. this.gravityY = -50;
  63. this.gravityZ = 0;
  64. this.resetScene = function () {
  65. scene.setGravity(new THREE.Vector3(controls.gravityX, controls.gravityY, controls.gravityZ));
  66. stones.forEach(function (st) {
  67. scene.remove(st)
  68. });
  69. stones = [];
  70. points.forEach(function (point) {
  71. var stoneGeom = new THREE.BoxGeometry(0.6, 6, 2);
  72. var stone = new Physijs.BoxMesh(stoneGeom, Physijs.createMaterial(new THREE.MeshPhongMaterial(
  73. {
  74. color: scale(Math.random()).hex(),
  75. transparent: true, opacity: 0.8,
  76. // map: THREE.ImageUtils.loadTexture( '../assets/textures/general/darker_wood.jpg' )
  77. })));
  78. console.log(stone.position);
  79. stone.position.copy(point);
  80. stone.lookAt(scene.position);
  81. stone.__dirtyRotation = true;
  82. stone.position.y = 3.5;
  83. scene.add(stone);
  84. stones.push(stone);
  85. });
  86. // let the first one fall down
  87. stones[0].rotation.x = 0.2;
  88. stones[0].__dirtyRotation = true;
  89. };
  90. };
  91. var gui = new dat.GUI();
  92. gui.add(controls, 'gravityX', -100, 100);
  93. gui.add(controls, 'gravityY', -100, 100);
  94. gui.add(controls, 'gravityZ', -100, 100);
  95. gui.add(controls, 'resetScene');
  96. controls.resetScene();
  97. };
  98. var stepX;
  99. render = function () {
  100. requestAnimationFrame(render);
  101. renderer.render(scene, camera);
  102. render_stats.update();
  103. scene.simulate(undefined, 1);
  104. };
  105. function getPoints() {
  106. var points = [];
  107. var r = 27;
  108. var cX = 0;
  109. var cY = 0;
  110. var circleOffset = 0;
  111. for (var i = 0; i < 1000; i += 6 + circleOffset) {
  112. circleOffset = 4.5 * (i / 360);
  113. var x = (r / 1440) * (1440 - i) * Math.cos(i * (Math.PI / 180)) + cX;
  114. var z = (r / 1440) * (1440 - i) * Math.sin(i * (Math.PI / 180)) + cY;
  115. var y = 0;
  116. points.push(new THREE.Vector3(x, y, z));
  117. }
  118. return points;
  119. }
  120. function createGround() {
  121. var ground_material = Physijs.createMaterial(
  122. new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('../assets/textures/general/wood-2.jpg')}),
  123. .9, .3);
  124. var ground = new Physijs.BoxMesh(new THREE.BoxGeometry(60, 1, 60), ground_material, 0);
  125. var borderLeft = new Physijs.BoxMesh(new THREE.BoxGeometry(2, 3, 60), ground_material, 0);
  126. borderLeft.position.x = -31;
  127. borderLeft.position.y = 2;
  128. ground.add(borderLeft);
  129. var borderRight = new Physijs.BoxMesh(new THREE.BoxGeometry(2, 3, 60), ground_material, 0);
  130. borderRight.position.x = 31;
  131. borderRight.position.y = 2;
  132. ground.add(borderRight);
  133. var borderBottom = new Physijs.BoxMesh(new THREE.BoxGeometry(64, 3, 2), ground_material, 0);
  134. borderBottom.position.z = 30;
  135. borderBottom.position.y = 2;
  136. ground.add(borderBottom);
  137. var borderTop = new Physijs.BoxMesh(new THREE.BoxGeometry(64, 3, 2), ground_material, 0);
  138. borderTop.position.z = -30;
  139. borderTop.position.y = 2;
  140. ground.add(borderTop);
  141. scene.add(ground);
  142. }
  143. window.onload = initScene;
  144. </script>
  145. </head>
  146.  
  147. <body>
  148. <div id="viewport"></div>
  149. </body>
  150.  
  151. </html>
Add Comment
Please, Sign In to add comment