API tools faq
paste
jhylands

objects stable

jhylands
Jul 10th, 2013
218
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 8.95 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Introduction to Computer Graphics</title>    
  5.     <script src="js/three.js"></script>
  6.     <script src="js/THREEx.KeyboardState.js"></script>
  7.     <script>
  8.     /**
  9.      * This sample demonstrates how to use Three.js to create a simple, interactive graphical scene.
  10.      * Some of the code has been adapted from the Three.js documentation and from Lee Stemkoski's Three.js "tutorials by example".
  11.      */
  12.     function UpdatePosition(asteroid){
  13.     asteroid.myMesh.position.x+=asteroid.velocity.x;
  14.     asteroid.myMesh.position.y+=asteroid.velocity.y;
  15.     asteroid.myMesh.position.z+=asteroid.velocity.z;
  16.     }
  17.     function BounceBox(asteroid){
  18.     if(asteroid.myMesh.position.x>6 || asteroid.myMesh.position.x<-6){
  19.             asteroid.velocity.x=asteroid.velocity.x*-1;
  20.             }
  21.             if(asteroid.myMesh.position.y>4 || asteroid.myMesh.position.y<-4){
  22.             asteroid.velocity.y=asteroid.velocity.y*-1;
  23.             }
  24.             if(asteroid.myMesh.position.z>-16 || asteroid.myMesh.position.z<-40){
  25.             asteroid.velocity.z=asteroid.velocity.z*-1;
  26.             }
  27.     }
  28.    window.onload = function() {
  29.  
  30.        var renderer = new THREE.WebGLRenderer();
  31.        renderer.setSize( window.innerWidth-10,  window.innerHeight);
  32.        document.body.appendChild( renderer.domElement );
  33.  
  34.        var scene = new THREE.Scene();
  35.  
  36.        var camera = new THREE.PerspectiveCamera(
  37.            35,             // Field of view
  38.            800 / 600,      // Aspect ratio
  39.            0.1,            // Near plane
  40.            10000           // Far plane
  41.        );
  42.        camera.position.set( 0, 0, 0 );
  43.        camera.lookAt( scene.position );
  44.        
  45.         var keyboard = new THREEx.KeyboardState();
  46.         //Geometry of shapes-------------------------------------------------------------------------------------
  47.         var IcosahedronGeometry = new THREE.TorusGeometry(2.5,0.1);
  48.         var sphereGeometry2 = new THREE.IcosahedronGeometry(0.5,2);
  49.        var cubeGeometry = new THREE.CubeGeometry(1,1,1)
  50.        var aGeometry = new THREE.SphereGeometry(1,0);
  51.        var aWingGeometry = new THREE.CylinderGeometry(1,2,1)
  52.         var icosaMaterial = new THREE.MeshLambertMaterial('images/cockpit.gif' );
  53.         var sphereMaterial2 = new THREE.MeshLambertMaterial({ color: 0x00FFFF });
  54.         var crateTexture = new THREE.ImageUtils.loadTexture( 'images/cockpit.gif' );
  55.         var sphereTexture = new THREE.MeshLambertMaterial( { color: 0xFF00FF });
  56.         var cubeMaterial = new THREE.MeshLambertMaterial( { map:crateTexture } );
  57.        var aMaterial = new THREE.MeshLambertMaterial('images/alien_body.gif');
  58.        var aWingMaterial = new THREE.MeshLambertMaterial({color: 0xFF0000})
  59.         //End of geometory of shapes----------------------------------------------------------------------------
  60.         //body refures to the main space ship
  61.         //Create cockpits
  62.         var cubeGeometry = new THREE.CubeGeometry(1,1,1);
  63.        var myObject =  new THREE.Mesh( cubeGeometry,cubeMaterial );
  64.         myObject.rotation.set(1,1,0);
  65.         myObject.position.set(-0.7,1.59,-19);
  66.         scene.add(myObject);
  67.         //spacephip components
  68.         var body = new Object();
  69.         body.asteroid = new Object();
  70.         body.asteroid.myMesh = new THREE.Mesh(IcosahedronGeometry,icosaMaterial );
  71.         body.asteroid.myMesh.position.set(-0.7,1.59,-19);
  72.         scene.add(body.asteroid.myMesh);
  73.         //create blue balls
  74.         var angOfRot = 0;
  75.        body.power= new Array();
  76.        var ship_radius = 2.2;
  77.        var angle = 0;
  78.        var pi = 3.1415926;
  79.        for (i=0;i<6;i++){
  80.                angle = i*pi/3;
  81.                body.power[i]=new Object();
  82.                body.power[i].myMesh = new THREE.Mesh(sphereGeometry2, sphereMaterial2);
  83.                body.power[i].myMesh.position.set(-0.8+ship_radius*Math.cos(angle),1.6+ship_radius*Math.sin(angle),-19);
  84.                scene.add(body.power[i].myMesh);          
  85.        }
  86.         //adding alien components
  87.         //alien components
  88.        var aBody = new Object();
  89.        var aWing = new Object();
  90.        var aliens = new Array();
  91.        for(z=0;z<10;z++);{
  92.         aliens[z] = new Array();
  93.         for(x=0;x<5;x++){
  94.             //generate the alian's properties
  95.             aliens[z][x] = new Object();
  96.             aliens[z][x].aBody = new Object();
  97.             aliens[z][x].aWing = new Object();
  98.             //generate the alians body
  99.             aliens[z][x].aBody.myMesh = new THREE.Mesh(aGeometry, aMaterial);
  100.             aliens[z][x].aBody.myMesh.position.set(2*x-10,0,2*z-30);//-3,0,0
  101.             scene.add(aliens[z][x].aBody.myMesh);
  102.             //generate the alians wing
  103.             aliens[z][x].aWing.myMesh = new THREE.Mesh(aWingGeometry, aWingMaterial);
  104.             aliens[z][x].aWing.myMesh.position.set(2*x-10,-1,2*z-30);//-3,-1,0
  105.             scene.add(aliens[z][x].aWing.myMesh);
  106.            
  107.             }
  108.         }
  109.         /* !!!! STEP 1:
  110.         * Change the background colour to a medium shade of blue.
  111.         */
  112.         renderer.setClearColorHex( 0x000000, 1 );
  113.         var planeGeometry = new THREE.PlaneGeometry(35,25,1,1);
  114.         var planeTexture = new THREE.ImageUtils.loadTexture( 'images/milkyway.jpg' );
  115.         var planeMaterial = new THREE.MeshLambertMaterial( { map:planeTexture } );
  116.        /* !!!! STEP 2:
  117.         * Create a sphere mesh and then add it to the scene.
  118.         * The sphere's structure should be defined by the variable sphereGeometry
  119.         * The sphere's appearance should be defined by the variable sphereMaterial
  120.         */
  121.         myPlane = new THREE.Mesh( planeGeometry,planeMaterial );
  122.         myPlane.position.set(0,0,-40);
  123.         scene.add(myPlane);
  124.         //asteroid
  125.         var asteroid = new Object();
  126.         asteroid.velocity = new Object();
  127.         asteroid.velocity.x =0.1;
  128.         asteroid.velocity.y =0.1;
  129.         asteroid.velocity.z =0.1;
  130.         var sphereGeometry = new THREE.IcosahedronGeometry(1,-2);
  131.         //var sphereGeometry = new THREE.PlaneGeometry(1,3,2,0);
  132.         var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xFF0000 } );
  133.         var crateTexture = new THREE.ImageUtils.loadTexture( 'images/crate.gif' );
  134.         var cubeMaterial = new THREE.MeshLambertMaterial( { map:crateTexture } );
  135.        /* !!!! STEP 2:
  136.         * Create a sphere mesh and then add it to the scene.
  137.         * The sphere's structure should be defined by the variable sphereGeometry
  138.         * The sphere's appearance should be defined by the variable sphereMaterial
  139.         */
  140.         asteroid.myMesh = new THREE.Mesh( sphereGeometry,cubeMaterial );
  141.         asteroid.myMesh.position.set(-1,1,-20);
  142.         scene.add(asteroid.myMesh);
  143.         /* !!!! STEP 3:
  144.         * Position the sphere so that it is in the top left hand corner of the
  145.         * screen and is slightly further away from the camera than it would be
  146.         * by default.
  147.         */
  148.         /* !!!! STEP 4:
  149.         * STEP 4.1: Add the light source to the scene.
  150.         * STEP 4.2: Change the colour of the light so that the sphere appears purple.
  151.         */
  152.        
  153.         var light = new THREE.PointLight( 0xFFFFFF );
  154.        light.position.set( 10, 0, 10 );
  155.         scene.add(light);
  156.        
  157.         /* !!!! STEP 5:
  158.         * STEP 5.1: Create a 1 by 1 by 1 cube and add it to the scene.
  159.         * STEP 5.2: Rotate the cube so that more than one of its faces are visible.
  160.         * STEP 5.3: Use crateTexture as a surface for your cube
  161.         */
  163.         var cubeGeometry = new THREE.CubeGeometry(1,1,1);
  164.         var myObject =  new THREE.Mesh( cubeGeometry,cubeMaterial );
  165.         myObject.rotation.set(0.7,0.5,0);
  166.         myObject.position.set(-1,4,-20);
  167.        
  168.         scene.add(myObject);
  169.         function update() {
  170.             /* !!!! STEP 6:
  171.             * Increment the rotation of your cube in the x and y dimensions so that
  172.             * it rotates continually.
  173.             */
  174.             asteroid.myMesh.rotation.x+= 0.05;
  175.             asteroid.myMesh.rotation.y+= 0.05;
  176.             asteroid.myMesh.rotation.z+= 0.05;
  177.             //move the asteroid about
  178.             UpdatePosition(asteroid);
  179.             BounceBox(asteroid);
  180.            
  181.             /* !!!! STEP 7:
  182.             * Allow the user to change the position of the cube using the arrow keys
  183.             * If the "up" key is pressed, the cube should move upwards.
  184.             * If the "down" key is pressed, the cube should move downwards.
  185.             * If the "left" key is pressed, the cube should move to the left.
  186.             * If the "right" key is pressed, the cube should move to the right.
  187.             */
  188.             //MOVEMENT CONTROLLS
  189.             if(keyboard.pressed("Y")){
  190.             myObject.position.y+=0.1;
  191.             }else if(keyboard.pressed("H")){
  192.             myObject.position.y-=0.1;
  193.             }else if(keyboard.pressed("G")){
  194.             myObject.position.x-=0.1;
  195.             }else if(keyboard.pressed("J")){
  196.             myObject.position.x+=0.1;
  197.             }else if(keyboard.pressed("T")){
  198.             myObject.position.z-=0.1;
  199.             }else if(keyboard.pressed("U")){
  200.             myObject.position.z+=0.1;
  201.             }
  202.             //ROTATION CONTROLLS
  203.             if(keyboard.pressed("W")){
  204.             myObject.rotation.x+=0.05;
  205.             }else if(keyboard.pressed("S")){
  206.             myObject.rotation.x-=0.05;
  207.             }else if(keyboard.pressed("A")){
  208.             myObject.rotation.y-=0.05;
  209.             }else if(keyboard.pressed("D")){
  210.             myObject.rotation.y+=0.05;
  211.             }else if(keyboard.pressed("Q")){
  212.             myObject.rotation.z-=0.05;
  213.             }else if(keyboard.pressed("E")){
  214.             myObject.rotation.z+=0.05;
  215.             }
  216.         }
  217.        
  218.         //Render Loop
  219.         function render() {
  220.             //Call the update function
  221.             update();
  222.             //Re-draw the scene
  223.             renderer.render(scene, camera);
  224.             //Re-call the render function when the next frame is ready to be drawn
  225.             requestAnimationFrame(render);
  226.         }
  227.         requestAnimationFrame(render);
  229.    };
  230.    </script>
  231. </head>
  232. <body>
  233.  
  234. </body>
  235. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!