BestHub
Sign in
Tagged articles
23 articles
Page 1 of 1
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
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
58UXD
58UXD
Dec 6, 2024 · Artificial Intelligence

Unlock AI-Powered Icon Design: Prompt Secrets & Dreamina Tips

This guide shows UI designers how to efficiently create high‑quality 3D icons using AI‑assisted tools like Dreamina, covering prompt engineering techniques, example spell‑like prompts, workflow tips, and ways to achieve consistent, brand‑aligned icon series without complex software.

3D graphicsAIDreamina
0 likes · 9 min read
Unlock AI-Powered Icon Design: Prompt Secrets & Dreamina Tips
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 ShooterGame Development
0 likes · 16 min read
Building a First‑Person Shooting Game with Three.js
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
ByteFE
ByteFE
Jul 17, 2023 · Frontend Development

Understanding WebGL, Its Frameworks, and Performance Optimization Strategies

This article explains what WebGL is, surveys popular 2D and 3D JavaScript frameworks, analyzes large‑scene performance bottlenecks, and presents concrete optimization techniques such as custom GeoJSON compression, fragment reduction, draw‑call batching, mesh merging, LOD, face culling, and Web Workers, concluding with a brief overview of the emerging WebGPU API.

3D graphicsJavaScriptWebGL
0 likes · 24 min read
Understanding WebGL, Its Frameworks, and Performance Optimization Strategies
Xiaohe Frontend Team
Xiaohe Frontend Team
Dec 14, 2022 · Game Development

How Tim Sweeney Built Epic Games and the Evolution of Unreal Engine

This article chronicles Tim Sweeney's journey from a teenage programmer to Epic Games founder, outlines the history and technical milestones of the Unreal Engine series, and explores its wide-ranging applications across gaming, 3D modeling, film, and the metaverse.

3D graphicsEpic GamesGame Development
0 likes · 11 min read
How Tim Sweeney Built Epic Games and the Evolution of Unreal Engine
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
Python Programming Learning Circle
Python Programming Learning Circle
Jul 6, 2022 · Game Development

Introduction to Vizard: Loading Avatars, Random Walk, Character Actions, and Mouse Interaction

This article introduces Vizard, a C/C++‑based virtual‑reality development platform with Python bindings, and demonstrates how to load avatars and objects, implement a random‑walk pigeon, create talking characters, handle character movement via keyboard, capture mouse motion, and combine these techniques into a functional VR scene.

3D graphicsGame DevelopmentPython
0 likes · 6 min read
Introduction to Vizard: Loading Avatars, Random Walk, Character Actions, and Mouse Interaction
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
政采云技术
政采云技术
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
Taobao Frontend Technology
Taobao Frontend Technology
Apr 27, 2021 · Game Development

How Alibaba’s Taobao Life Renders Real‑Time Virtual Avatars with Web Tech

This article explains the technical pipeline behind Taobao Life’s virtual avatar rendering, covering industry context, cross‑industry use cases, the core rendering workflow, dynamic outfit and beauty processing, face‑morph techniques, AR integration, and the trade‑offs of using Web technologies for high‑fidelity 3D experiences.

3D graphicsARWebGL
0 likes · 27 min read
How Alibaba’s Taobao Life Renders Real‑Time Virtual Avatars with Web Tech
Zhengtong Technical Team
Zhengtong Technical Team
Apr 17, 2020 · Frontend Development

Creating a 3D Orbit Visualization Component

This article details the technical process of creating a 3D visualization component for city management systems, covering HTML structure, CSS animations, and mathematical calculations for distributing elements on a circular path.

3D graphicsComponent DesignData visualization
0 likes · 11 min read
Creating a 3D Orbit Visualization Component
AntTech
AntTech
Apr 3, 2020 · Frontend Development

Optimizing 3D WebGL Performance for Alipay's Spring Red Envelope Project

During Alipay's massive Spring Red Envelope campaign, the frontend team introduced WebGL 3D scenes and particle effects, tackling memory, transmission size, and rendering performance through model reduction, texture compression, GLB packaging, progressive loading, and GPU‑based particle optimizations to achieve stable, low‑latency user experiences.

3D graphicsParticle SystemsPerformance Optimization
0 likes · 19 min read
Optimizing 3D WebGL Performance for Alipay's Spring Red Envelope Project
58UXD
58UXD
Aug 1, 2018 · Fundamentals

How to Create Truly Three‑Dimensional Graphics: From Visual Depth to Full‑Scale 3D

This article explains the different levels of dimensionality in graphic design—from visual depth and half‑dimensional effects to fully three‑dimensional objects—detailing construction methods such as perspective, color shading, texture simulation, and optical illusion techniques, while providing practical examples and visual references.

3D graphicsTexturelight and shadow
0 likes · 12 min read
How to Create Truly Three‑Dimensional Graphics: From Visual Depth to Full‑Scale 3D