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 ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Sep 24, 2024

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