BestHub
Sign in
Tagged articles
99 articles
Page 1 of 1
AI Architecture Path
AI Architecture Path
May 21, 2026 · Frontend Development

Build a 3D Pavilion in 5 Minutes with the Open‑Source Pascal Editor (16.1k Stars)

Pascal Editor is a free, open‑source, WebGPU‑accelerated online 3D architecture editor that runs in any modern browser, offering end‑to‑end space editing, high‑performance rendering, parametric tools, multi‑format export, a modular React‑based architecture, and use cases ranging from interior design to education, while outlining its strengths and current limitations.

3D modelingPascal EditorReact
0 likes · 8 min read
Build a 3D Pavilion in 5 Minutes with the Open‑Source Pascal Editor (16.1k Stars)
SuanNi
SuanNi
Apr 15, 2026 · Industry Insights

How Spark 2.0 Brings Billion‑Point 3D Worlds to Mobile Browsers

Spark 2.0 is an open‑source WebGL2‑based rendering engine that uses continuous LoD trees, a custom RAD file format, and GPU memory virtualization to stream and display massive 3D Gaussian‑splatting scenes on phones, tablets and browsers with smooth, real‑time interaction.

3D renderingBrowser graphicsGaussian splatting
0 likes · 13 min read
How Spark 2.0 Brings Billion‑Point 3D Worlds to Mobile Browsers
Design Hub
Design Hub
Apr 12, 2026 · User Experience Design

10 Stunning 3D Interactive Globes That Redefine Data Visualization

The article showcases ten interactive 3D globe visualizations—ranging from a music‑driven world tour to real‑time earthquake maps—detailing their data sources, React‑based tech stacks, and design insights that help designers move beyond flat maps toward immersive, narrative‑driven data storytelling.

Data visualizationInteractive GlobeReact
0 likes · 8 min read
10 Stunning 3D Interactive Globes That Redefine Data Visualization
AI Insight Log
AI Insight Log
Jan 30, 2026 · Frontend Development

Three.js Gets AI Skills: Structured Knowledge Boosts 3D Code Generation

The article examines common AI coding failures with Three.js—outdated APIs, math miscalculations, and shader glitches—and introduces the open‑source threejs‑skills repository, which supplies AI agents with best‑practice, performance‑tuned knowledge to dramatically improve 3D development outcomes.

AI CodingSkillsThree.js
0 likes · 7 min read
Three.js Gets AI Skills: Structured Knowledge Boosts 3D Code Generation
Node.js Tech Stack
Node.js Tech Stack
Jan 27, 2026 · Frontend Development

Three.js Gets Its Own AI Skills – Making 3D Coding No Longer a Headache

The article introduces the open‑source threejs‑skills repository, explains why AI‑generated Three.js code often fails due to API changes, math errors, and shader issues, and shows how the skill set equips AI agents with up‑to‑date best practices, performance tips, and ready‑made loaders, dramatically improving 3D development workflows.

AIOpen-sourceThree.js
0 likes · 7 min read
Three.js Gets Its Own AI Skills – Making 3D Coding No Longer a Headache
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 6, 2025 · Frontend Development

Build Realistic 3D Trees in Three.js with ez‑Tree – Quick Installation & Usage Guide

This article introduces the ez‑Tree plugin for Three.js, showing how to install it via npm or pnpm, import and instantiate the Tree class, configure position, scale, and animation updates, and customize parameters such as tree type, branch direction, and leaf density, with a link to the GitHub repository.

3D treesGraphicsJavaScript
0 likes · 4 min read
Build Realistic 3D Trees in Three.js with ez‑Tree – Quick Installation & Usage Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 20, 2025 · Frontend Development

Build a Galactic Hero Section with Three.js: From Starfield to Shaders

This article walks you through creating a visually striking hero section using Three.js, covering prerequisite knowledge, scene composition, nebula background, particle‑based star rings, custom GLSL shaders for animation, planet rendering with displacement maps, and performance‑boosting techniques like anisotropic filtering.

