js实现3D照片墙效果

下面是关于“js实现3D照片墙效果”的完整攻略：

1. 前置知识

在进行3D照片墙效果的实现之前，需要对以下几个前置知识有所了解：

• HTML、CSS的基本语法和常见布局方法；
• JavaScript的基础，如DOM操作、事件监听等；
• 熟悉canvas的基本用法；
• 熟悉矩阵转换相关的数学知识。

2. 效果描述

3D照片墙效果即为将用户上传或从网络上获取的多张图片，以3D立体形式呈现在网页上，给人以沉浸感和智趣感。

该效果的关键在于，通过对于每一张图片的坐标轴的转换，将多张图片放置到不同的位置，从而产生3D的效果。

3. 实现过程

3.1 入口函数

我们首先在HTML文件中创建一个canvas标签，并在js中获取到该元素的上下文环境，方便进行绘制操作。之后，在window.onload事件中，我们将所有需要的图片资源加载完毕后调用init()函数，该函数即为本效果的入口函数。

<!--HTML-->
<canvas id="myCanvas" width="800" height="600"></canvas>

//JS
window.onload = function() {
    //获取canvas的上下文环境
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    //预加载所有资源
    var imgUrls = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg'];
    var imgs = [];
    var count = 0;
    imgUrls.forEach(function(url, index) {
        var img = new Image();
        img.src = url;
        img.onload = function() {
            count++;
            if(count == imgUrls.length) {
                //所有资源已加载完毕，调用入口函数
                init(ctx, imgs);
            }
        };

        imgs.push(img);
    });
};

function init(ctx, imgs) {
    //实现3D照片墙效果
}

3.2 绘制图片

在init()函数中，我们需要将所有的图片渲染到canvas上。考虑到每个图片在3D空间中的坐标都不同，因此需要对每个图片进行矩阵变换，从而将它们放置在立方体的不同面上。

在进行图片绘制的时候，我们首先需要通过Math.PI将角度转换为弧度制，然后通过绕x轴和y轴的旋转矩阵进行坐标轴的变换。由于绕x轴的旋转变换可以拆分为绕y轴和z轴的旋转变换的组合，因此考虑将整个照片墙的坐标轴定义为在y轴和z轴上的二维坐标系。具体过程如下：

//图片宽高的比例，即横纵方向的缩放比例
var proportion = 600 / 800;

//旋转基准点的坐标
var baseX = proportion * 100; //在y轴上
var baseY = 0; //在z轴上

//每个照片在墙上的坐标
var data = [
    //第一层
    {x: -2, y: 1, z: -2},
    {x: -1, y: 2, z: -2},
    {x: 0, y: 3, z: -2},
    {x: 1, y: 4, z: -2},
    {x: 2, y: 5, z: -2},
    //第二层
    {x: -2, y: 1, z: -1},
    {x: -1, y: 2, z: -1},
    {x: 0, y: 3, z: -1},
    {x: 1, y: 4, z: -1},
    {x: 2, y: 5, z: -1},
    //第三层
    {x: -2, y: 1, z: 0},
    {x: -1, y: 2, z: 0},
    {x: 0, y: 3, z: 0},
    {x: 1, y: 4, z: 0},
    {x: 2, y: 5, z: 0},
    //第四层
    {x: -2, y: 1, z: 1},
    {x: -1, y: 2, z: 1},
    {x: 0, y: 3, z: 1},
    {x: 1, y: 4, z: 1},
    {x: 2, y: 5, z: 1},
    //第五层
    {x: -2, y: 1, z: 2},
    {x: -1, y: 2, z: 2},
    {x: 0, y: 3, z: 2},
    {x: 1, y: 4, z: 2},
    {x: 2, y: 5, z: 2},
];

var gap = 200; //相邻两照片的间距

