Details are attached. This is for CMSC 405 Graphic Design. 00 T-Mobile LTE 1:50
ID: 3867532 • Letter: D
Question
Details are attached. This is for CMSC 405 Graphic Design. 00 T-Mobile LTE 1:50 AM Done Project 4 (2).pdf Project 4 WebGL 3D Project In this project you will create a unique 3D animated scene composed of WebGL graphic components The scene should include animacion, lighting textures, frame bufflers and multiple oejects. Requirements 1 Using WebGL create a unique 3D animated scene. The scene has the following specifications Sine: minimum 640 480 b- Includes at least 10 different objects. c. Uses multiple lighting effects on different materials d. Uses multiple textures e· Includes radio buttons, slider bars or other widgets to turn ororff certain corponents of the animation t. Uses frame buffers to organize the memory resources that are needed to render the 2. Use WebGL 3 All avaScript source code should be written using Google JavaScript style guide http:llgooge 4. Prepare, conduct and document a test plan verifying your application is working as expected This plan should include a test matrix listing each method you tested, how you tested it, and the results of testing All aScript source code used for this project Code should adhere to the Google Javascript style guide word or PDF descrigtions, the successful execution o your 3D WebGi animated scene. The document should be wel-written, well-organized, include your test plan, include page numbers, captions for all screen captures, and a tiele page including your name, class, section number and date References should be indluded for all sources used and formatted in APA style. 2. e demonstrating with dearly labeled screen captures and associated well-wrtten Grading guidelines: Design 20 points Methods used to isolate functionality (10 points) Code is efficient without sacrificing readability and understanding. I5 be used and maintained. (S 50 points Creates aExplanation / Answer
Per chegg policies this assignment cannot be fully completed for you.
99% of this project is done. You just need to create one or two more random objects. The radio button etc is already incorporated.
You may run the file "index" inside of the particles folder.
Here's the uploaded folder: http://www.filehosting.org/file/details/663502/Demo
(add (DOT)zip to the end of the url chegg won't let me write it out fully..... :/)
Cheers.
you may refer this.
Creating a unique 3D animated scene composed of Three.js graphic components:
To crete a scene first we need to setting up a scene and create a web page using html
We will start by setting up a scene, with a spinning cube.
Before you can use three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of three.js in the js/ directory, and open it in your browser.
<HTML>
<head>
<meta charset= utf-8>
<title>sample three.js application</title>
<style>body {margin: 0;}canvas{ width: 100%; height: 100%}</style>
</head>
</body>
<script src = “js/three.js”></script>
</html>
To actually be able to display anything with three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.
The second one is the aspect ratio. You almost always want to use the width of the element divided by the height, or you'll get the same result as when you play old movies on a widescreen TV - the image looks squished.
Last but not least, we add the renderer element to our HTML document. This is a <canvas> element the renderer uses to display the scene to us.
By default, when we call scene.add(), the thing we add will be added to the coordinates (0,0,0). This would cause both the camera and the cube to be inside each other. To avoid this, we simply move the camera out a bit.
Rendering the scene
function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } animate();
This will create a loop that causes the renderer to draw the scene 60 times per second.
Animating the cube
If you insert all the code above into the file you created before we began, you should see a green box. Let's make it all a little more interesting by rotating it.
Add the following right above the renderer.render call in your animate function:
cube.rotation.x += 0.1; cube.rotation.y += 0.1;
This will be run every frame (60 times per second), and give the cube a nice rotation animation.
<HTML>
<head>
<meta charset= utf-8>
<title>sample three.js application</title>
</head>
<style>body {margin: 0;}canvas{ width: 100%; height: 100%}</style>
<script src = “js/three.js”></script>
<script >var scene=new three.scene();
Var camera = new three.perspectivecamera (75, window.innerwidth/window.inner height, 0.1, 1000);
Var render = new three.webGLRender();
Render.setSize(window.innerwidth, window.innerHeight);
Document.body.appendChild(render.domElement);
Var geometry = new three.BoxGeometry(1,1,1);
Var material = new three.MeshBasicMaterial({ colo: green});
Var cube = new three.Mesh(geometry, material);
Scene.add(cube);
Camera.position.z = 5;
Var animate = function()
{
requestAnimationFrame (animate); cube.rotation.x += 0.1; cube rotation.y += 0.1; render.render(scene,camera);
};
Animate();
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.