3D graphicsShaderThree.js
0 likes · 19 min read
Build a Galactic Hero Section with Three.js: From Starfield to Shaders
Liangxu Linux
Liangxu Linux
Oct 12, 2025 · Artificial Intelligence

5 Must‑Try Open‑Source Projects: 3D Tetris, Code Analyzer, AI Notebook & More

Explore five standout open‑source projects—a React‑based 3D Tetris game, a multi‑dimensional code‑quality analyzer, an open alternative to Google NotebookLM, a terminal‑embedded AI assistant, and Meta's DINOv3 visual model family—each with repo links, key features, and practical use cases.

AIReactThree.js
0 likes · 6 min read
5 Must‑Try Open‑Source Projects: 3D Tetris, Code Analyzer, AI Notebook & More
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.

3DGame DevelopmentJavaScript
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.

Desktop AppDexie.jsElectron
0 likes · 9 min read
Building a Cross‑Platform 3D Desktop Pet with Electron, Vue, and Dexie.js
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Apr 11, 2025 · Frontend Development

A Fast, Efficient Vue3 3D Development Solution with TresJS

This article introduces TresJS, a Vue‑based declarative wrapper for Three.js that streamlines 3D scene creation, outlines its core features, suitable use cases, provides a quick‑start guide with Vite configuration and sample code, and lists lab utilities and resources.

3DThree.jsTresJS
0 likes · 5 min read
A Fast, Efficient Vue3 3D Development Solution with TresJS
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.

Particle SystemShaderThree.js
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 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
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 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.

AmapThree.jsWebGL
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
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.jsinteraction
0 likes · 11 min read
Three.js Tutorial: Installation, Scene Setup, Model Loading, Interaction, and Optimization
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 optimizationThree.jsWasm
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
Rare Earth Juejin Tech Community
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.

Three.jsWebGLcamera control
0 likes · 6 min read
Simple Car Implementation with three.js: Grouping, Camera Follow, Controls, Wheel Rotation, and Parking Feature
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 26, 2024 · Frontend Development

Step‑by‑Step Ocean Simulation with three.js

This tutorial walks readers through building a realistic, animated ocean scene in three.js, covering project initialization, geometry creation, custom shaders, wave calculations, and dynamic boat positioning and rotation using JavaScript and WebGL techniques.

3D graphicsOcean simulationThree.js
0 likes · 13 min read
Step‑by‑Step Ocean Simulation with three.js
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 3, 2024 · Frontend Development

Recreating the Xiaomi SU7 Showcase Webpage with three.js and Custom Shaders

This article walks through reproducing the stunning Xiaomi SU7 showcase webpage by using three.js, custom GLSL shaders, and several helper libraries to implement dynamic environment map switching, reflective ground, tunnel traversal, bloom, and camera shake effects, providing complete source code and explanations.

PostProcessingShadersThree.js
0 likes · 18 min read
Recreating the Xiaomi SU7 Showcase Webpage with three.js and Custom Shaders
Amap Tech
Amap Tech
Jan 11, 2024 · Frontend Development

Optimizing Multi‑Scene Rendering on AMap by Sharing a WebGL Context

Gaode solved the WebGL‑context limit in AMap by rendering all visual layers on a single canvas with a shared context, disabling autoClear, preserving depth ordering, and using per‑layer EffectComposers merged via a final composer, enabling multiple scenes and post‑processing without exceeding browser limits.

AmapEffectComposerRendering
0 likes · 11 min read
Optimizing Multi‑Scene Rendering on AMap by Sharing a WebGL Context
php Courses
php Courses
Nov 27, 2023 · Frontend Development

Implementing Multi‑Window 3D Synchronization with three.js

This article explains how to create a pure‑frontend “quantum entanglement” effect by synchronizing multiple browser windows using three.js, detailing the index.html setup, the main.js logic for scene and window management, and the WindowManager class that tracks window shapes via localStorage.

