SHARE
TWEET

Untitled

a guest Mar 24th, 2019 74 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
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top