One, Two, Three JS, or How I Built a 3D Website
summary
A developer describes building an interactive 3D website for Altel (https://digital.altel.kz/) using Three.js to showcase the company’s shift from telecom to IT and support DevRel and branding for a B2D audience. The talk covers learning the library, development timeline, performance work to reach up to 100 FPS, and lessons learned during optimization.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 2:533D website goals
- 5:07React and Three.js
- 9:263D city model
- 12:193D model formats and GLTF
- 16:15Textures and baking
- 18:23Materials and lighting
- 21:41Shadow setup
- 23:08Rendering optimization
- 25:35Logo and transport animation
- 27:40Interactivity and camera
- 29:48Building clickability
- 33:22Performance issues
- 34:29Project optimization
- 36:55Texture compression and DRACO
- 38:43Adaptive rendering
- 39:49Future plans
- 40:54Conclusion and tips
- 43:28Q&A
related talks
16mNo More Flat Web Navigation — Add 3D Interaction as Easy as 1, 3, Three.JS
17mBuilding Immersive Experiences on the Web
02mENTREVISTA
14m3D On The Web
37m3DGraphics with Threejs by Ruben Meschian (Eng) | JSConfAM19
10m3D Models on the Web with React Three Fiber
49mAAA 3D Graphics on the Web with ReactJS, BabylonJS and Unity3D
01h 15mDeveloper Roadshow