WebGL | BestHub

Rare Earth Juejin Tech Community

Jun 10, 2025 · Game Development

Build a Crossy‑Road Style 3D Game with Three.js – A Step‑by‑Step Guide

This tutorial walks you through creating a lightweight, child‑friendly 3D Crossy Road‑style game using Three.js, covering scene setup, metadata‑driven terrain generation, asset loading, player movement queues, dynamic collision detection, UI communication, and deployment tips, all illustrated with code snippets and screenshots.

3DJavaScriptThree.js

0 likes · 30 min read

Build a Crossy‑Road Style 3D Game with Three.js – A Step‑by‑Step Guide

Rare Earth Juejin Tech Community

May 26, 2025 · Game Development

Customizable 3D Scene Construction with Three.js, Shaders, AI‑Generated Assets, and Advanced Character Controls

This article guides readers through building a highly customized 3D scene using Three.js, GLSL shaders, AI‑generated 2D/3D assets, orthographic cameras, pixelated post‑processing, four‑direction character movement, octree collision detection, and stylized water effects, while providing code snippets and resource links.

3DAIBlender

0 likes · 35 min read

Customizable 3D Scene Construction with Three.js, Shaders, AI‑Generated Assets, and Advanced Character Controls

Rare Earth Juejin Tech Community

Mar 31, 2025 · Frontend Development

Advanced Three.js Hero Section with Shaders, Particles, Lighting, and UI

This tutorial walks through building an advanced hero section using Three.js, covering prerequisites, loading and animating a robot model, configuring lighting, creating particle effects, adding UI elements, applying a radial gradient background, implementing parallax interaction, and rendering flowing lines for a polished WebGL experience.

Frontend DevelopmentParticle SystemShader

0 likes · 21 min read

Advanced Three.js Hero Section with Shaders, Particles, Lighting, and UI

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 graphicsFrontend TutorialGenshin Impact

0 likes · 10 min read

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

Rare Earth Juejin Tech Community

Mar 9, 2025 · Frontend Development

Advanced Three.js and Shader Techniques for Hero Sections with Post‑Processing

This article walks through building an eye‑catching Hero Section using Three.js, custom GLSL shaders, dynamic point lights, and post‑processing effects such as UnrealBloomPass, FilmPass, and a custom ShaderPass, providing complete code snippets and practical tips for front‑end developers.

3DShaderThree.js

0 likes · 12 min read

Advanced Three.js and Shader Techniques for Hero Sections with Post‑Processing

Rare Earth Juejin Tech Community

Jan 6, 2025 · Frontend Development

Advanced Three.js 3D Visualization: Grid Helpers, Line Rendering, GUI Controls, Animations, Bezier Connections, Particle Tornado, and Bloom Effects

This comprehensive tutorial demonstrates how to build sophisticated 3D visualizations with Three.js, covering file organization, grid helpers, custom line creation, GUI parameter controls, warning tags, animated bezier connections, a particle-based tornado simulation, and realistic bloom lighting effects, all with detailed TypeScript code examples.

3D visualizationThree.jsWebGL

0 likes · 47 min read

Advanced Three.js 3D Visualization: Grid Helpers, Line Rendering, GUI Controls, Animations, Bezier Connections, Particle Tornado, and Bloom Effects

Kuaishou Frontend Engineering

Dec 17, 2024 · Game Development

How Crab’s WebGL Engine Powers Game‑Level Animations on the Web

This article explores the design and implementation of the Crab rendering engine, a WebGL‑based solution that combines high expressiveness, interactivity, and cross‑device compatibility to deliver game‑like animations for large‑scale activities, detailing its architecture, rendering pipeline, practical applications, and performance optimizations.

RenderingWebGLanimation engine

0 likes · 23 min read

How Crab’s WebGL Engine Powers Game‑Level Animations on the Web

Rare Earth Juejin Tech Community

Nov 27, 2024 · Artificial Intelligence

AI‑Driven 3D Firefly Animation with Three.js and Simplex Noise

This article demonstrates how to combine AI algorithms, specifically Simplex Noise, with Three.js to create a dynamic 3D firefly animation, covering project setup, particle system creation, bloom post‑processing, AI‑driven motion, scene optimization, and provides complete runnable code.

AIParticle SystemSimplex Noise

0 likes · 16 min read

AI‑Driven 3D Firefly Animation with Three.js and Simplex Noise

Rare Earth Juejin Tech Community

Nov 19, 2024 · Frontend Development

Converting TTF Fonts to Three.js JSON and Rendering 3D Text with Holes, Positioning, and Dynamic Input

This tutorial explains how to convert TTF/WOFF font files into Three.js‑compatible JSON using a ttf_to_json tool, load the resulting font with FontLoader, generate shapes (including holes), center the geometry, adjust the camera, and add dynamic text input for interactive 3D rendering.

3D textJSONTTF

0 likes · 12 min read

Converting TTF Fonts to Three.js JSON and Rendering 3D Text with Holes, Positioning, and Dynamic Input

Rare Earth Juejin Tech Community

Nov 14, 2024 · Frontend Development

Creating Stunning 3D Map Visualizations with AMap and Three.js

This tutorial demonstrates how to combine Gaode (AMap) 3D maps with Three.js to render interactive effects such as flying lines, animated boundaries, rising peaks, floating pyramids, and custom text markers, using custom coordinate conversion, WebGL layers, shaders, and CSS2D rendering for a compelling web‑based geographic visualization.

AMapFrontend DevelopmentMap Visualization

0 likes · 15 min read

Creating Stunning 3D Map Visualizations with AMap and Three.js

Rare Earth Juejin Tech Community

Oct 30, 2024 · Frontend Development