JavaScriptThree.jsWebGL
0 likes · 13 min read
Implementing Multi‑Window 3D Synchronization with three.js
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 18, 2023 · Game Development

Recreating the Genshin Impact Login Screen with Three.js Shaders

This article walks through how to replicate Genshin Impact's login interface using three.js, custom GLSL shaders, instanced meshes, and post‑processing effects, providing detailed code snippets and explanations for background gradients, cloud layers, pillars, light beams, stars, fog, and rendering optimizations.

Game DevelopmentGraphicsInstancedMesh
0 likes · 8 min read
Recreating the Genshin Impact Login Screen with Three.js Shaders
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 16, 2023 · Game Development

Creating a Naruto-Themed 3D World with three.js: Model Loading, Controls, Animation, and Octree Collision

This tutorial walks through building a simple Naruto-inspired 3D scene using three.js, covering model acquisition, character creation, keyboard controls, rotation handling, animation state management, camera integration, octree-based collision detection, and troubleshooting common issues such as camera‑character alignment and jump physics.

Game DevelopmentJavaScriptThree.js
0 likes · 22 min read
Creating a Naruto-Themed 3D World with three.js: Model Loading, Controls, Animation, and Octree Collision
Amap Tech
Amap Tech
Jul 13, 2023 · Frontend Development

Implementing Automatic Cruise Navigation on AMap with Three.js

The article walks through building an automatic cruise navigation effect on AMap with Three.js by acquiring route data, merging GeoJSON paths, loading a 3D vehicle model, animating its movement and camera follow using TWEEN, and blending the NPC layer with satellite and 3DTiles layers for a smooth autonomous navigation experience.

AmapAuto NavigationJavaScript
0 likes · 16 min read
Implementing Automatic Cruise Navigation on AMap with Three.js
vivo Internet Technology
vivo Internet Technology
Jul 12, 2023 · Frontend Development

Building an Immersive Web 3D Exhibition Hall with Three.js and Blender

The article shows how the vivo front‑end team built a lightweight, mobile‑friendly 3D exhibition hall for the Game Festival by modeling in Blender, exporting GLB files, and using Three.js to set up the scene, lighting, shadows, joystick navigation, collision detection, and performance optimizations such as texture baking and model compression.

3D modelingBlenderThree.js
0 likes · 21 min read
Building an Immersive Web 3D Exhibition Hall with Three.js and Blender
DaTaobao Tech
DaTaobao Tech
May 17, 2023 · Frontend Development

Introduction to 3D Rendering Technologies: OpenGL, OpenGL ES, WebGL, and Front‑End Engines

The article introduces core 3D rendering concepts, tracing the evolution from desktop OpenGL to mobile OpenGL ES and its JavaScript counterpart WebGL, explains GLSL shader programming, reviews common model formats like OBJ and FBX, highlights front‑end engines such as Three.js, compares rasterization with ray tracing, and mentions modeling tools and emerging AI‑driven techniques.

3D renderingOpenGLThree.js
0 likes · 11 min read
Introduction to 3D Rendering Technologies: OpenGL, OpenGL ES, WebGL, and Front‑End Engines
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 30, 2022 · Frontend Development

Building an Interactive 3D Phone Showcase with Three.js Multimedia Elements (Text, Image, Audio, Video)

This article explains how to use Three.js to create a realistic 3D phone product page by loading and applying multimedia assets such as custom fonts, textures, audio sources, and video textures, and demonstrates interactive features like ray‑casting for material switching and first‑person controls.

3DJavaScriptMultimedia
0 likes · 19 min read
Building an Interactive 3D Phone Showcase with Three.js Multimedia Elements (Text, Image, Audio, Video)
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 18, 2022 · Frontend Development

Creating a Glowing Portal Effect in Three.js with Post‑Processing

