DEV Community

Cover image for ๐Ÿš€ Getting Started with Three.js: Create Stunning 3D Websites
Ashish prajapati
Ashish prajapati

Posted on

๐Ÿš€ Getting Started with Three.js: Create Stunning 3D Websites

Incorporating 3D graphics into websites is an exciting way to enhance user experience and add visual depth! Thanks to Three.js, a JavaScript library built on WebGL, we can create everything from immersive environments to simple 3D animations right in the browser. This guide will walk you through the basics of Three.js to help you get started with 3D website design. Let's dive in! ๐ŸŒ


๐Ÿ–ฅ๏ธ Why Use Three.js?

Three.js is a powerful library that makes working with 3D in the browser far simpler than coding WebGL from scratch. With Three.js, you can:

  • Create rich 3D scenes ๐ŸŒŒ
  • Render objects with lighting, materials, and textures ๐ŸŽจ
  • Add animations and interactivity to engage users ๐Ÿ‘†

Whether you want to create a simple interactive model or a full 3D experience, Three.js has the tools you need.


๐Ÿ”ง Setting Up Your Three.js Project

To start using Three.js, you can either include it from a CDN or install it using npm:

npm install three
Enter fullscreen mode Exit fullscreen mode

Or, add it directly in your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Once Three.js is included, youโ€™re ready to set up your first 3D scene!


๐Ÿ–Œ๏ธ Building the Basics: Scene, Camera, and Renderer

In Three.js, creating a 3D experience involves three core components:

  1. Scene โ€“ This is your 3D world, where all objects, lights, and cameras exist.
  2. Camera โ€“ Defines the viewpoint in your scene, determining what the user sees.
  3. Renderer โ€“ This draws everything from the scene and camera to the screen.

Hereโ€™s how to initialize these in Three.js:

// Step 1: Create a Scene
const scene = new THREE.Scene();

// Step 2: Set Up a Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Step 3: Create the Renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
Enter fullscreen mode Exit fullscreen mode

With these components set up, you have a basic 3D environment ready! ๐ŸŒ


โœจ Adding Objects to the Scene

Now, letโ€™s make this 3D space interesting by adding some shapes. In Three.js, you can use geometries like boxes, spheres, and custom shapes. Hereโ€™s how to add a rotating cube:

// Create a Cube Geometry
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x0077ff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
Enter fullscreen mode Exit fullscreen mode

Now we have a cube in our 3D world! Letโ€™s make it spin ๐ŸŽข:

function animate() {
  requestAnimationFrame(animate);

  // Rotate the cube
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();
Enter fullscreen mode Exit fullscreen mode

Running this code will display a rotating blue cube on your screen! ๐ŸŒ


๐Ÿ’ก Enhancing with Lights and Materials

Lighting is essential for creating realistic effects. Three.js supports different types of lights, like AmbientLight for general illumination and DirectionalLight to simulate sunlight.

Letโ€™s add a light source and change the material for a more realistic look:

// Add Lighting
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
scene.add(light);

// Update the material
const material = new THREE.MeshStandardMaterial({ color: 0x0077ff, roughness: 0.5 });
cube.material = material;
Enter fullscreen mode Exit fullscreen mode

๐Ÿ’ก With this setup, youโ€™ll notice realistic shading on your 3D objects as they interact with light!


๐ŸŒ Going Further: Textures, Models, and Interactivity

Three.js lets you load external textures, 3D models (like those in .glTF or .obj formats), and add interactivity to your scenes.

Hereโ€™s a sneak peek at some advanced techniques:

  1. Loading Textures โ€“ Apply image textures to objects for realism.
  2. Importing Models โ€“ Use tools like Blender to create complex models and load them into your scene.
  3. User Interactivity โ€“ Utilize raycasting to detect mouse clicks on 3D objects, enabling interactions like clicking or dragging.

๐Ÿ”„ Optimizing Your 3D Scene

3D elements can be demanding on performance. Here are a few tips:

  • Optimize textures ๐ŸŽจ by resizing or compressing them.
  • Reduce polygon count ๐Ÿ•น๏ธ on complex models.
  • Use animation loops carefully to avoid high CPU usage.

๐Ÿ’ฅ Wrapping Up

Three.js opens up a world of possibilities for bringing interactive 3D to your website! With the basics covered here, you can start experimenting with your own 3D scenes. Dive into Three.js documentation, try loading different models, and explore lighting to create immersive effects.

Are you ready to add some extra depth to your next web project? โœจ

Top comments (1)

Collapse
 
andrewbaisden profile image
Andrew Baisden

So easy to create fun 3D designs using Three.js. I'm tempted to use it on my next website.