Master Three.js: Build Interactive 3D Scenes with Camera, Controls, and Animations

This guide walks you through using three.js to create a 3D scene, set up cameras, add objects and lights, render with WebGL, enable orbit controls, animate with requestAnimationFrame or GSAP, handle resizing, toggle fullscreen, and integrate dat.gui for interactive UI.

3DJavaScriptThree.js

0 likes · 9 min read

Master Three.js: Build Interactive 3D Scenes with Camera, Controls, and Animations

Rare Earth Juejin Tech Community

Mar 22, 2025 · Frontend Development

Recreating Genshin Impact Moon Scene with Three.js – A Step‑by‑Step Tutorial

This article walks through recreating Genshin Impact’s Moon scene using Three.js, covering asset extraction, background loading, star field generation with custom shaders, concentric ring creation, axis stars, camera grouping, and performance optimizations, complete with full source code and live demo links.

3D graphicsGenshin ImpactThree.js

0 likes · 10 min read

Recreating Genshin Impact Moon Scene with Three.js – A Step‑by‑Step Tutorial

Rare Earth Juejin Tech Community

Oct 18, 2022 · Frontend Development

Creating and Styling Particle Systems with Three.js – Lost in Space Demo

This article explains how to build various particle effects in Three.js using THREE.Sprite, THREE.Points, dat.GUI, Canvas textures, and custom shaders, and combines them into an interactive 3D scene featuring a wandering astronaut, fog effects, and real‑time parameter controls.

CanvasThree.jsWebGL

0 likes · 23 min read

Creating and Styling Particle Systems with Three.js – Lost in Space Demo