BestHub
Sign in
Tag

Three.js

1 views collected around this technical thread.

Rare Earth Juejin Tech Community
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
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
Rare Earth Juejin Tech Community
May 15, 2025 · Frontend Development

Building a Cross‑Platform 3D Desktop Pet with Electron, Vue, and Dexie.js

This article introduces the open‑source “3D Desktop Pet” project, detailing how to create a cross‑platform Electron application that combines a transparent always‑on‑top window, Three.js‑driven 3D pet interactions, and Dexie.js‑based task management, along with performance optimizations and multi‑window reminder system.

Dexie.jsElectronThree.js
0 likes · 9 min read
Building a Cross‑Platform 3D Desktop Pet with Electron, Vue, and Dexie.js
Rare Earth Juejin Tech Community
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
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
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
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
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 28, 2024 · Frontend Development

Digital Agriculture Visualization: Technical Implementation with AMap, Three.js, GIS, and Vue

This article presents a comprehensive guide to building a digital agriculture visualization dashboard using AMap JSAPI, three.js, GIS tools, and Vue, covering requirement analysis, layer design, data processing, 3D model integration, animation, and interactive features for smart farming applications.

3D mappingAMapGIS
0 likes · 28 min read
Digital Agriculture Visualization: Technical Implementation with AMap, Three.js, GIS, and Vue
Rare Earth Juejin Tech Community
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
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
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
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
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
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
Rare Earth Juejin Tech Community
Aug 19, 2024 · Frontend Development

Three.js & Vue Smart Campus 3D Scene – Project Overview and Technical Documentation

This article introduces a graduation project that creates an interactive smart campus 3D scene using three.js and Vue, provides demo links, outlines core features, offers a quick‑start guide, and gives detailed explanations of each module, modeling conventions, and performance tips.

3D visualizationCode TutorialSmart Campus
0 likes · 7 min read
Three.js & Vue Smart Campus 3D Scene – Project Overview and Technical Documentation
Rare Earth Juejin Tech Community
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
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
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