I am having problems with HTML and JavaScript I am not having much luck with the tasks that need to be completed This is what I am working on this week Beginning with the example program, create a program that will create 4 3 dimensional objects You can use any of the following geometries supported within the Three js library Sphere Cube Cylinder Torus Torus Knot Tube Using your selected geometry, create a scene in which there are 4 objects that appear as follows CS4406Unit04AssignmentImg01 jpg One of the objects must be coloured with a texture You can select any picture image that you would like for the texture One of the objects should demonstrate transparency There must be enough of the image showing so that we can see that the image exists but it must be partially transparent A third object should demonstrate the use of a solid basic colour, and the fourth should demonstrate the reflection of the local light source 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 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 and it is due at 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 Assignment 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') create a WebGL renderer, camera, and a scene NOTE for the assignment in Unit 4 where you need to use a texture, or in any other assignment where a texture is required you should deactivate the Detector and use ONLY the CanvasRenderer There are some issues in using waht are called Cross Domain images for for textures You can get more details by looking up WebGL and CORS using Google search I have included some code below that will get around this issue that you can use if ( Detector webgl ) var renderer new THREE WebGLRenderer() else 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 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 because the entire scene is moving the position of the camera and lights in relation to objects within the scene doesn't change so the lighting on the surface of the object(s) will not change either 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 END OF YOUR CUSTOM CODE FOR THE ASSIGNMENT The rendering functions that follow are standard and can be used for this assignment You are welcome to customize them or create your own if you desire, however, you can simply use the code provided Standard functions for rendering the scene Notice how we have the animate function which submits a call to requestAnimationFrame to call animate This creates a loop that will render the scene again whenever something within the scene changes function animate() requestAnimationFrame(animate) render() function render() cameraControls update() renderer render(scene, camera) animate()

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

Question: I am having problems with HTML and JavaScript I am not having much luck with the tasks that need to be completed. This is what

I am having problems with HTML and JavaScript I am not having much luck with the tasks that need to be completed.

This is what I am working on this week:

Beginning with the example program, create a program that will create 4 3-dimensional objects. You can use any of the following geometries supported within the Three.js library: Sphere Cube Cylinder Torus Torus Knot Tube Using your selected geometry, create a scene in which there are 4 objects that appear as follows. CS4406Unit04AssignmentImg01.jpg One of the objects must be coloured with a texture. You can select any picture image that you would like for the texture. One of the objects should demonstrate transparency. There must be enough of the image showing so that we can see that the image exists but it must be partially transparent. A third object should demonstrate the use of a solid basic colour, and the fourth should demonstrate the reflection of the local light source. 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 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 and it is due at 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.

Assignment Computer Graphics

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer

Step: 1 Unlock blur-text-image

Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock

Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!

Contents The Team..3 Group Contact Information.3 Mission Statement3 Foundation and Group Communications Plan.3 Group Communications Methods.4 Group Goals.5 Group Development and Norms.6 Developing...

You have all viewed a case video online on the McGraw Hill Website and answered a few multiple choice questions to help remind you about concepts we have studied. The following represent the steps...

Provide details on what concepts or models might help you analyze the data? What conclusions would you draw from the analysis? Using on organization-level diagnostic model, provide detailed analysis...

For this assignment you will be working with text properties and multi-column layouts. Use the text provided for you in the Word doc to create your assignment (It is the history section of the...

Group Project #2 - Short Consulting Case Problem Several weeks ago, your consulting firm was hired to design, program, and implement a sales forecasting program module for a regional product...

1. Read the case study below. This will form the basis for your Project Charter, because you will assume that you are the project manager for this project. 2. After reading the case study, begin to...

1. Read the case study provided below. This will form the basis for your Project Charter, because you will assume that you are the project manager for this project. 2. After reading the case study,...

PROJ6000: Principles of Project Management Assessment 3 - Project Charter Report. Length 2,000 words (+/- 10%) Task Summary After reading the project case study, use it to develop a 2,000-word...

a. Determine the average ac resistance for the characteristics of Fig. 3.10b. b. For networks in which the magnitude of the resistive elements is typically in kilohms, is the approximation of Fig....

What is supply chain management?

What are the main factors contributing to the high cost of cars in the US ?

Gordon Corporation produces 1,000 units of a part per year which are used in the assembly of one of its products. The unit cost of producing these parts is: Variable manufacturing cost $ 15 Fixed...

6. Calculate the total savings by subtracting the training costs from benefits (operational results).

3. Determine the change in performance after eliminating other potential influences on training results.

1. Identify outcomes (e.g., quality, accidents).