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>

Final Project

counts as 40% !!

Real use case!

Potential Publication (Deadline 12/15)!

Straight-A Shortcut!

We are now looking for 3-4 highly motivated students!

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( 0x404040 )

Color

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 main
$ 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( 0x404040 );
        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, renderer.domElement );

        animate();
        
      };

      function animate() {

        requestAnimationFrame( animate );

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

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

Wireframe

12 Triangles

Assignment 2 due tonight!!

Lecture 6

By Daniel Haehn

Lecture 6

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

  • 86

More from Daniel Haehn