CS 135编程实验写作、辅导web，HTML程序

” CS 135编程实验写作、辅导web，HTML程序CS 135: Assignment 3: Fun with WebXRIn this assignment, you will gain experience in basic WebXR development in a web browser.The lab is due in 2 weeks. This is the final lab; for the remaining lab sessions this quarter,please use the time to work on your final projects.Due dateTuesday lab: Dec. 1, 2020 @ 11:59PMThursday lab: Dec. 3, 2020 @ 11:59PMImportant Notes:1. Read all Submission instructions carefully, and submit all required documents.2. The WebXR Documentation( httpss://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API) and samples( httpss://immersive-web.github.io/webxr-samples/) are good sources ofinformation/examples.3. Check Slack for any bugs, updates, or important information for this programmingassignment.Part 1: SetupIn this lab, you Will be Experimenting with WebXR. WebXR provides APIs to render VR/ARcontent from a browser, Using WebGL under the hood. WebXR allows access to VR/AR inputcontrollers, if you have them, but for this lab, we will be using a hardware emulator and workentirely in the browser.To do this, you will need to install a few things:● A recent version of Google Chrome (79+ should be enough, tested on 86). Once youhave done this, you can visit the WebXR sample page httpss://immersive-web.github.io/webxr-samples/, and you should see a greencheckmark at the top showing that your browser supports WebXR.● WebXR API emulator to emulate VR hardware: httpss://chrome.google.com/webstore/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje/● Your favorite web server. The easiest way is probably to run a local web server in yourbrowser using the Web Server for Chrome browser extension:1 httpss://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/Now save and extract the lab files ( https://www.cs.ucr.edu/~jiasi/webxr_lab.zip) onto your localweb server. If youre using Web Server for Chrome, configure the extension to host the labfiles folder.When you open index.html (or whatever localhost Web Server for Chrome is set to), youshould see a scene with 3 cubes. Click Enter VR on the right button to see the view from eacheye.Next open up the WebXR emulator from Chrome menu More Tools Developer Tools WebXR tab. You should have a display similar to that shown below (you may wish to re-arrangethe layout):2There are several important parts of the screen:● Top third of the screen: The WebXR application.● Middle third of the Screen: The emulated VR hardware. Please select Oculus Questin the drop-down menu for this lab. Play around with the headset and controllers torotate and translate them (first click = translation controls, second click = rotationcontrols). On the right, you can see the position and rotation of the headset andcontrollers. There are Select button and Squeeze button controls for each of thecontrollers.● Bottom third of the screen: The console where you can view debug messages.Play around with the default app to get familiar with it. The default behavior is:● Select: When you press and de-press the Select button while interacting with a cube ,its size and color should change.● Squeeze: When You press, move the controller, and de-press the Squeeze buttonwhile interacting with a cube, the cube should follow the controllers position and alsochange color and size. There may be a slight change in the cubes position when youfirst press the button; that is normal.Great, now youre all set up! Lets move on to the fun part!3Part 2You will mainly modify the index.html file for this lab. Open it up and get familiar with theJavascript content. There are comments sprinkled throughout to help you understand. TheWebXR documentation linked in Important Notes above can also help.One thing you may wish to know is that each controller has a ray emanating from it, pointing in astraight line. This ray has both an origin and a direction in world space, and is already visualizedfor you in the default app. For more information, see the documentation.Example of a ray emanating from a controllerFor debugging, you can use commands like console.log(variable name +variable); to print things into the WebXR console.A) The default behavior of the app is that once the Squeeze button is de-pressed, the cubegoes back to its original Position. Modify the code so that the cube stays at its current positionwhen the button is de-pressed. In other words, you can now drag and drop the cubes anywhereyou want in the scene.Hint: Modify the onSqueezeEnd function and comment out the unnecessary lines.B) Next, modify the code so that if the select button did not result in a cube changing color/size(i.e., the hit test failed), then a new cube is created somewhere along the raycast from thecontroller, in a color of your choosing. In other words, you can create new cubes at arbitrarylocations in the scene.Hints: Add the necessary code to the onSelectStart function to create the new box. There isan addBox helper function that may be handy. You can get an idea from onXRFrame on how toget the origin and direction of the targetRayPose emanating from the controller.4Example: new red cubes created surrounding the center green cube.C) Finally, modify the code so that when any two cubes are within 0.25 m of each other, they1both change color to white. For example, if I grab one cube using the squeeze button and dragit on top of another Cube, they should both turn white instantly. A cube should keep its whitecolor even if it moves away. If the select button is pushed on a white cube, a new randomcolor is selected. This should work for both the original cubes and the new cubes you created.Hints: Add the necessary code to the onXRFrame function to detect the intersection and changethe color. There are some useful vector manipulation helper functions (e.g., length) injs/third-party/gl-matrix/src/gl-matrix/vec3.js. The boxes array contains a list of thecurrent cubes in the Scene. onSelect and onSqueeze have examples of how to change the boxcolor.Example: The three cubes in the middle intersected with each other, so they turned white.1 As long as the cubes position attributes are within 0.25 m, you can trigger the color change. You doNOT need to do anything fancier, for example determining if the cube faces are within 0.25 m of eachother.5Grading RubricSubmission Instructions1. Create a zip file containing the following items:a. The index.html file you modified for this lab.b. A README.txt file containing any special instructions or notes you think arerelevant for evaluating your assignment.2. Name the file by separating NetIDs with underscores- _cs135vr_HW3.zip. EXAMPLE: Ifsteve1 and anna2 worked together, the file should be calledsteve1_anna2_cs135vr_HW3.zip3. Only one team member Should submit the zip.Materials from The Immersive Web Community Group httpss://github.com/immersive-web/webxr-samples is gratefully acknowledged.6Name Points DescriptionPart 1Setup 0 Download and install necessary browser and browserextensions, test basic WebXR app. No points.Part 2Cube positions 10 Cubes remain where you put them after squeeze buttonis depressedNew cube 10 A new cube is created along the controllers raycast ifselect button does not interact with an existing cubeCube intersection 10 Intersection of two cubes within 0.25 m detectedColor change 5 Cubes Turn white upon intersectionTotal 35如有需要，请加QQ：99515681 或邮箱：99515681@qq.com

“