Overview

Folder Structure

RobotKitchen
│   README.md
│
└───Ex1
│   │   Ex1.html
│   │   kitchen-env.js
│   
└───Ex2
│   │   Ex2.html
│   │   robot.js
│   │   robot-right.js
│   
└───Ex3
│   │   Ex3.html
│   │   lighting.js
│  
└───Ex4
│   │   Ex4.html
│  
└───Ex5
│   │   Ex5.html
│   │   Ex5-debug.html
│  
└───Assets
│   │   ...

Finalized Links

• Exercise 1: https://deadpan-plant.surge.sh/Ex1/Ex1.html
• Exercise 2: https://deadpan-plant.surge.sh/Ex2/Ex2.html
• Exercise 3: https://deadpan-plant.surge.sh/Ex3/Ex3.html
• Exercise 4: https://deadpan-plant.surge.sh/Ex4/Ex4.html
• Exercise 5(tested with Meta Quest Pro): https://deadpan-plant.surge.sh/Ex5/Ex5.html

Reference

Course Material and Useful Links

• Instruction PDF: https://imlex.couleur.org/courses/Realtime3D-XR-Visualization/PW1-Robot_in_kitchen.pdf
• Three.js Documentation: https://threejs.org/docs/
• Web Publishing Tool: https://surge.sh/
• VR Simulation:
  • official link: https://chromewebstore.google.com/detail/immersive-web-emulator/cgffilbpcibhmcfbgggfhfolhkfbhmik
  • usage guide blog: https://www.crossroad-tech.com/entry/immersive-web-emulator

Three.js Cheat Sheet

Objects

• THREE.CylinderGeometry( radiusTop : number, radiusBottom : number, height : number, radialSegments : number, heightSegments : number, openEnded : boolean, thetaStart : number, thetaLength : number )
• THREE.SphereGeometry (radius : number, widthSegments : number, heightSegments : number, phiStart : number, phiLength : number, thetaStart : number, thetaLength : number)
• lil-gui: https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_cubemap_dynamic.html

Texture

• Tile: https://texture.ninja/textures/Decorative/21?texture=Decorative-2648.jpg
• Metal: https://www.cgbookcase.com/textures/brushed-iron-02
• Wood: https://www.cgbookcase.com/textures/parquet-flooring-04
• Donut: https://commons.wikimedia.org/wiki/File:Donut_texture,_Doughnut.jpg