Building a 3D Interactive Earth with Three.js

23 January 20254 min read

Create Immersive 3D Earth with Three.js: Interactive WebGL

Table of Contents

Preparation: Technologies and Resources

1. Project Initialization

2. Create a 3D Scene

Understanding the Code: A Line-by-Line Breakdown

Key Optimization Techniques

Performance Considerations

Expansion and Improvement Possibilities

Conclusion

In modern web development, visual interaction is key to capturing user attention. Three.js, as one of the most powerful WebGL libraries, makes complex 3D visualization accessible. This article will detail how to create an interactive 3D earth display using Three.js.

Preparation: Technologies and Resources

Technology Stack

Three.js: 3D rendering library
Vite: Modern frontend build tool
JavaScript (ES6+)

Required Resources

High-resolution earth texture

1. Project Initialization

Quick project setup with Vite:

bash

1 npm create vite@latest earth-3d -- --template vanilla
2 cd earth-3d
3 npm install three

Change the index.html file to include the main js file:

html

1 <!DOCTYPE html>
2 <html lang="en">
3   <head>
4     <meta charset="UTF-8" />
5     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7     <title>3D Earth</title>
8   </head>
9   <body>
10     <script type="module" src="/src/main.js"></script>
11   </body>
12 </html>

2. Create a 3D Scene

In the main.js file, set up the Three.js scene:

1 import * as THREE from "three";
2 
3 import "./style.css";
4 
5 // Create the 3D scene
6 const scene = new THREE.Scene();
7 
8 // Get canvas element (optional in this example)
9 const canvas = document.getElementById("webglcanvas");
10 
11 // Create perspective camera
12 const camera = new THREE.PerspectiveCamera(
13   75, // Field of View (FOV)
14   window.innerWidth / window.innerHeight, // Aspect Ratio
15   0.1, // Near clipping plane
16   1000 // Far clipping plane
17 );
18 camera.position.z = 500; // Position camera away from the scene
19 
20 // Create WebGL renderer
21 const renderer = new THREE.WebGLRenderer();
22 renderer.setSize(window.innerWidth, window.innerHeight);
23 document.body.appendChild(renderer.domElement);
24 
25 // Create a group to manage 3D objects
26 const group = new THREE.Group();
27 scene.add(group);
28 
29 // Mouse position tracking variables
30 let mouseX = 0,
31   mouseY = 0;
32 
33 // Texture loader for earth image
34 const loader = new THREE.TextureLoader();
35 loader.load("3d.png", function (texture) {
36   // Create sphere geometry
37   const geometry = new THREE.SphereGeometry(200, 20, 20);
38 
39   // Create material with loaded texture
40   const material = new THREE.MeshBasicMaterial({
41     map: texture,
42   });
43 
44   // Create mesh by combining geometry and material
45   const mesh = new THREE.Mesh(geometry, material);
46   group.add(mesh);
47 
48   // Add mouse move event listener
49   document.addEventListener("mousemove", onDocumentMouseMove, false);
50 });
51 
52 // Mouse move handler
53 function onDocumentMouseMove(event) {
54   // Normalize mouse coordinates
55   mouseX = event.clientX - 0.5;
56   mouseY = event.clientY - 0.5;
57 }
58 
59 // Window resize handler
60 function onWindowResize() {
61   // Update camera aspect ratio
62   camera.aspect = window.innerWidth / window.innerHeight;
63   camera.updateProjectionMatrix();
64 
65   // Resize renderer
66   renderer.setSize(window.innerWidth, window.innerHeight);
67 }
68 
69 // Render and animation function
70 function render() {
71   // Smoothly move camera based on mouse position
72   camera.position.x += (mouseX - camera.position.x) * 0.05;
73   camera.position.y += (mouseY - camera.position.y) * 0.05;
74 
75   // Ensure camera looks at the scene center
76   camera.lookAt(scene.position);
77 
78   // Rotate earth slowly
79   group.rotation.y += 0.0005;
80   group.rotation.x += 0.00001;
81 
82   // Render the scene
83   renderer.render(scene, camera);
84 }
85 
86 // Animation loop
87 function animate() {
88   requestAnimationFrame(animate);
89   render();
90 }
91 
92 // Start the animation
93 renderer.setAnimationLoop(animate);

Understanding the Code: A Line-by-Line Breakdown

1. Scene Setup

1 const scene = new THREE.Scene();

This line creates the fundamental 3D container. Think of it as a digital stage where all your 3D objects will perform.

2. Camera Configuration

1 const camera = new THREE.PerspectiveCamera(
2   75, // Field of View (FOV)
3   window.innerWidth / window.innerHeight, // Aspect Ratio
4   0.1, // Near clipping plane
5   1000 // Far clipping plane
6 );

The camera mimics human vision:

75: Viewing angle (degrees)
Aspect ratio ensures proper scaling
Clipping planes prevent rendering unnecessary details

3. Renderer Creation

1 const renderer = new THREE.WebGLRenderer();
2 renderer.setSize(window.innerWidth, window.innerHeight);
3 document.body.appendChild(renderer.domElement);

Translates 3D scene to 2D screen, handling all WebGL complexities automatically.

4. Texture and Sphere Creation

1 const loader = new THREE.TextureLoader();
2 loader.load("3d.png", function (texture) {
3   const geometry = new THREE.SphereGeometry(200, 20, 20);
4   const material = new THREE.MeshBasicMaterial({ map: texture });
5   const mesh = new THREE.Mesh(geometry, material);
6   group.add(mesh);
7 });

Breaks down into:

Load texture image
Create sphere geometry
Apply texture as material
Combine into a mesh
Add to scene group

5. Interactive Elements

1 function onDocumentMouseMove(event) {
2   mouseX = event.clientX - 0.5;
3   mouseY = event.clientY - 0.5;
4 }

Captures mouse movement to enable dynamic camera positioning.

6. Animation Loop

1 function render() {
2   camera.position.x += (mouseX - camera.position.x) * 0.05;
3   camera.position.y += (mouseY - camera.position.y) * 0.05;
4   group.rotation.y += 0.0005;
5   renderer.render(scene, camera);
6 }

Continuously updates:

Camera position based on mouse
Earth rotation
Renders each frame

Key Optimization Techniques

Smooth camera movement using interpolation
Minimal rotation speeds for natural effect
Efficient WebGL rendering

Performance Considerations

Use lower polygon count for faster rendering
Optimize texture sizes
Implement lazy loading

Expansion and Improvement Possibilities

Add cloud layer animation
Implement country/region highlighting
Integrate geographic data visualization

Conclusion

Three.js transforms complex 3D rendering into a straightforward, developer-friendly process. By understanding these fundamental concepts, you can create stunning interactive visualizations. Happy coding! 🚀🌍

threejs

3d-earth

webgl

vite