This article demonstrates how to use Three.js post‑processing techniques, including EffectComposer, RenderPass, BloomPass, and custom shaders, to build an animated 3D scene featuring a glowing portal and Rick and Morty model, covering shader setup, layer management, animation, and UI controls for fine‑tuning.

3D animationJavaScriptShader
0 likes · 24 min read
Creating a Glowing Portal Effect in Three.js with Post‑Processing
ELab Team
ELab Team
Oct 20, 2022 · Frontend Development

Build Immersive Web VR Panoramas with Three.js: A Step‑by‑Step Guide

This article explains the fundamentals of virtual reality, the WebGL and OpenGL APIs, and demonstrates how to create interactive VR panoramas for houses and cars using three.js, covering scene setup, cameras, renderers, geometry, textures, materials, lighting, and user interaction with concise code examples.

3D graphicsThree.jsVR Panorama
0 likes · 24 min read
Build Immersive Web VR Panoramas with Three.js: A Step‑by‑Step Guide
ELab Team
ELab Team
Sep 28, 2022 · Frontend Development

Master WebGL & Three.js: From Basics to 3D Rendering in the Browser

This article guides beginners through the fundamentals of computer graphics, explaining OpenGL, WebGL, GLSL, and the rendering pipeline, then demonstrates practical Three.js code for setting up scenes, cameras, lights, materials, and textures to create interactive 3D web experiences.

3D renderingGPUGraphics
0 likes · 20 min read
Master WebGL & Three.js: From Basics to 3D Rendering in the Browser
ByteFE
ByteFE
Jun 10, 2022 · Industry Insights

Latest Tech Insights: HTTP/3 Standard, Frontend Survey, Web3 Trends, and Performance Tips

This roundup covers the official release of HTTP/3 (RFC 9114), key findings from a 2022 frontend development survey highlighting TypeScript dominance, an in‑depth Web3.0 industry panorama, Douyin's Android power‑saving practices, bundler considerations, first‑party cookie guidance, content‑visibility performance analysis, and a detailed Three.js ice‑cream Earth tutorial.

Content-VisibilityHTTP/3Three.js
0 likes · 7 min read
Latest Tech Insights: HTTP/3 Standard, Frontend Survey, Web3 Trends, and Performance Tips
Alibaba Terminal Technology
Alibaba Terminal Technology
May 17, 2022 · Frontend Development

Unlock 20‑30× GPU Speed: WebGPU in Three.js, Babylon.js, and TensorFlow.js

This article introduces WebGPU—a powerful yet still experimental web graphics API—showing how major frameworks like Three.js and Babylon.js adopt it for high‑performance 3D rendering, how TensorFlow.js leverages it for massive deep‑learning speedups, and provides hands‑on code examples from framework usage to raw WebGPU programming.

Babylon.jsGPUGraphics
0 likes · 17 min read
Unlock 20‑30× GPU Speed: WebGPU in Three.js, Babylon.js, and TensorFlow.js
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 23, 2022 · Frontend Development

Creating a Flaming Elden Ring Logo with React and Three.js

This tutorial demonstrates how to build a fire‑animated Elden Ring logo using React, Three.js, and the Fire.js extension, covering background setup, resource import, scene initialization, fire effect configuration, responsive scaling, camera animation, and rendering loop with complete code examples.

3DFire.jsReact
0 likes · 9 min read
Creating a Flaming Elden Ring Logo with React and Three.js
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 16, 2022 · Frontend Development

Implementing a 3D Floating Text Effect with React and Three.js

This article demonstrates how to recreate the Three.js Journey floating 3D text effect using a React and Three.js stack, covering resource imports, DOM structure, state management, CSS grid background, font loading, geometry creation, mouse interaction, fullscreen handling, post‑processing effects, and responsive scaling.

3DGraphicsPostProcessing
0 likes · 17 min read
Implementing a 3D Floating Text Effect with React and Three.js
ByteFE
ByteFE
Feb 11, 2022 · Frontend Development

