Creating a 3D Gallery App with Three.js, HTML, and CSS - part 1

The 3D Gallery App lets users explore art in a 3D space, view detailed info about each piece, and enjoy a responsive design on any device. It's also easy to customize with new models to keep the gallery exciting. You can also take a look at an example of my 3D Gallery App here

Setting Up the Project

Set Up Vite
Start by creating a new directory for your project and create a new Vite project.

mkdir 3d-gallery-app
cd 3d-gallery-app
npm create vite@latest

Follow the prompts to name your project and select the framework. For this example, select vanilla.

Install Three.js: Three.js is the core library we'll use to create and manage 3D content.


npm install three

Create the Basic File Structure: Organize your project by creating the following files and directories:

3d-gallery-app/
├── index.html
├── styles.css
├── main.js
├── src/
├── public/
├── package.json
├── vite.config.js

Building the 3D Gallery

HTML Structure

Create a simple HTML file to set up the structure of your gallery.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Gallery App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="gallery"></div>
    <script src="main.js"></script>
</body>
</html>

CSS Styling

Add some basic CSS to style the gallery container.

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

#gallery {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

Three.js

Now, let's dive into the JavaScript to create the 3D environment.

// Import Three.js
import * as THREE from 'three';

// Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('gallery').appendChild(renderer.domElement);

// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);

// Load Models
const loader = new THREE.GLTFLoader();
loader.load('assets/models/model.gltf', function(gltf) {
    scene.add(gltf.scene);
}, undefined, function(error) {
    console.error(error);
});

// Camera Position
camera.position.z = 5;

// Animation Loop
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

// Handle Window Resize
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

Adding Models

To add 3D models to your gallery, place your model files (e.g., .gltf or .obj files) in the assets/models/ directory. Make sure they are optimized for web use. You can also browse for models on the web.

Enhancing the Experience

1. Navigation Controls:
Add controls to navigate through the 3D space using OrbitControls.

npm install three-orbitcontrols

Then update main.js:

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// Add OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;

2. Detailed Information:
Display detailed information about each model with event listeners.

function onDocumentMouseClick(event) {
    event.preventDefault();
    const mouse = new THREE.Vector2(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1
    );

    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObjects(scene.children, true);
    if (intersects.length > 0) {
        const intersected = intersects[0].object;
        console.log('Model clicked:', intersected.name);
        // Display model information
    }
}

document.addEventListener('click', onDocumentMouseClick, false);

End of Part 1

By following these steps, you've built a basic 3D Gallery App using Three.js, HTML, and CSS. This application allows users to explore and interact with 3D models in an immersive virtual space. We've covered setting up your project, creating the 3D environment, adding models, and enhancing the experience with navigation controls and detailed model information.

In Part 2, we will take this project further by adding an four walls to our gallery and additional controls to enhance user interaction within the application. Stay tuned for more exciting features and improvements! :)

www.aliozzaim.com