//绘制每个照片
data.forEach(function(item, index) {
    //计算当前图片的旋转角度
    var angleX = item.y * 8;
    var angleY = item.x * 7;
    var radianX = angleX * Math.PI / 180;
    var radianY = angleY * Math.PI / 180;

    //计算当前图片的坐标
    var x = baseX + item.x * gap;
    var y = baseY + item.y * 200;
    var z = item.z * gap;

    //x轴旋转变换矩阵
    var rotateX = [
        [1, 0, 0, 0],
        [0, Math.cos(radianX), Math.sin(radianX), 0],
        [0, -Math.sin(radianX), Math.cos(radianX), 0],
        [0, 0, 0, 1]
    ];

    //y轴旋转变换矩阵
    var rotateY = [
        [Math.cos(radianY), 0, -Math.sin(radianY), 0],
        [0, 1, 0, 0],
        [Math.sin(radianY), 0, Math.cos(radianY), 0],
        [0, 0, 0, 1]
    ];

    //绕x轴和y轴同时旋转，并沿z轴平移
    var result = multiplyMatrix(multiplyMatrix(rotateX, rotateY), [1, 0, 0, x, 0, 1, 0, y, 0, 0, 1, z, 0, 0, 0, 1]);

    //绘制图片
    ctx.save();
    ctx.transform(result[0], result[1], result[4], result[5], result[12], result[13]);
    ctx.drawImage(imgs[index % imgs.length], -100, -100 * proportion, 200, 200 * proportion);
    ctx.restore();
});

//矩阵乘法计算
function multiplyMatrix(m1, m2) {
    var result = [];
    for(var i = 0; i < 4; i++) {
        for(var j = 0; j < 4; j++) {
            var item = 0;
            for(var k = 0; k < 4; k++) {
                item += m1[i][k] * m2[k * 4 + j];
            }
            result.push(item);
        }
    }
    return result;
}

注意到图片的绘制采用了canvas的变换API，具体来说，将绘制环境的变换矩阵设置为图片的变换矩阵即可实现图片的正确绘制。

3.3 交互实现

为了增强用户的沉浸感和交互体验，我们可以为3D照片墙效果添加鼠标滑动、缩放、点击等交互操作，以不同的视角展示图片。在具体实现时，主要是通过监听不同的鼠标事件，并根据不同的交互操作进行投影变换。以下两个示例仅介绍了其中的两个交互实现。

3.3.1 鼠标滑动

在鼠标滑动事件中，我们监听到鼠标相对于屏幕的字符坐标，从而计算出相对于canvas的坐标。由于鼠标滑动的范围很大，因此我们可以将整个3D环境旋转，产生一种随着鼠标滑动而转动的效果。

//鼠标滑动事件
var lastX = null;
var lastY = null;
canvas.addEventListener('mousemove', function(e) {
    if(lastX === null && lastY === null) {
        lastX = e.clientX;
        lastY = e.clientY;
        return;
    }

    var deltaX = e.clientX - lastX;
    var deltaY = e.clientY - lastY;

    //绕x轴和y轴同时旋转
    var angleX = deltaY / 10;
    var angleY = deltaX / 10;
    var radianX = angleX * Math.PI / 180;
    var radianY = angleY * Math.PI / 180;
    var rotateX = [
        [1, 0, 0, 0],
        [0, Math.cos(radianX), Math.sin(radianX), 0],
        [0, -Math.sin(radianX), Math.cos(radianX), 0],
        [0, 0, 0, 1]
    ];

    var rotateY = [
        [Math.cos(radianY), 0, -Math.sin(radianY), 0],
        [0, 1, 0, 0],
        [Math.sin(radianY), 0, Math.cos(radianY), 0],
        [0, 0, 0, 1]
    ];

    //更新绘制环境的变换矩阵
    transformMatrix = multiplyMatrix(transformMatrix, multiplyMatrix(rotateX, rotateY));
    lastX = e.clientX;
    lastY = e.clientY;
    repaint();
});

3.3.2 鼠标缩放

在鼠标滚动事件中，我们根据鼠标滑动的方向，对整个3D环境进行缩放变换。具体来说，增加缩放系数使得照片墙看起来更大，减小缩放系数使得照片墙看起来更小。

//鼠标滚轮事件
canvas.addEventListener('mousewheel', function(e) {
    e.preventDefault();
    var delta = e.deltaY > 0 ? -0.1 : 0.1; //改变该值以改变缩放的速度
    zoom += delta;

    //绕z轴缩放变换矩阵
    var scaleZ = [
        [1, 0, 0, 0],
        [0, 1, 0, 0],
        [0, 0, 1, 0],
        [0, 0, delta * 200, 1]
    ];

    //更新绘制环境的变换矩阵
    transformMatrix = multiplyMatrix(transformMatrix, scaleZ);
    repaint();
});

4. 示例说明

4.1 示例1

本示例通过一个漂亮的3D照片墙来展示上述代码的效果。

示例代码和效果

4.2 示例2

为了进一步提高代码的适用性，在本示例中，我们对前两步中的代码进行封装，将其封装成一个可复用的3D照片墙组件。用户只需传递必要的参数，便可以在任何应用场景中实现3D照片墙效果。

示例代码和效果