Editorial Recommendations: 2022 Frontend Trends, Chrome @layers, ECMAScript 2022, Canvas Engine, Three.js 3D Winter Olympics Page, AST Manipulation, SCSS Theming, and Fractal Snowflake

This curated newsletter highlights 2022 frontend trends, monetizing technical blogs on Medium, new Chrome @layers rules, upcoming ECMAScript 2022 features, a custom canvas layout engine, a Three.js‑React 3D Winter Olympics page, JavaScript AST tooling, SCSS one‑click theming, and a fractal snowflake canvas demo.

CanvasThree.js
0 likes · 6 min read
Editorial Recommendations: 2022 Frontend Trends, Chrome @layers, ECMAScript 2022, Canvas Engine, Three.js 3D Winter Olympics Page, AST Manipulation, SCSS Theming, and Fractal Snowflake
IT Xianyu
IT Xianyu
Feb 11, 2022 · Frontend Development

Building a Winter Olympics 3D Web Page with Three.js and React

This article demonstrates how to build an interactive Winter Olympics-themed 3D web page using Three.js and React, covering model loading, custom materials, lighting, particle effects, and camera controls, with detailed code snippets and explanations for each component.

3D graphicsReactThree.js
0 likes · 19 min read
Building a Winter Olympics 3D Web Page with Three.js and React
Sohu Tech Products
Sohu Tech Products
Feb 9, 2022 · Frontend Development

Creating a Winter Olympics 3D Scene with Three.js and React

This article demonstrates how to build an interactive 3D Winter Olympics themed webpage using Three.js and React, covering resource import, scene setup, lighting, model loading, custom materials, particle effects, camera controls, and animation techniques.

3D graphicsReactThree.js
0 likes · 18 min read
Creating a Winter Olympics 3D Scene with Three.js and React
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 3, 2021 · Frontend Development

Building Web AR with AR.js: A Pure Front‑End Solution

This article introduces a pure‑frontend approach to Web AR using AR.js, explains core technologies like WebRTC, JSARToolKit, A‑Frame, and Three.js, guides through HTTPS setup, demonstrates image‑tracking and video examples, and shows how to integrate Agora video calls for remote cat‑watching.

A-FrameAR.jsAgora
0 likes · 15 min read
Building Web AR with AR.js: A Pure Front‑End Solution
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 19, 2021 · Frontend Development

Creating Meta’s 3D Dynamic Logo with Three.js and Blender

This tutorial explains how to recreate Meta’s animated 3D logo by combining Three.js geometry, Blender modeling, FBX loading, custom materials, animation mixers, raycasting for interaction, and progress tracking, providing a complete step‑by‑step guide for web‑based 3D development.

3D modelingBlenderFBXLoader
0 likes · 16 min read
Creating Meta’s 3D Dynamic Logo with Three.js and Blender
Aotu Lab
Aotu Lab
Oct 28, 2021 · Fundamentals

Exploring HarmonyOS ACE UI, React useEffect Pitfalls, Three.js 3D, and AI Basics

This issue presents deep dives into HarmonyOS ACE UI architecture, common infinite-loop pitfalls of React’s useEffect hook, a Three.js tutorial for building a 3D room, an introductory guide to graph neural networks, and a fundamentals‑focused machine‑learning primer, offering practical insights across front‑end, graphics, and AI domains.

AIHarmonyOSReact
0 likes · 6 min read
Exploring HarmonyOS ACE UI, React useEffect Pitfalls, Three.js 3D, and AI Basics
Aotu Lab
Aotu Lab
Aug 12, 2021 · Frontend Development

How to Optimize glTF/.glb Files for Faster 3D Loading in Web Projects

This article explains the glTF format, compares .gltf and .glb, shows how to split and compress glTF assets using tools like gltf‑pipeline, Draco, mesh quantization and meshopt, and presents performance tests across various devices to guide efficient 3D model delivery in web applications.

