Creating WebGL 3D Graphics with Three.js｜Practical Examples, Camera Controls, OBJ Loading, and Game Demos

• Home
• Creating WebGL 3D Graphics with Three.js｜Practical Examples, Camera Controls, OBJ Loading, and Game Demos

Creating WebGL 3D Graphics with Three.js｜Practical Examples, Camera Controls, OBJ Loading, and Game Demos

This page introduces how to render 3D graphics in WebGL using the JavaScript library “three.js,” along with practical sample code.
It covers major three.js features such as camera controls (OrbitControls, ArcballControls, TransformControls), materials, textures, shadows, water, sky, OBJ/MTL loading, 360° panoramas, mazes, carousels, and simple games.
The examples use three.js R145 and are built with the traditional JavaScript version rather than the module-based version.
This is recommended for anyone looking to add interactive 3D elements or dynamic backgrounds to their website.

three.js R145 can be downloaded from the link below:
https://github.com/mrdoob/three.js/tree/r145

From R148 onward, only the module version is provided, and it appears that R147 is the final release of the JavaScript (non‑module) version.
https://github.com/mrdoob/three.js/tree/r147

WebGL(three.js)

• Basic
• 

  Camera Control in Three.js with OrbitControls | How to Set Up Viewpoint Movement & Zoom

  This article explains how to freely control the camera in Three.js using OrbitControls. Learn in detail how to configure viewpoint movement and zoom with mouse drag, swipe, and pinch gestures.

• 

  Camera Control in Three.js with ArcballControls | Viewpoint Movement & Zoom Settings

  Learn how to control the camera in Three.js using ArcballControls. This tutorial covers rotation, pan, zoom, and focus with mouse drag, swipe, pinch, and double-click/tap gestures.

• 

  How to Use TransformControls in Three.js Intuitive Move, Rotate & Scale Implementation

  Learn how to use TransformControls in Three.js to intuitively move, rotate, and scale 3D objects with mouse operations. This tutorial provides clear explanations and example code for interactive object manipulation.

• 

  Shadows in Three.js Shadow Map Settings and Softening Shadow Edges

  Learn how to display realistic shadows in Three.js. This tutorial explains shadow map settings and how to soften shadow edges to create more natural 3D scenes.

• 

  Three.js Geometry Overview How to Use ExtrudeGeometry, TorusGeometry, and CylinderGeometry

  Explore the different geometries available in Three.js. Learn how to use ExtrudeGeometry, TorusGeometry, CylinderGeometry, and more with example code and explanations.

• 

  How to Use Materials in Three.js Designing 3D Content for the Web

  A clear explanation of the types and features of materials available in Three.js, with practical code examples. Learn the differences and usage of MeshBasicMaterial, MeshNormalMaterial, ToonMaterial, and more.

• 

  Texture Mapping in Three.js Designing 3D Content for the Web

  Learn how to apply textures to 3D objects in Three.js. This tutorial covers TextureLoader usage, material settings, and shadow adjustments with practical code examples.

• 

  Three.js Bump vs Displacement Maps | Differences and Usage Explained with Examples

  Learn the differences between bump maps and displacement maps in Three.js. Includes code examples showing lighting-only effects versus geometry-changing effects for clear visual understanding.

• Advanced Three.js Examples
• 

  How to Render the Sky in Three.js Using and Customizing Sky.js

  Learn how to render realistic skies in Three.js using Sky.js. Includes source code and practical examples for customization.

• 

  Rendering Flowing Water in Three.js | Water.js Usage and Implementation Examples

  Learn how to create realistic flowing water in Three.js using Water.js. This guide covers water movement, reflections, and building interactive 3D scenes.

• 

  Display Japanese Text in Three.js Without TextGeometry Simple & Flexible Method

  Learn how to display Japanese text in Three.js! This article introduces a simple and flexible method without using TextGeometry.

• 

  Grouping Meshes in Three.js — Designing 3D Content for the Web

  Learn how to group meshes created from geometry in Three.js and apply rotation or scaling to all of them at once, with source code and practical examples.

• 

  Using Fog Effects in Three.js | Creating Depth in 3D Scenes

  Learn how to use the fog feature in Three.js to create depth-rich 3D scenes. Easily implement a fog effect that increases with distance from the camera.

• 

  How to Easily Load 3D Models Using OBJLoader in Three.js

  Learn how to easily load OBJ files using Three.js's OBJLoader. This tutorial provides a step-by-step implementation guide with sample code, making it easy for developers to integrate 3D models into their web projects.

