API tools faq
paste
Advertisement
Guest User

Test

a guest
Sep 10th, 2015
245
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.35 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <script type="text/javascript" src="js/three.min.js"></script>
  5.         <script type="text/javascript" src="js/OrbitControls.js"></script>
  6.         <script type="text/javascript" src="js/OBJLoader.js"></script>
  7.         <script type="text/javascript" src="js/MTLLoader.js"></script>
  8.         <script type="text/javascript" src="js/OBJMTLLoader.js"></script>
  9.         <script>
  10.         'use strict';
  11.        
  12.         window.onload = function() {
  13.             var renderer, scene, camera, ground, box, sphere, ambient_light, sun_light, controls;
  14.             var angle = 0;
  15.             var clock = new THREE.Clock();
  16.            
  17.             init();
  18.             render();
  19.            
  20.             function init(){
  21.                 // Create renderer and add it to the page
  22.                 renderer = new THREE.WebGLRenderer({ antialias: true });
  23.                 renderer.setSize( window.innerWidth, window.innerHeight );
  24.                 renderer.setClearColor( 0x75E6FF ); //0xffffff );
  25.                 renderer.shadowMapEnabled = true;
  26.                 document.body.appendChild( renderer.domElement );
  27.  
  28.                 // Create a scene to hold our awesome 3D world
  29.                 scene = new THREE.Scene();
  30.                
  31.                 /*** 3D WORLD ***/
  32.                 // Objects
  33.                
  34.                 // The ground
  35.                 ground = new THREE.Mesh(
  36.                     new THREE.BoxGeometry(100, 1, 100),
  37.                     new THREE.MeshLambertMaterial({ color: 0x33CC33 }),
  38.                     0 // mass
  39.                 );
  40.        
  41.                 ground.receiveShadow = true;
  42.                 scene.add( ground );
  43.                
  44.                 // The red box
  45.                 box = new THREE.Mesh(
  46.                     new THREE.BoxGeometry( 10, 10, 10 ),
  47.                     new THREE.MeshLambertMaterial({ color: 0xDD3344 })
  48.                 );
  49.                
  50.                 box.position.y = 5;
  51.                 box.castShadow = true;
  52.                
  53.                 scene.add( box );
  54.                
  55.                 var loader = new THREE.OBJMTLLoader();
  56.                 loader.load( 'Assets/edificio.obj', 'Assets/edificio.mtl', function ( object ) {
  57.                     object.position.x = 20;
  58.                     object.position.z = 10;
  59.                     scene.add( object );
  60.                 }/*, onProgress, onError*/ );
  61.                
  62.                 // Rotating sun
  63.                 sphere = new THREE.Mesh(
  64.                     new THREE.SphereGeometry( 3, 32, 32 ),
  65.                     new THREE.MeshBasicMaterial({ color: 0xFFBB00 })
  66.                 );
  67.                 sphere.position.set( 1, 15.5, 5 );
  68.                 scene.add( sphere );
  69.                
  70.                 // Light
  71.                 ambient_light = new THREE.AmbientLight( 0x333333 );
  72.                 ambient_light.mass = 0;
  73.                 scene.add( ambient_light );
  74.  
  75.                 sun_light = new THREE.DirectionalLight( 0xBBBBBB );
  76.                 sun_light.position.set( 1, 15.5, 5 );
  77.                 sun_light.castShadow = true;
  78.  
  79.                 sun_light.shadowCameraNear = 1;
  80.                 sun_light.shadowCameraFar = 100;
  81.  
  82.                 sun_light.shadowCameraLeft = -50;
  83.                 sun_light.shadowCameraRight = 50;
  84.                 sun_light.shadowCameraTop = -50;
  85.                 sun_light.shadowCameraBottom = 50;
  86.  
  87.                 sun_light.shadowBias = -.01;
  88.                
  89.                 scene.add( sun_light );
  90.  
  91.                 // Create a camera
  92.                 camera = new THREE.PerspectiveCamera(
  93.                     45,                                     // FOV
  94.                     window.innerWidth / window.innerHeight, // Aspect Ratio
  95.                     1,                                      // Near plane
  96.                     1000                                    // Far plane
  97.                 );
  98.                 camera.position.set( 30, 30, 30 ); // Position camera
  99.                 camera.rotation.y = 120;
  100.                 camera.lookAt( scene.position ); // Look at the scene origin
  101.                
  102.                 scene.add(camera);
  103.                
  104.                 // Set up orbit controls
  105.                 controls = new THREE.OrbitControls( camera, renderer.domElement );
  106.                
  107.                 window.addEventListener( 'resize', onWindowResize, false );
  108.            
  109.             }
  110.    
  111.             function render() {
  112.                 // Quickly calculate delta
  113.                 var delta = clock.getDelta();
  114.                
  115.                 // Make sun rotate around, how to make it go slower?
  116.                 angle += .007;
  117.                 var oscillateZ = Math.sin(angle * (Math.PI*4));
  118.                 var oscillateX = -Math.cos(angle * (Math.PI*4));
  119.                 //console.log(oscillateZ);
  120.                 sphere.position.setZ( sphere.position.z + oscillateZ );
  121.                 sphere.position.setX( sphere.position.x + oscillateX );
  122.                 sun_light.position.setZ( sun_light.position.z + oscillateZ );
  123.                 sun_light.position.setX( sun_light.position.x + oscillateX );
  124.  
  125.                 controls.update();
  126.                
  127.                 // Request a browser frame, then render scene with camera looking at scene
  128.                 requestAnimationFrame( render );
  129.                 renderer.render( scene, camera );
  130.             }
  131.            
  132.             function onWindowResize() {
  133.                 camera.aspect = window.innerWidth / window.innerHeight;
  134.                 camera.updateProjectionMatrix();
  135.              
  136.                 renderer.setSize( window.innerWidth, window.innerHeight );
  137.             }
  138.            
  139.         };
  140.         </script>
  141.     </head>
  142.  
  143.     <body><figure id="basic-scene"></figure></body>
  144. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!