3D OptimizationThree.jscompression
0 likes · 14 min read
How to Optimize glTF/.glb Files for Faster 3D Loading in Web Projects
政采云技术
政采云技术
Aug 10, 2021 · Frontend Development

WebGL Concepts and Fundamentals

This article introduces WebGL, covering its definition, history, basic concepts, working principles, and practical examples of drawing shapes using both native WebGL API and the Three.js framework.

3D graphics3D web developmentBrowser graphics
0 likes · 17 min read
WebGL Concepts and Fundamentals
The Dominant Programmer
The Dominant Programmer
Jul 27, 2021 · Frontend Development

Getting Started with Three.js: Building a Hello World Scene

This tutorial walks through setting up a basic Three.js project, explaining core concepts like scene, camera, and renderer, and provides step‑by‑step HTML and JavaScript code to display a simple axis helper and a wireframe sphere in the browser.

3D graphicsJavaScriptThree.js
0 likes · 7 min read
Getting Started with Three.js: Building a Hello World Scene
Amap Tech
Amap Tech
Jun 25, 2021 · Frontend Development

Design and Implementation of the Eagle.gl Web 3D Engine for High-Definition Map Rendering

The Eagle.gl Web 3D engine, built atop Three.js, provides a unified 2D/3D GIS platform that efficiently loads, renders, and edits massive point‑cloud, vector, and model map data with real‑time LOD, GPU picking, DEM terrain integration, and configurable styling, supporting AMap’s HD‑map production and future autonomous‑driving simulation.

3D renderingGISThree.js
0 likes · 12 min read
Design and Implementation of the Eagle.gl Web 3D Engine for High-Definition Map Rendering
Didi Tech
Didi Tech
Jun 11, 2021 · Frontend Development

Design and Implementation of a Real-Time Data Visualization Large Screen Using WebGL and a Custom Map Framework

The article details DiDi’s development of a real‑time, large‑screen data‑visualization system built on a custom WebGL‑based map framework, describing how they tackled one‑time map loading, massive data compression, and high‑performance rendering of trajectories, bubbles, heatmaps, flight lines and animated scatter points, supported by interactive debugging tools.

Data visualizationThree.jsWebGL
0 likes · 27 min read
Design and Implementation of a Real-Time Data Visualization Large Screen Using WebGL and a Custom Map Framework
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
May 31, 2021 · Frontend Development

How NetEase’s Color Test H5 Was Built: SPA Architecture, Animations, and Result Logic

This article details the technical implementation of NetEase Cloud Music’s color‑test H5, covering its single‑page React architecture, preloading optimizations, canvas and WebGL animation techniques, and the deterministic front‑end algorithm that calculates single‑ or dual‑color results from user choices.

CanvasMatter.jsReact
0 likes · 10 min read
How NetEase’s Color Test H5 Was Built: SPA Architecture, Animations, and Result Logic
Aotu Lab
Aotu Lab
May 27, 2021 · Frontend Development

Why WebGL Beats Canvas for Complex 2D Animations – A Hands‑On Guide

This article explains why WebGL, powered by the GPU, outperforms Canvas for data‑intensive 2D effects, walks through setting up a Three.js environment, and demonstrates basic fragment shaders, uniform usage, and animation techniques with practical code examples.

ShaderThree.js
0 likes · 9 min read
Why WebGL Beats Canvas for Complex 2D Animations – A Hands‑On Guide
vivo Internet Technology
vivo Internet Technology
Apr 7, 2021 · Frontend Development

3D Data Visualization in Front-end Development: From Concept to Practice

The article guides front‑end developers from basic 2D charting to immersive 3D data visualizations, explaining WebGL’s rendering pipeline, comparing libraries such as Three.js and Babylon.js, detailing camera, lighting, model handling techniques, and showing how Draco compression dramatically shrinks GLB assets while preserving quality.

3D rendering3d-visualizationData visualization
0 likes · 15 min read
3D Data Visualization in Front-end Development: From Concept to Practice
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 29, 2021 · Frontend Development