• 

  Using MTLLoader in Three.js | Applying .mtl Materials to OBJ Models

  Learn how to apply materials to OBJ models in Three.js using MTLLoader. This guide explains how to combine MTLLoader with OBJLoader and includes sample code for easy implementation.

• 

  Implementing Realistic Mirror Reflections in Three.js | Reflection Mapping with CubeCamera

  Learn how to create mirror-like reflections in Three.js using CubeCamera. This guide explains the reflection mapping process and includes sample code for easy implementation.

• 

  Implementing Realistic Refraction in Three.js | Creating Glass‑Like Effects

  Learn how to create glass‑like refraction effects in Three.js. This guide explains the refraction mapping process using CubeCamera and includes sample code for easy implementation.

• 

  How to Update 3D Mesh Vertex Positions in Real Time with Three.js [Detailed Guide & Sample Code]

  Learn how to update 3D mesh vertex positions in real time using Three.js to create dynamic 3D animations. This guide explains how to use computeVertexNormals(), how to set needsUpdate correctly, and provides practical examples with sample code.

• 

  [Three.js] Expressing Metaballs with MarchingCubes.js | Generate Smooth 3D Objects with Polygons

  Learn how to represent metaballs in Three.js using MarchingCubes.js. Create smooth polygonal 3D objects with interactive viewpoint rotation, explained in detail with source code and examples.

• Using 3D Content as a Website Background ~ Designing Websites with 3D Content (Three.js)

  An explanation of how to use Three.js 3D content as a website background, with source code and examples.

• - Applied Examples
• 

  Panoramic Display of 360° Images with Three.js | Implementation Example of Sphere Mapping and Viewpoint Rotation

  An implementation example of panoramic display in Three.js by mapping 360° images onto a sphere, enabling free viewpoint rotation. Rotate with mouse using OrbitControls, lightweight with WebGL. Ideal for reproducing spherical images taken with smartphones.

• 

  Three.js 360° Panoramic Images + Clickable Information | Interactive Implementation Example

  An interactive implementation example that displays 360° panoramic images with Three.js, showing information on click or tap. Viewpoint rotation and zooming are possible with mouse and wheel operations. Lightweight with WebGL, suitable for e-commerce sites and technical documentation applications.

• 

  Explore a 3D Maze in Your Browser! [Dynamic Walkthrough with Three.js]

  Create a 3D maze with Three.js and make it walkthrough-ready! Using the stick-falling algorithm, the maze is displayed in both 2D and 3D. Navigate with drag & tap operations while aiming for the goal.

• Experience a 3D Carousel in Your Browser! [Visual Gallery Powered by Three.js]

  Showcase a 3D carousel in the browser using Three.js! By dynamically rotating, scaling, and zooming images, you can build a visually impactful gallery. Includes detailed explanations with sample code.

• Stunning Visual Effects! Advanced 3D Carousel Implementation [Dynamic Animation with Three.js]

  An advanced 3D carousel animation implementation using Three.js! Discover techniques that go beyond traditional carousels to achieve striking visual effects and rich interactivity, complete with sample code.

• 

  Display a Realistic 3D Earth in Your Browser! [Beautifully Recreated with Three.js and NASA Images]

  Show a 3D Earth using JavaScript and Three.js! Utilizing NASA’s public data, this interactive web content realistically reproduces the Earth and cloud movements. Rotate freely with mouse or touch controls.

• - entertainment content
• 

  Build a Batting Game with Three.js | Playable 3D Baseball Experience on the Web

  Create a baseball game in the web browser using Three.js. Learn how to implement bat-swinging and ball-hitting actions, along with creative 3D effects.

• 

  How to Build a Slot Machine with Three.js｜A Practical Example of a 3D Slot Game Running on the Web

  Learn how to create a slot machine using Three.js and JavaScript, with a practical example featuring 3D animations. This guide explains the core structure of a slot game that runs directly in the web browser.

• 

  3D Gacha Capsule Animation — Designing 3D Web Content with Three.js

  A 3D gacha capsule animation created with Three.js.

• 

  3D Interior Simulation in Your Browser! Material Editing & Object Visibility Control with Three.js

  Explore 3D interior design powered by Three.js! Toggle furniture visibility with OBJLoader.js, switch materials freely, and enjoy smooth camera control with ArcballControls.js for a realistic design simulation experience.

• 

  Experience 3D Drone Control in Your Browser! Realistic Flight Simulation Powered by Three.js

  Experience 3D drone control directly in your browser using Three.js and JavaScript! With OrbitControls enabling realistic flight behavior, this guide provides a detailed explanation along with sample code.

• Visual Training — Clicking and Touch Interaction with 3D Objects in Three.js

  Visual training using Three.js, featuring interactive 3D object clicking and touch controls.