Three.js Wind Turbine IoT Visualization with Shaders, Animations, and Bloom Effects

This article demonstrates how to build a Three.js‑based wind turbine IoT visualization system, covering the tech stack, shader creation, clipping and tween animations, material handling, custom Bézier curves, gear animations, and bloom lighting effects, with full source code examples.

ShadersThree.jsTween

0 likes · 12 min read

Three.js Wind Turbine IoT Visualization with Shaders, Animations, and Bloom Effects

Rare Earth Juejin Tech Community

Oct 20, 2024 · Frontend Development

Creating a 3D Cityscape with Lighting, Shadows, and Radar Effects Using Three.js

This tutorial demonstrates how to build a 3D city model in Three.js by adding ambient and directional lighting with shadows, generating random building geometries, customizing shaders for top‑view UV mapping, and implementing animated radar diffusion and scanning effects through shader uniform updates.

JavaScriptShaderThree.js

0 likes · 9 min read

Creating a 3D Cityscape with Lighting, Shadows, and Radar Effects Using Three.js

Rare Earth Juejin Tech Community

Oct 5, 2024 · Frontend Development

Building a Three.js Hero Section with Environment Maps, PMREMGenerator, and Post‑Processing Effects

This article walks through building a Three.js hero section by setting up a basic scene, loading a GLTF model, applying environment maps with PMREMGenerator, adding bloom post‑processing, and animating the envMap rotation to create a dynamic, visually striking 3D header.

3DFrontend DevelopmentHero Section

0 likes · 14 min read

Building a Three.js Hero Section with Environment Maps, PMREMGenerator, and Post‑Processing Effects

Rare Earth Juejin Tech Community

Sep 30, 2024 · Frontend Development

Implementing a 3D Automotive Radar Visualization with three.js

This article walks through building a 3D automotive radar effect using three.js, covering background image loading, fog integration, car model import, radar sector creation with CircleGeometry and Line2, dynamic tween animations, and road texture scrolling to simulate vehicle motion.

JavaScriptThree.jsWebGL

0 likes · 12 min read

Implementing a 3D Automotive Radar Visualization with three.js

Rare Earth Juejin Tech Community

Sep 15, 2024 · Frontend Development

Three.js Tutorial: Installation, Scene Setup, Model Loading, Interaction, and Optimization

This article provides a step‑by‑step guide on using three.js—including installing the library, creating a scene with an orthographic camera, loading GLTF models, implementing touch‑based rotation, zoom, and pan interactions, adding lighting and rendering optimizations, and handling iOS Safari scaling issues.

3D modelThree.jsWebGL

0 likes · 11 min read

Three.js Tutorial: Installation, Scene Setup, Model Loading, Interaction, and Optimization

Rare Earth Juejin Tech Community

Jul 25, 2024 · Game Development

Building a First‑Person Shooting Game with Three.js

This tutorial walks through creating a complete first‑person shooter in the browser using Three.js, covering scene setup, floor and lighting, random moving targets, player controls, shooting mechanics, bullet physics, hit detection, explosion effects, and the main animation loop.

3D graphicsFirst-Person ShooterJavaScript

0 likes · 16 min read

Building a First‑Person Shooting Game with Three.js

vivo Internet Technology

Jul 17, 2024 · Frontend Development

Optimizing 3D Model Loading and First‑Frame Rendering with Three.js, ZIP Packaging, and WASM Decompression

By compressing GLB files into ZIP, extending Three.js loaders to unzip via a Rust‑compiled WASM tool, encrypting small buffers, and caching morph‑target shaders while spreading mesh rendering across frames, the team shrank model size from 50 MB to 11 MB and cut first‑frame render time from 7 seconds to 0.6 seconds, reducing overall page load from 15 seconds to 5 seconds.

3D model optimizationPerformanceThree.js

0 likes · 11 min read

Optimizing 3D Model Loading and First‑Frame Rendering with Three.js, ZIP Packaging, and WASM Decompression

Rare Earth Juejin Tech Community

Jul 16, 2024 · Frontend Development

Implementing Object Glow Effect in Three.js Using EffectComposer

This tutorial demonstrates how to create a glowing effect for 3D objects in three.js by setting up a basic HTML framework, loading a GLTF model, configuring EffectComposer with RenderPass, UnrealBloomPass, and OutputPass, adding automatic rotation, a GUI for parameter tweaking, and a performance monitor, all illustrated with complete source code.

EffectComposerJavaScriptThree.js

0 likes · 18 min read

Implementing Object Glow Effect in Three.js Using EffectComposer

Rare Earth Juejin Tech Community

Jul 3, 2024 · Frontend Development

Rapid Development of a 3D Parking Lot Visualization Using the esMap Engine

This article details how to quickly create a web‑based 3D parking‑lot demo with scene modeling, dynamic lamp markers, interactive controls, editing, heat‑map overlay, and path‑planning using the esMap visualization SDK, including full code snippets and deployment steps.

3D visualizationJavaScriptParking lot

0 likes · 17 min read

Rapid Development of a 3D Parking Lot Visualization Using the esMap Engine

Rare Earth Juejin Tech Community

Jun 15, 2024 · Frontend Development

Simple Car Implementation with three.js: Grouping, Camera Follow, Controls, Wheel Rotation, and Parking Feature

This article demonstrates how to create a simple car model in three.js, grouping its components, implementing a following camera, adding keyboard controls for movement and steering, animating wheel rotation, and building an interactive parking feature with raycasting for selection.

Frontend DevelopmentThree.jsWebGL

0 likes · 6 min read

Simple Car Implementation with three.js: Grouping, Camera Follow, Controls, Wheel Rotation, and Parking Feature