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.
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.
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.
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.
This article explains how to replace JSZip with a C‑based WebAssembly unzip module using Emscripten, integrate it via a Web Worker, and achieve faster decompression for Three.js 3D assets, complete with performance test results and detailed code examples.
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.
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.
The talk outlines common AR use cases, explains browser‑based AR APIs and standards, and demonstrates how Baidu mini‑games integrate ARKit/ARCore and the DuMix SDK via WebXR to place a 3D car on detected planes with realistic lighting and shadows.
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.
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.
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.
This tutorial walks through using Three.js to create basic 3D scenes in HTML, covering library inclusion, renderer, scene, camera, object creation, camera positioning and angle adjustments, as well as adding rotation effects and rendering textured objects, with visual demos and code snippets.
Learn how to create immersive WebVR pages using the WebVR API and three.js, covering VR and non‑VR modes, required libraries, scene construction, camera setup, rendering, animation, and integration of VR controls and effects for both mobile and desktop browsers.
This guide explains how to create a basic augmented reality effect in a web page by capturing video with getUserMedia, detecting markers with jsaruco, and overlaying 2D or 3D objects using Canvas, Three.js or A‑Frame.
This tutorial explains how to create a WebVR page using the WebVR API and three.js, covering VR and naked‑eye modes, required plugins, HTML setup, scene construction, camera, renderer, a rotating cube, and integration of VR controls, effects, and manager for a complete immersive experience.
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.
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.
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.
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.
