For the unit 5 assignment, you will utilize many of the capabilities that we have already learned within the course to create, using geometry, lighting, color, transformation and the other aspects of the 3D graphics environment, a model of the Methane molecule The methane molecule is comprised of 5 atoms including 1 carbon atom and 4 hydrogen atoms U5 20Assignment 201 jpg Your model should look like the figure above and be constructed using sphere objects for the atoms and cylinders or tubes to represent the bonds You should use the color blue for the hydrogen atoms, the color red for the carbon atom and the bonds should be white You must enable animation for your model and mouse controls should be enabled so that the user of your program can rotate the molecule in any direction You must also add a Plane object to your scene The plane object simply provides a flat surface behind the object that can both reflect light and also show the shadows that are created by the position of the object interacting with the light source Make sure that only YOUR OBJECT moves and not the plane Make sure that you document your code with liberal comments to ensure that a reviewer understands what you were attempting to do within the assignment Grading Rubric When you have completed the assignment, you must click on the share button and copy both the Live and Full Preview and the Code View URLs and submit with your assignment You will have ONE WEEK to complete this assignment It will be due the end of this unit Your assignment will be assessed (graded) by your peers using the following rubric You should post this assignment by submitting the URLs from the Jsbin com environment for both the Live and Full Preview and the Code View You can also submit your javascript code but you should only cut and paste the code into the submission dialogue box DO NOT attached the source code document Rubric Items You will have ONE WEEK to complete this assignment It will be due the end of this unit Your assignment will be assessed (graded) by your peers using the following rubric You should post this assignment, the results, and other requirements in one of the following formats Directly cut and pasted into the text box for the posting As a document in either RTF or Word 97 2003 format Rubric Items Does the assignment display a model of a Methane molecule (Yes No) Does the assignment display a plane in the scene (Yes No) Does the object within the assignment generate shadows on the surface of the plane as it interacts with the lighting source (Yes No) Are mouse controls enabled so that the molecule object can be rotated by the programs user (Yes No) Do the mouse controls move only the object and not the plane or lighting sources (Yes No) Was the javascript Three js code well documented (Scale of 1 4 where 1 is no comments and 4 is comprehensive comments) Code not working in http jsbin com html,output Look here at version http jsbin com defewiq edit html,output Assignment 4 for CS4406 Computer Graphics container background 000000 width 100 height 100 set the scene size var WIDTH 600, HEIGHT 600 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') var renderer new THREE CanvasRenderer() var scene new THREE Scene() var clock new THREE Clock() var camera new THREE PerspectiveCamera(VIEW ANGLE,ASPECT,NEAR,FAR) the camera starts at 0,0,0 so pull it back for some assignments you may need to adjust this value some distance to make the scene visible properly camera position z 200 camera position y 100 add the camera to the scene scene add(camera) set up the camera controls Please keep in mind that what this does is move the entire scene around renderer shadowMapEnabled true renderer shadowMapSoft true renderer shadowMapType THREE BasicShadowMap renderer shadowMapAutoUpdate true renderer shadowCameraNear 50 renderer shadowCameraFar 300 renderer shadowCameraFov 50 renderer shadowMapBias 0 0039 renderer shadowMapDarkness 0 5 renderer shadowMapWidth 800 renderer shadowMapHeight 800 CAMERA CONTROLS var cameraControls new THREE OrbitControls(camera, renderer domElement) cameraControls addEventListener( 'mousemove', renderer ) start the renderer renderer setSize(WIDTH, HEIGHT) attach the render supplied DOM element $container append(renderer domElement) Example of Code that you can adapt to get around the issue of Cross Domain issues and CORS restrictions using textures We have this problem when using jsbin com as a development environment becuase we cannot load texture images to the local server Rather we need to pull them from location using a web URL You can use the images that we have put on the uopeopleweb com site along with the following code (modified of course for your particular program) Notice that what this code does is create a new Texture object called Texture1 and loads the texture image into the object var Texture1 new THREE Texture() var loader new THREE ImageLoader() loader addEventListener( 'load', function ( event ) Texture1 image event content Texture1 needsUpdate true ) loader load( 'http uopeopleweb com js paper jpg' ) END OF THE STANDARD CODE FOR THE ASSIGNMENT Following this is where you must place your own custom code to complete the assignment CENTER SPHERE create the sphere for the molecule's center var center new THREE SphereGeometry(17,20,20) var materialCenter new THREE MeshPhongMaterial( ambient 0x980023, color 0x980023, specular 0x980023, shininess 90,wireframe false ) meshCenter new THREE Mesh(center, materialCenter) meshCenter position z 0 meshCenter position x 0 meshCenter position y 0 meshCenter receiveShadow true meshCenter castShadow true scene add(meshCenter) MATERIALS creates one material, used in all cylinders var material1 new THREE MeshPhongMaterial( ambient 0xffffff, color 0xffffff, specular 0xffffff, shininess 60, wireframe false ) creates one material, used in all small balls var materialSphere1 new THREE MeshPhongMaterial( ambient 0xffffff, color 0x64aad0, specular 0xffffff, shininess 60,wireframe false ) create the TOP cylinder var cylinder1 new THREE CylinderGeometry(3, 3, 35, 5, 5) meshCylinder1 new THREE Mesh(cylinder1, material1 ) meshCylinder1 position y 20 meshCylinder1 overdraw true scene add(meshCylinder1) create TOP sphere var sphere1 new THREE SphereGeometry(8,9,9) meshSphere1 new THREE Mesh(sphere1, materialSphere1) meshSphere1 position z 0 meshSphere1 position x 0 meshSphere1 position y 43 meshSphere1 receiveShadow true meshSphere1 castShadow true scene add(meshSphere1) adds sphere to canvas create the SECOND cylinder var cylinder2 new THREE CylinderGeometry(3, 3, 40, 5, 5) meshCylinder2 new THREE Mesh(cylinder2, material1 ) meshCylinder2 position y 5 meshCylinder2 position x 20 meshCylinder2 position z 14 meshCylinder2 rotation z 38 Math PI 180 meshCylinder2 rotation x 38 Math PI 180 cylinder2 overdraw true meshCylinder2 receiveShadow true meshCylinder2 castShadow true scene add(meshCylinder2) adds cylinder to canvas creates SECOND side sphere var sphere2 new THREE SphereGeometry(8,9,9) meshSphere2 new THREE Mesh(sphere2, materialSphere1) meshSphere2 position y 20 meshSphere2 position z 22 meshSphere2 position x 31 meshSphere2 receiveShadow true meshSphere2 castShadow true scene add(meshSphere2) adds sphere to canvas create the THIRD cylinder var cylinder4 new THREE CylinderGeometry(3, 3, 40, 5, 5) meshCylinder4 new THREE Mesh(cylinder4, material1 ) meshCylinder4 position y 10 meshCylinder4 position x 30 meshCylinder4 position z 0 meshCylinder4 rotation y 0 meshCylinder4 rotation x 0 meshCylinder4 rotation z 50 Math PI 180 meshCylinder4 receiveShadow true meshCylinder4 castShadow true scene add(meshCylinder4) creates THIRD side sphere var sphere4 new THREE SphereGeometry(8,9,9) meshSphere4 new THREE Mesh(sphere4, materialSphere1) meshSphere4 position y 20 meshSphere4 position z 0 meshSphere4 position x 40 meshSphere4 receiveShadow true meshSphere4 castShadow true scene add(meshSphere4) create the 4TH cylinder var cylinder5 new THREE CylinderGeometry(3, 3, 40, 5, 5) meshCylinder5 new THREE Mesh(cylinder5, material1 ) meshCylinder5 position x 0 meshCylinder5 position y 10 meshCylinder5 position z 30 meshCylinder5 rotation y 55 meshCylinder5 rotation z 5 3 meshCylinder5 receiveShadow true meshCylinder5 castShadow true scene add(meshCylinder5) creates 4TH side sphere var sphere5 new THREE SphereGeometry(8,9,9) meshSphere5 new THREE Mesh(sphere5, materialSphere1) meshSphere5 position y 20 meshSphere5 position z 45 meshSphere5 position x 0 meshSphere5 receiveShadow true meshSphere5 castShadow true scene add(meshSphere5) PLANE creates a 300x300 plane var planeMaterial new THREE MeshBasicMaterial( color 0x3c601c, wireframe false, side THREE DoubleSide ) var plane new THREE PlaneGeometry(300, 300, 10, 10) planeMesh new THREE Mesh(plane, planeMaterial) plane overdraw true sets the position of the plane about y axis planeMesh position y 30 rotates the plane 90 degrees to a horizontal plane planeMesh rotation x Math PI 2 planeMesh receiveShadow true planeMesh castShadow true adds plane to scene scene add(planeMesh) POINT LIGHT add a point light var pointLight new THREE PointLight() pointLight position set(15,60,50) pointLight castShadow true pointLight shadowBias 0 002 scene add(pointLight) add directional light var theLight new THREE DirectionalLight( 0xffffff ) theLight position set( 0, 10, 2 ) normalize() theLight target position set(0, 0, 0) theLight castShadow true theLight intensity 1 theLight shadowDarkness 0 2 scene add(theLight) adds light to scene add subtle blue ambient lighting var ambientLight new THREE AmbientLight(0x000044) scene add(ambientLight) add a spot light var spotLight new THREE SpotLight( 0xffffff, 1, 0, Math PI 2, 1 ) spotLight position set( 10, 20, 100 ) spotLight target position set( 0, 30, 0 ) spotLight intensity 1 5 spotLight castShadow true spotLight shadowMapWidth 130 spotLight shadowMapHeight 130 spotLight shadowDarkness 0 7 spotLight shadowCameraFov 40 defines boundary of box of light spotLight shadowCameraNear 2 spotLight shadowCameraFar 5 spotLight shadowCameraLeft 0 5 spotLight shadowCameraRight 0 5 spotLight shadowCameraTop 0 5 spotLight shadowCameraBottom 0 5 scene add(spotLight) END OF YOUR CUSTOM CODE FOR THE ASSIGNMENT function animate() requestAnimationFrame(animate) render() function render() cameraControls update() renderer render(scene, camera) animate()

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Sep 22, 2024

