[Link]
html
OUTPUT
[Link]
CODE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="[Link]
[Link]"></script>
<meta name="description" content="CS4406 Computer Graphics - Exercise #5"
/>
<meta charset="utf-8" />
<title>Assignment [Link]</title>
<style>
#container {
background: #000000;
width: 100%;
height: 100%;
}
</style>
<meta charset=utf-8 />
<title>CS4406 Computer Graphics - Exercise #5</title>
<style id="jsbin-css">
</style>
</head>
<body>
<div id="container">
</div>
</body>
<script
src="[Link]
/script>
<script
src="[Link]
script>
<script src="[Link]
gui/0.6.5/[Link]"></script>
<script
src="[Link]
[Link]"></script>
This study source was downloaded by 100000857861483 from [Link] on 12-14-2022 15:37:45 GMT -06:00
[Link]
<script
src="[Link]
cript>
<script type="text/javascript">
// set the scene size
var WIDTH = 700, HEIGHT = 700;
// set some camera attributes
var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 1, FAR = 1000;
// get the DOM element to attach to
var $container = $('#container');
// create a WebGL renderer, camera, and a scene
//Set up the renderer to calculate shadows.
var renderer = new [Link]();
[Link] = true;
[Link] = [Link];
//---------------------------------------------//
var scene = new [Link]();
var clock = new [Link]();
var camera = new [Link](VIEW_ANGLE,ASPECT,NEAR,FAR);
var canvas = [Link];
//Create a listener for the canvas element to track the moving of the
user's mouse.
[Link]('mousemove', onMouseMove);
// the camera starts at 0,0,0 so pull it back
[Link].z = 200;
// add the camera to the scene
[Link](camera)
// start the renderer
[Link](WIDTH, HEIGHT);
// attach the render-supplied DOM element
$[Link]([Link]);
//
-------------------------------------------------------------------------
---------------
This study source was downloaded by 100000857861483 from [Link] on 12-14-2022 15:37:45 GMT -06:00
[Link]
// NOTE:
// TO ROTATE THE MOLECULE, MOVE YOUR MOUSE OVER THE MOLECULE IN THE
OUTPUT WINDOW.
// THE MOLECULE IS NOT CONTROLLED BY CLICK-DRAGGING.
//
-------------------------------------------------------------------------
---------------
// Create a point light
var areaLight = new [Link]( 0xffffff, 10);
//Create spotlight for illumination; areaLight does not affect
shininess, etc.
var spotLight = new [Link]( 0xffffff );
[Link]( 0, 80, 0 );
[Link] = true;
// add to the scene
[Link](areaLight, spotLight);
//Define the qualities of the shadows
[Link] = 512;
[Link] = 512;
[Link] = 0.5;
[Link] = 500
[Link] = 1;
// create the materials
//CARBON
var cMaterial = new [Link]( {color: 0xff0000,
emissive:0xa22222, shininess: 10,
specular: 0x0fffff});
//HYDROGEN
var hMaterial = new [Link]( {color: 0x0000ff,
emissive:0x000ff, shininess: 10,
specular: 0x0fffff});
//BONDS
var bGeometry = new [Link]( 5, 5, 20, 32 );
var bMaterial = new [Link]( {color: 0xffffff,
emissive:0xffffff} );
//PLANE
var pGeometry = new [Link]( 500, 500, 500 );
var pMaterial = new [Link]( {color: 0x00FF00,
emissive:0x000000,side: [Link]});
// set up the sphere vars
This study source was downloaded by 100000857861483 from [Link] on 12-14-2022 15:37:45 GMT -06:00
[Link]
var cRadius = 15, cSegments = 32, cRings = 32;
var hRadius = 10, hSegments = 32, hRings = 32;
// create a new mesh with sphere geometry
var carbon = new [Link](
new [Link](cRadius, cSegments, cRings),
cMaterial);
//HYDROGEN
var hydrogen1 = new [Link](
new [Link](hRadius, hSegments, hRings),
hMaterial);
var hydrogen2 = new [Link](
new [Link](hRadius, hSegments, hRings),
hMaterial);
var hydrogen3 = new [Link](
new [Link](hRadius, hSegments, hRings),
hMaterial);
var hydrogen4 = new [Link](
new [Link](hRadius, hSegments, hRings),
hMaterial);
//BONDS
var bond1 = new [Link]( bGeometry, bMaterial );
var bond2 = new [Link]( bGeometry, bMaterial );
var bond3 = new [Link]( bGeometry, bMaterial );
var bond4 = new [Link]( bGeometry, bMaterial );
//Group the carbon, hydrogen, and bonds together to make it easier to
manipulate.
//This can be done simply with the [Link]() Object.
var CH4 = new [Link]();
[Link](carbon, hydrogen1, hydrogen2, hydrogen3, hydrogen4, bond1,
bond2, bond3, bond4);
//PLANE
var plane = new [Link]( pGeometry, pMaterial );
//Set each object's shadow casting/receiving properties
[Link] = true;
[Link] = true;
[Link] = true;
This study source was downloaded by 100000857861483 from [Link] on 12-14-2022 15:37:45 GMT -06:00
[Link]
[Link] = true;
[Link] = true;
[Link] = true;
[Link] = true;
[Link] = true;
[Link] = true;
[Link] = true;
// Add the meshes to the scene
[Link](CH4, plane);
//Place the meshes
//NOTE: We are defining them before the animate function so they
won't be constantly stuck in
//a single position when we try to spin it. Otherwise, the program
will lock them to the given
//position each and every time it renders.
[Link].y = 35;
[Link].y = -15;
[Link].z = 30;
[Link].x = -30;
[Link].y = -15;
[Link].z = -10;
[Link].x = 30;
[Link].y = -15;
[Link].z = -10;
[Link].y = 20;
[Link].y= -10;
[Link].z= 15;
[Link].x= -20;
[Link].x = -15;
[Link].y = -10;
[Link].z = -6;
[Link].y= -.2;
[Link].z= -20;
[Link].x = 15;
[Link].y = -10;
[Link].z = -6;
[Link].y= .2;
This study source was downloaded by 100000857861483 from [Link] on 12-14-2022 15:37:45 GMT -06:00
[Link]
[Link].z= 20;
[Link].y = -45
[Link].x = 300;
//This is the function that will determine how the CH4 reacts to
being "moused over"
//In this case, it will rotate depending on what direction the mouse
is moved; try it out!
function onMouseMove(event) {
[Link].x += [Link] * 0.005;
[Link].y += [Link] * 0.005;
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
[Link](scene, camera);
}
animate();
</script>
</html>
This study source was downloaded by 100000857861483 from [Link] on 12-14-2022 15:37:45 GMT -06:00
[Link]
Powered by TCPDF ([Link])