Building Immersive Experiences on the Web
summary
Claims that the web supports true depth and volume using WebGL and three.js and demonstrates a working pipeline: yarn create + yarn add three, create Scene/Camera/Renderer, add Mesh(TorusGeometry, MeshStandardMaterial), position camera z=3, add PointLight, and animate rotation by incrementing rotation.z by 0.001 each frame. Shows texture mapping via TextureLoader (notes async load) and fixes flicker with requestAnimationFrame. End result is a rotating, textured donut demo that renders correctly in the browser.
AI-written summary · about
chapters (9)
- 0:00Introduction and motivation
- 1:53Defining immersive experiences
- 2:56History of web 3D graphics
- 4:42WebGL basics and complexity
- 5:44Setting up Three.js project
- 7:27Creating a 3D scene with Three.js
- 13:08Adding light and textures
- 15:31Finalizing the 3D donut demo
- 16:15Closing and Q&A invitation
related talks
37mCreating 3D Experiences with React
31mWebGL: Building Interactive 3D Worlds in the Browser
41mGetting started with three js and WebGL
13mWebGL Demo with THREE.js
45mThe visual web of today and tomorrow - WebGL and WebVR.
16mNo More Flat Web Navigation — Add 3D Interaction as Easy as 1, 3, Three.JS
14m3D On The Web
17mCreating VR Experiences with Angular and WebGL