How to Build 360° Panorama Views with CSS3, Three.js, and Pannellum

This article explains four practical approaches to creating 360° panoramic experiences for web pages—using pure CSS3 3D transforms, the Three.js WebGL engine, the lightweight Pannellum viewer, and the professional krpano tool—detailing their concepts, code implementations, advantages, and trade‑offs for hotel and real‑estate applications.

360 panoramaThree.jsWebGL
0 likes · 13 min read
How to Build 360° Panorama Views with CSS3, Three.js, and Pannellum
ByteFE
ByteFE
Mar 10, 2021 · Frontend Development

Implementing a Twisted Gallery Effect with Three.js and WebGL

This tutorial explains how to synchronize HTML elements with a WebGL scene using three.js, create a twisted gallery effect through custom shaders, handle image loading, and implement scroll-driven distortion using locomotive-scroll and GSAP, providing complete code examples and implementation steps.

PostProcessingShaderThree.js
0 likes · 12 min read
Implementing a Twisted Gallery Effect with Three.js and WebGL
58UXD
58UXD
Mar 5, 2021 · Frontend Development

How to Bake Cinema 4D Animations for Three.js: A Step‑by‑Step Guide

This tutorial walks developers through converting Cinema 4D dynamic animations into browser‑ready Three.js scenes by baking various animation types, using MoGraph, XPresso, point‑cache modifiers, and exporting the results as GLB files with detailed visual examples.

Cinema 4DGLB exportThree.js
0 likes · 8 min read
How to Bake Cinema 4D Animations for Three.js: A Step‑by‑Step Guide
360 Tech Engineering
360 Tech Engineering
Oct 30, 2020 · Frontend Development

Building an Interactive 3D Globe with Three.js, GLSL Shaders, and Clickable Countries

This tutorial explains how to create a visually striking, interactive 3D globe using three.js, covering texture mapping, GLSL shader programming, click interaction logic, flight‑line effects, performance considerations, and a complete example of vertex and fragment shaders with accompanying JavaScript code.

Data visualizationInteractive GlobeShader Programming
0 likes · 19 min read
Building an Interactive 3D Globe with Three.js, GLSL Shaders, and Clickable Countries
Aotu Lab
Aotu Lab
Sep 10, 2020 · Frontend Development

How to Build a Simple WebVR Panorama with CSS 3D and Three.js

This article explains the background, principles, and step‑by‑step implementation of a WebVR panorama using CSS 3D and Three.js, covering VR fundamentals, 3DOF vs 6DOF, texture preparation, interaction handling, challenges, and future prospects.

CSS 3DThree.jsWebVR
0 likes · 20 min read
How to Build a Simple WebVR Panorama with CSS 3D and Three.js
360 Tech Engineering
360 Tech Engineering
Sep 23, 2019 · Frontend Development

Converting Geographic Coordinates to 3D Positions in three.js

This article explains how to transform latitude‑longitude geographic coordinates into three‑dimensional spherical coordinates for a three.js globe, covering both manual trigonometric calculations and the library's built‑in THREE.Spherical and THREE.Vector3 utilities with code examples.

Three.jsWebGLcoordinate conversion
0 likes · 5 min read
Converting Geographic Coordinates to 3D Positions in three.js
NetEase Media Technology Team
NetEase Media Technology Team
Aug 21, 2019 · Frontend Development

How to Build a 3D Medal System with WebGL and Three.js

This article explains how to use WebGL and the Three.js library to create a cross‑platform 3D medal system, covering model format choices, scene setup, rendering code, performance optimizations such as gzip compression, caching, skin switching, and graceful fallback for older devices.

3D renderingMedal systemThree.js
0 likes · 10 min read
How to Build a 3D Medal System with WebGL and Three.js
Tongcheng Travel Technology Center
Tongcheng Travel Technology Center
Apr 24, 2019 · Frontend Development

