html5 3d相册代码

!DOCTYPE html>
    html>
    head>
    meta charset="utf-8">
    title>
    HTML5 3D相册/title>
    !-- 引入three.js库-->
    script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r125/three.min.js">
    /script>
    style>
/* 设置相册背景 */body {
    background-color: #ddd;
    margin: 0;
}
/* 图片容器样式 */#album {
    width: 100%;
    height: 500px;
    position: relative;
}
/* li元素样式 */li {
    width: 200px;
    height: 200px;
    margin: 0 50px;
    background-color: #fff;
    position: absolute;
    top: 150px;
    left: 0;
    transform-style: preserve-3d;
    transform-origin: center left;
    transition: all 1s;
}
/* .active类样式 */li.active {
    transform: translateX(600px) rotateY(45deg);
}
    /style>
    /head>
    body>
    div id="album">
    ul>
    li>
    img src="image1.jpg" alt="image1">
    /li>
    li>
    img src="image2.jpg" alt="image2">
    /li>
    li>
    img src="image3.jpg" alt="image3">
    /li>
    li>
    img src="image4.jpg" alt="image4">
    /li>
    li>
    img src="image5.jpg" alt="image5">
    /li>
    /ul>
    /div>
    !-- JS代码-->
    script>
    var album = document.querySelector("#album");
    var pictures = album.querySelectorAll("li");
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0xffffff,wireframe: true}
    );
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5;
var render = function () {
    requestAnimationFrame(render);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
    ;
    render();
    /script>
    /body>
    /html>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！