Guest User

Untitled

a guest
Mar 24th, 2019
93
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6. <title>Example 01.03 - Materials and light</title>
  7. <script type="text/javascript" src="three.js"></script>
  8. <script type="text/javascript" src="jquery-1.9.0.js"></script>
  9. <script type="text/javascript" src="stats.js"></script>
  10. <script type="text/javascript" src="dat.gui.js"></script>
  11. <script type="text/javascript" src="TrackballControls.js"></script>
  12.  
  13. <style>
  14. body{
  15. /* set margin to 0 and overflow to hidden, to go fullscreen */
  16. margin: 0;
  17. overflow: hidden;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22.  
  23. <!-- Div which will hold the Output -->
  24. <div id="WebGL-output">
  25. </div>
  26.  
  27. <!-- Javascript code that runs our Three.js examples -->
  28. <script type="text/javascript">
  29.  
  30. // once everything is loaded, we run our Three.js stuff.
  31. $(function () {
  32.  
  33. var controls = new function() {
  34. this.stairRotation = 15;
  35. };
  36. // create a scene, that will hold all our elements such as objects, cameras and lights.
  37. var scene = new THREE.Scene();
  38.  
  39. // create a camera, which defines where we're looking at.
  40. var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  41.  
  42. // create a render and set the size
  43. var renderer = new THREE.WebGLRenderer();
  44.  
  45. renderer.setClearColorHex(0xEEEEEE, 1.0);
  46. renderer.setSize(window.innerWidth, window.innerHeight);
  47. renderer.shadowMapEnabled = true;
  48.  
  49. // create the ground plane
  50. var planeGeometry = new THREE.PlaneGeometry(60,20);
  51. var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
  52. var plane = new THREE.Mesh(planeGeometry,planeMaterial);
  53. plane.receiveShadow = true;
  54.  
  55. // rotate and position the plane
  56. plane.rotation.x=-0.5*Math.PI;
  57. plane.position.x=15
  58. plane.position.y=0
  59. plane.position.z=0
  60.  
  61. // add the plane to the scene
  62. scene.add(plane);
  63.  
  64. // position and point the camera to the center of the scene
  65. camera.position.x = -15;
  66. camera.position.y = 2;
  67. camera.position.z = 0;
  68. scene.position.x = -100
  69. scene.position.y = 100;
  70.  
  71. // add spotlight for the shadows
  72. var spotLight = new THREE.SpotLight( 0xffffff );
  73. spotLight.position.set( -40, 60, -10 );
  74. spotLight.castShadow = true;
  75. scene.add( spotLight );
  76.  
  77. spotLight = new THREE.SpotLight( 0xffffff );
  78. spotLight.position.set( 1, 10, 100 );
  79. spotLight.castShadow = true;
  80. scene.add( spotLight );
  81.  
  82. var nextX = 0;
  83. var nextY = 0;
  84. var nextZ = -0.8;
  85. var steps = 10;
  86. var rotation = 180/steps;
  87. var stairConstruction = new THREE.Object3D();
  88. for (var i = 0; i <= steps; i++) {
  89. var construction = getConstruction();
  90. var param = -0.7;
  91. nextX = nextX + param * Math.sin((degToRad(rotation)) * (i-1));
  92. nextY = nextY + param * Math.cos((degToRad(rotation)) * (i-1));
  93. console.log(nextY);
  94.  
  95. construction.position.x = nextX;
  96. construction.position.y = nextZ;
  97. construction.position.z = nextY;
  98. construction.rotation.y = degToRad(rotation*i);
  99. stairConstruction.add(construction);
  100. nextZ = nextZ + 0.5;
  101. }
  102.  
  103. stairConstruction.position.z =1.5;
  104. scene.add(stairConstruction);
  105.  
  106. // track-ball camera controls
  107. var controls = new THREE.TrackballControls(camera);
  108.  
  109. // add the output of the renderer to the html element
  110. $("#WebGL-output").append(renderer.domElement);
  111.  
  112. // render the scene
  113. render();
  114.  
  115. function render() {
  116. renderer.render( scene, camera );
  117. requestAnimationFrame( render );
  118. controls.update();
  119. }
  120. });
  121.  
  122. function getCylinder() {
  123. var bigCylinder = new THREE.Object3D();
  124. var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x323334});
  125.  
  126. var cylinderGeometry = new THREE.CylinderGeometry(0.1,0.1,0.4);
  127. var cylinder = new THREE.Mesh(cylinderGeometry, cubeMaterial);
  128.  
  129. cylinder.position.y=1.2;
  130. cylinder.position.z = 0.35;
  131. cylinder.castShadow=true;
  132.  
  133. // add the sphere to the scene
  134. var cylinderGeometry2 = new THREE.CylinderGeometry(0.2,0.2,0.2);
  135. var cylinder2 = new THREE.Mesh(cylinderGeometry2, cubeMaterial);
  136.  
  137. cylinder2.position.y = 0.9;
  138. cylinder2.position.z = 1;
  139. cylinder2.castShadow=true;
  140. bigCylinder.add(cylinder2);
  141. bigCylinder.add(cylinder);
  142. return bigCylinder;
  143. }
  144.  
  145. function getConstruction() {
  146. var cubeGeometry = new THREE.CubeGeometry(1.5,0.1,0.75);
  147. var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xffa54f});
  148. var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  149. cube.castShadow = true;
  150.  
  151. // position the cube
  152. cube.position.x=0;
  153. cube.position.y=1.1;
  154. cube.position.z=0;
  155.  
  156. var bigCylinder = getCylinder();
  157. bigCylinder.position.z = -1;
  158.  
  159. var connectingPlateGeo = new THREE.CubeGeometry(0.4, 0.1, 1);
  160. var connectingPlate = new THREE.Mesh(connectingPlateGeo, new THREE.MeshLambertMaterial({color: 0x323334}) )
  161. connectingPlate.position.z = -0.25;
  162. connectingPlate.position.y = 1;
  163. connectingPlate.castShadow = true;
  164. var construction = new THREE.Object3D();
  165.  
  166. construction.add(cube);
  167. construction.add(bigCylinder);
  168. construction.add(connectingPlate);
  169. construction.add(new THREE.AxisHelper(5));
  170.  
  171. return construction;
  172. }
  173.  
  174.  
  175. function degToRad(deg) {
  176. return Math.PI/180 * deg;
  177. }
  178.  
  179. </script>
  180. </body>
  181. </html>
RAW Paste Data