Creating a 3D Gallery App with Three.js, HTML, and CSS – part 1 – ██FR█████ █INTELL███████████

This content originally appeared on DEV Community and was authored by Ali Ozzaim

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.

Setting Up the Project

Initialize Your Project: Start by creating a new directory for your project and initializing a new npm project.

   mkdir 3d-gallery-app
   cd 3d-gallery-app
   npm init -y

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
├── script.js
└── assets/
    ├── models/
    └── textures/

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="script.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 script.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 animated cube and additional controls to enhance user interaction within the application. Stay tuned for more exciting features and improvements! 🙂

Ali Rıza Özzaim

aliozzaim.com

This content originally appeared on DEV Community and was authored by Ali Ozzaim