48 | Welcome to our virtual 3D Art Gallery. Here, you can navigate through a 49 | variety of wonderful artworks and learn about their history and 50 | significance. 51 |
52 |53 | This project is brought to you by Emilian Kasemi. We believe in the 54 | power of art to inspire, provoke thought, and communicate across 55 | cultures and epochs. Our mission is to make art accessible to everyone, 56 | regardless of location or background. 57 |
58 |59 | Feel free to explore and engage with the artworks. The gallery is best 60 | experienced in full-screen mode. For optimal navigation, use the arrow 61 | keys or the W, A, S, and D keys. You can also use your mouse to change 62 | the viewing direction. Additional information about the artworks will 63 | appear on your screen as you approach them. 64 |
65 |W/A/S/D: Move around
74 |Mouse: Look around
75 |Space: Toggle pointer lock
76 |M: Show Menu
77 |Enter: Start exploration
78 |Esc: Stop exploration
79 |G: Start audio guide
80 |P: Stop audio guide
81 |Artist: ${info.artist}
9 |Description: ${info.description}
10 |Year: ${info.year}
11 | `; 12 | infoElement.classList.add('show'); // Add the 'show' class 13 | }; 14 | 15 | // Hide painting info in the DOM 16 | export const hidePaintingInfo = () => { 17 | const infoElement = document.getElementById('painting-info'); // Get the reference 18 | infoElement.classList.remove('show'); // Remove the 'show' class 19 | }; 20 | 21 | -------------------------------------------------------------------------------- /modules/paintings.js: -------------------------------------------------------------------------------- 1 | import * as THREE from 'three'; 2 | 3 | import { paintingData } from './paintingData.js'; 4 | 5 | export function createPaintings(scene, textureLoader) { 6 | 7 | let paintings = []; 8 | 9 | paintingData.forEach((data) => { 10 | 11 | const painting = new THREE.Mesh( 12 | new THREE.PlaneGeometry(data.width, data.height), 13 | new THREE.MeshLambertMaterial({ map: textureLoader.load(data.imgSrc) }) 14 | ); 15 | 16 | painting.position.set(data.position.x, data.position.y, data.position.z); 17 | painting.rotation.y = data.rotationY; 18 | 19 | 20 | painting.userData = { 21 | type: 'painting', 22 | info: data.info, 23 | url: data.info.link 24 | }; 25 | 26 | painting.castShadow = true; 27 | painting.receiveShadow = true; 28 | 29 | paintings.push(painting); 30 | }); 31 | 32 | return paintings; 33 | } 34 | -------------------------------------------------------------------------------- /modules/rendering.js: -------------------------------------------------------------------------------- 1 | import * as THREE from "three"; 2 | import { displayPaintingInfo, hidePaintingInfo } from "./paintingInfo.js"; 3 | import { updateMovement } from "./movement.js"; 4 | 5 | export const setupRendering = ( 6 | scene, 7 | camera, 8 | renderer, 9 | paintings, 10 | controls, 11 | walls 12 | ) => { 13 | const clock = new THREE.Clock(); 14 | 15 | let render = function () { 16 | const delta = clock.getDelta(); 17 | 18 | updateMovement(delta, controls, camera, walls); 19 | 20 | const distanceThreshold = 8; 21 | 22 | let paintingToShow; 23 | paintings.forEach((painting) => { 24 | const distanceToPainting = camera.position.distanceTo(painting.position); 25 | if (distanceToPainting < distanceThreshold) { 26 | paintingToShow = painting; 27 | } 28 | }); 29 | 30 | if (paintingToShow) { 31 | // if there is a painting to show 32 | displayPaintingInfo(paintingToShow.userData.info); 33 | } else { 34 | hidePaintingInfo(); 35 | } 36 | 37 | renderer.gammaOutput = true; 38 | renderer.gammaFactor = 2.2; 39 | 40 | renderer.render(scene, camera); 41 | requestAnimationFrame(render); 42 | }; 43 | 44 | render(); 45 | }; 46 | -------------------------------------------------------------------------------- /modules/scene.js: -------------------------------------------------------------------------------- 1 | import * as THREE from "three"; 2 | import { PointerLockControls } from "three-stdlib"; 3 | 4 | export const scene = new THREE.Scene(); // create a scene 5 | let camera; 6 | let controls; 7 | let renderer; 8 | 9 | export const setupScene = () => { 10 | // PerspectiveCamera is a type of camera that mimics the way the human eye sees things. It takes 4 parameters: field of view, aspect ratio, near clipping plane, and far clipping plane. The field of view is the extent of the scene that is seen on the display at any given moment. The aspect ratio should be the width of the element divided by the height (in this case, the screen width and height). The camera will not render objects that are closer to the camera than the near clipping plane or further away than the far clipping plane. Objects that are exactly on the clipping plane will not be rendered. 11 | camera = new THREE.PerspectiveCamera( 12 | 60, // fov = field of view 13 | window.innerWidth / window.innerHeight, // aspect ratio 14 | 0.1, // near clipping plane 15 | 1000 // far clipping plane 16 | ); 17 | scene.add(camera); // add the camera to the scene 18 | camera.position.set(0, 2, 15); // move the camera up 3 units in the Y axis 19 | 20 | renderer = new THREE.WebGLRenderer({ antialias: false }); // create a WebGLRenderer and set its antialias property to true to enable antialiasing which smooths out the edges of what is rendered 21 | renderer.setSize(window.innerWidth, window.innerHeight); // set the size of the renderer to the inner width and height of the window (the browser window) 22 | renderer.setClearColor(0xffffff, 1); // set the background color of the renderer to white 23 | document.body.appendChild(renderer.domElement); // append the renderer to the body of the document (the