Manual
User Manual: Pdf
Open the PDF directly: View PDF 
.
Page Count: 14
Aanchal Sharma
Abstract
This project aims to create a 3D object by drawing three 2D "elevations". The project
implements many features like: modeling, transform object by applying 3D
(Translate/Rotate/Scale/SHear) transformations to the created object, viewing the created
object from multiple views and generating different projections of the objects.
Introduction
The project will employ the use of WebGL which is a JavaScript API for rendering interactive
2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is
integrated completely into all the web standards of the browser, allowing GPU-accelerated usage
of physics and image processing and effects as part of the web page canvas. WebGL elements
can be mixed with other HTML elements and composited with other parts of the page or page
background. Due to this reason I am choosing to work with it. The project will be able to render
user defined images in 3D and also provide the ability to
Transform the object
V_i_e_w_ _t_h_e_ _o_b_j_e_c_t_ _f_r_o_m_ _m_u_l_t_i_p_l_e_ _v_i_e_w_s
Transform the lighting of the object
Generate different projection of the object
Change the perspective projection vanishing points
Create texture/bump/environmental mappings of the object
Analysis and Design
Week 1: Please refer:
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v1/finalProject.html
I created the full working model of front and side view of my dream house.
Week 2:
Please refer:
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v2/2dTransformations.h
tml. I created the full working model of top view of my dream house. Select R to rotate the view;
S for scaling, T for translation; SX for Skewing X-axis; SY for Y-axis Skew and Reset to enter
the state representing the natural state.
I also added a html page to display various planar geometric projections for a cube which we
studied in class. In order to view, please refer:
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v2/projections.html
I added the top view of my dream house and the various projections of a cube.
2dTransformations.html deals with all the 2 Dimensional Transformations of dream house and
Projections.html has the various Geometric Projections of cube.
Week 3:
1) I created a 3D Transformation of a cube. For that please refer 3dCube.html file
3dCube.html 3DMouse.html
2) I created a 3D Transformation of an object. The transformation changes with the mouse
pointer. To view please open the 3DMouse.html file
3) Created a floating object for a hut. To view please refer 3DFloatingHouse.html file
3DFloatingHouse.html
4) Implemented 3D View of a room. The view changes with the movement of mouse. To view
please refer room.html file.
The initial view looks something like:
room.html
This is nothing but a room’s wall.
Click anywhere on the wall/screen and you will be redirected inside the room.
The inside view of the room
Week 4:
Page1: Periodic Table
The Tags used in creation of this webpage are: HTML5, javascript, canvas, three.js, animation,
colors. The script files used here are: three.js, tween.min.js, TrackballControls.js and
CSS3DRenderer.js Check out the online demo at
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v4/periodicTable.html.
Table View
Sphere View
Helix View
Grid View
Page 2: 3D Animation Lines for animated background color
The Tags used in creation of this webpage are: HTML5, javascript, canvas, three.js, animation,
colors. I’m using three.min.js as main JavaScript Library. For Visualization, 3d-lines-
animation.js file is used. And then for frequent animated background color, color.js file is used.
The Background color keeps changing and 3D Lines can be explored by dragging the mouse
onto them. Check out the online demo at
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v4/3DAnimationLines.
html. The script is fully configurable (colors, lines, opacities, perspectives).
3DAnimationLines.html
Page 3: Basic Camera Movement using three.js and WebGL
The JS file used for for the understanding of the Basics of Camera Movement is Detector.js and
three.min.js files. The Tags used in creation of this webpage are: HTML5, javascript, canvas,
three.js, animation, camera. I gave the drop-down at the top right to switch between tilt, pan,
zoom, pedestal, dolly and truck/track.
Movement DropDown
For Demo, please click:
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v4/cameraMovement.ht
ml
Top View
Side View
Week 5:
This Week I implemented the following Pages:
Page 1: Texture Mapping
textureMapping.html
I am using Detecter JS for this. I am drawing the picture on canvas and later the picture is
reflected on to the sides of the cube. Check out the online demo at
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v5/textureMapping.htm
l
The required script files are:
<script src="js/three.js"></script>
<script src="js/Detector.js"></script>
Page 2: Shadow Mapping
I created two light bulbs, one cylinder, one pyramid, one cube and one sphere. The sphere,
pyramid and light bulbs are static, they don’t change their position. Whereas the cylinder and
cube moves. And the shadow can be seen on the surface. Check out the online demo at
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v5/shadowMapping.ht
ml
The required script files are:
<script src="js/three.js"></script>
<script src="js/ShadowMesh.js"></script>
shadowMapping.html
Page 3: pa2.html
In order to get familiar with lighting which is also fundamental to creating any scene, using
WebG, this is the best page to visit. In this assignment, I’m writing some code to help me
understand on how the lighting equations work. Check out the online demo at
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v5/pa2.html
The required script files are:
<script src="js/gl-matrix-min.js"></script> - utility functions for operating matrices
<script src="js/trackball-rotator.js"></script> - utility functions for rotating the scene using the
cursor
<script src="js/model.js"></script> - file describing the models in IFS format
<script src="js/pa2.js"></script> - functions used to draw the scene.
Page 4: BatMan.html
This is for extra credit. I hope you enjoy it! Check out the online demo at
http://www.cs.uml.edu/~asharma/427546s2018/finalProject/finalProject_v5/batman.html
The required script files are:
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/stats.js"></script>
<script type="text/javascript" src="js/dat.gui.js"></script>
<script type="text/javascript" src="js/d3-threeD.js"></script>
<script type="text/javascript" src="js/OrbitControls.js"></script>
Batman.html
Note: WebGL runs within the browser, so is independent of the operating and
window systems. You may finish the assignment using any operating system you like, e.g.
Windows, OSX or Linux. Programming language: The assignment will be implemented in
JavaScript.
