CS460 Computer Graphics - University of Massachusetts Boston

Assignment 2

Assignment 2 on Github Pages

<script type="text/javascript" src="http://get.goxtk.com/xtk_edge.js"></script>
<script type="text/javascript" src="https://get.goxtk.com/xtk_edge.js"></script>

Z-Fighting

easy

hard

XTK

Three.js

WebGL

limited

freedom

Complexity

Functionality

XTK

X.renderer3D

Renderer

Scene

Interaction

Loop

Three.js

THREE.WebGLRenderer

THREE.Scene

THREE.TrackballControls

Loop

Canvas

Canvas

Camera

THREE.PerspectiveCamera

Lighting

THREE.AmbientLight

THREE.DirectionalLight

scene = new THREE.Scene()

camera = new THREE.PerspectiveCamera( fov, ratio, zNear, zFar )

Field of View

Frustum

zNear

zFar

Viewport

Camera

(Eye)

Perspective Projection

Frustum

zNear

zFar

Viewport

Camera

(Eye)

Perspective Projection

Camera

Field of View Angle

camera = new THREE.PerspectiveCamera( fov, ratio, zNear, zFar )

Field of View

Aspect Ratio (4:3, 16:9..)

1

10000

75

renderer = new THREE.WebGLRenderer()

document.body.appendChild ( renderer.domElement )

Canvas

ambientlight = new THREE.AmbientLight()

light = new THREE.DirectionalLight ( 0xffffff, 5.0 )

Color

Intensity

controls = new THREE.TrackballControls ( camera )

<script>
     
  window.onload = function() {

    // .... other code
    
    animate();

  };
    
  function animate() {

     // call it directly again
     requestAnimationFrame( animate );

     // trigger Three.js rendering
     renderer.render( scene, camera );

  };
  
</script>

Loop

XTK

X.cube

Geometry

Material

Three.js

THREE.Mesh

THREE.BoxBufferGeometry

Mesh

THREE.MeshStandardMaterial

geometry = new THREE.BoxBufferGeometry

                                                  ( 20, 20, 20 )

lengthX, lengthY, lengthZ

Geometry defines the shape!

material = new THREE.MeshStandardMaterial

                                             ( { color: 0xffffff } )

Material defines the appearance!

 new THREE.Mesh( geometry, material )

 cube =

$ git pull upstream master
$ git push
$ touch index.html
$ cd 03
<html>
  <head>
    <style>
      html, body { 
        background-color:#000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }
    </style>
    <script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
    <script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
    <script>
      window.onload = function() {


		// Three.js code goes here


        animate();
        
      };

      function animate() {

        requestAnimationFrame( animate );

		// and here...

      };
    </script>
  </head>
  <body></body>
</html>
<html>
  <head>
    <style>
      html, body { 
        background-color:#000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }
    </style>
    <script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
    <script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
    <script>
      window.onload = function() {

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.set( 0, 0, 100 );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        
        ambientLight = new THREE.AmbientLight();
        scene.add( ambientLight );

        light = new THREE.DirectionalLight( 0xffffff, 5.0 );
        light.position.set( 10, 100, 10 );
        scene.add( light );

        geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
        material = new THREE.MeshStandardMaterial({ color: 0xffffff });
        cube = new THREE.Mesh( geometry, material );
        
        scene.add(cube);

        controls = new THREE.TrackballControls( camera );

        animate();
        
      };

      function animate() {

        requestAnimationFrame( animate );

        controls.update();
        renderer.render( scene, camera );

      };
    </script>
  </head>
  <body></body>
</html>

Wireframe

12 Triangles

Lecture 6

By Daniel Haehn

Lecture 6

Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.org!

  • 542