我們最近嘗試用HTML5來開發一個3D相冊。這篇文章中，我們將分享一些HTML5制作3D相冊的源代碼，幫助那些正在尋找實現這個功能的人。 首先，我們需要定義一個畫布作為3D相冊的容器。我們可以在HTML文件中使用以下代碼來創建畫布元素：

<canvas id="canvas" width="400" height="400"></canvas>

接下來，我們需要在JavaScript中定義3D場景。以下代碼是定義3D場景的關鍵代碼段：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({canvas: document.getElementById("canvas"), alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

在這段代碼中，我們首先定義了一個3D場景，并創建了一個透視相機（PerspectiveCamera）和WebGL渲染器（WebGLRenderer）。我們還將渲染器連接到我們之前定義的畫布canvas元素上。 接下來，我們需要加載相冊中的每張圖片并將其作為紋理應用到一個立方體上。以下代碼段是加載每張圖片并應用紋理的關鍵代碼：

var loader = new THREE.TextureLoader();
var texture = loader.load("images/image1.jpg");
var geometry = new THREE.BoxGeometry(4,4,4);
var material = new THREE.MeshBasicMaterial({map: texture});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

在這段代碼中，我們使用THREE.TextureLoader加載圖片。然后我們使用THREE.BoxGeometry創建立方體的幾何結構。我們使用THREE.MeshBasicMaterial將紋理映射到立方體上，并使用THREE.Mesh將立方體添加到我們之前定義的場景中。 最后，我們需要在JavaScript中定義一個動畫循環函數，以便相冊能夠旋轉和移動。以下是定義動畫循環函數的關鍵代碼段：

function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();

在這段代碼中，我們使用requestAnimationFrame循環調用animate()函數。在每個循環中，我們將立方體繞x和y軸旋轉一個固定的角度。我們還使用THREE.Renderer中的render()方法在每個動畫循環中渲染場景。 以上是HTML5制作3D相冊的主要源代碼。我們希望這些代碼可以幫助你開始制作自己的3D相冊。