Implementing VR Seat Selection for Airline Cabins Using Photo-Sphere-Viewer

This article details a front‑end solution for online seat selection in a virtual‑reality airplane cabin, analyzing challenges such as marker visibility, scene transition effects, and efficient point placement, and presenting concrete implementations with Photo‑Sphere‑Viewer, custom zoom animations, and marker management code.

Photo Sphere ViewerThree.jsVR
0 likes · 11 min read
Implementing VR Seat Selection for Airline Cabins Using Photo-Sphere-Viewer
Aotu Lab
Aotu Lab
Oct 30, 2018 · Game Development

Mastering 3D Web Games: Three.js, glTF, and Cannon.js Essentials

This guide walks you through the core concepts of Three.js, the glTF model format, physics integration with Cannon.js, interaction handling, performance tuning, and a suite of debugging tools, providing practical code snippets and best‑practice tips for building efficient 3D web games.

3D Game DevelopmentCannon.jsThree.js
0 likes · 22 min read
Mastering 3D Web Games: Three.js, glTF, and Cannon.js Essentials
Alibaba Cloud Developer
Alibaba Cloud Developer
Jun 21, 2018 · Frontend Development

Turning an Annual Meeting into a Live 3D Smiling Planet: Alibaba’s Face‑Check‑In System

Alibaba engineers created a two‑week “smile check‑in” system that uses facial recognition and Three.js to turn annual meeting entrances into an interactive 3D “smile planet,” displaying participants’ avatars, nicknames and smile scores in real time while optimizing performance for large‑screen displays.

H5 AnimationThree.jsWebGL
0 likes · 11 min read
Turning an Annual Meeting into a Live 3D Smiling Planet: Alibaba’s Face‑Check‑In System
Qunar Tech Salon
Qunar Tech Salon
Jan 6, 2017 · Frontend Development

Introduction to three.js: Concepts, Capabilities, and Basic Usage

This article introduces three.js, explains its relationship to WebGL, outlines what it can achieve, describes core concepts such as coordinate system, camera, scene, renderer, lights, materials, geometry, and particle systems, and provides a step‑by‑step example for building an interactive 3D panorama with camera controls and user interaction.

3DGraphicsThree.js
0 likes · 12 min read
Introduction to three.js: Concepts, Capabilities, and Basic Usage
Tencent TDS Service
Tencent TDS Service
Sep 1, 2016 · Frontend Development

Unlock WebVR: Build Immersive VR Experiences Directly in the Browser

This article introduces WebVR, an experimental JavaScript API that enables VR experiences on the web, walks through setting up a three.js‑based boilerplate, explains key files like VRControls.js, VREffect.js, and webvr‑polyfill.js, and shows how to create a simple rotating cube demo for mobile cardboard viewers.

JavaScriptThree.jsVR
0 likes · 9 min read
Unlock WebVR: Build Immersive VR Experiences Directly in the Browser
Tencent TDS Service
Tencent TDS Service
May 26, 2016 · Frontend Development

How to Build an HTML5 3D Panoramic VR Tour with Three.js

This article walks you through creating a mobile‑friendly HTML5 3D panoramic VR experience using Three.js, covering panoramic image acquisition, tool selection, scene setup, camera and renderer configuration, cube‑map construction, gyro integration, and performance optimizations.

HTML5MobilePanoramic
0 likes · 10 min read
How to Build an HTML5 3D Panoramic VR Tour with Three.js
Aotu Lab
Aotu Lab
Jan 6, 2016 · Frontend Development

Build a 360° Panorama Viewer in the Browser with Three.js

This guide explains how to create an interactive 360° panoramic viewer on web pages using Three.js, covering the fundamentals of panoramic images, camera setup, positioning, and rendering techniques to achieve seamless spherical navigation.

3DJavaScriptThree.js
0 likes · 5 min read
Build a 360° Panorama Viewer in the Browser with Three.js