For the unit 5 assignment, you will utilize many of the capabilities that we have already learned within the course to create, using geometry, lighting,

For the unit 5 assignment, you will utilize many of the capabilities that we have already learned within the course to create, using geometry, lighting, color, transformation and the other aspects of the 3D graphics environment, a model of the Methane molecule. The methane molecule is comprised of 5 atoms including 1 carbon atom and 4 hydrogen atoms.

U5%20Assignment%201.jpg

Your model should look like the figure above and be constructed using sphere objects for the atoms and cylinders or tubes to represent the bonds. You should use the color blue for the hydrogen atoms, the color red for the carbon atom and the bonds should be white.

You must enable animation for your model and mouse controls should be enabled so that the user of your program can rotate the molecule in any direction.

You must also add a Plane object to your scene. The plane object simply provides a flat surface behind the object that can both reflect light and also show the shadows that are created by the position of the object interacting with the light source. Make sure that only YOUR OBJECT moves and not the plane.

Make sure that you document your code with liberal comments to ensure that a reviewer understands what you were attempting to do within the assignment.

Grading Rubric

When you have completed the assignment, you must click on the share button and copy both the Live and Full Preview and the Code View URLs and submit with your assignment.

You will have ONE WEEK to complete this assignment. It will be due the end of this unit. Your assignment will be assessed (graded) by your peers using the following rubric. You should post this assignment by submitting the URLs from the Jsbin.com environment for both the Live and Full Preview and the Code View. You can also submit your javascript code but you should only cut and paste the code into the submission dialogue box. DO NOT attached the source code document:

Rubric Items

Directly cut-and-pasted into the text box for the posting.

As a document in either RTF or Word 97/2003 format.

Rubric Items

Does the assignment display a model of a Methane molecule? (Yes/No)

Does the assignment display a plane in the scene? (Yes/No)

Does the object within the assignment generate shadows on the surface of the plane as it interacts with the lighting source? (Yes/No)

Are mouse controls enabled so that the molecule object can be rotated by the programs user? (Yes/No)

Do the mouse controls move only the object and not the plane or lighting sources? (Yes/No)

Was the javascript / Three.js code well documented (Scale of 1-4 where 1 is no comments and 4 is comprehensive comments)

Code not working in http://jsbin.com/?html,output

Look here at version: