使用three.js做一个网页的相册动画

不上班老板怎么买房买车

已于 2022-04-21 11:52:38 修改

阅读量700

点赞数 2

分类专栏： three.js 文章标签：前端

于 2022-04-20 18:04:12 首次发布

本文链接：https://blog.csdn.net/yangjianxun8888/article/details/124297400

版权

three.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

想了很久不知道有没有必要，但还是记录下来，以后说不定还会用的到，希望大家也有机会试试
就先做一个简单的页面，做一下动画，放一些图片吧，以后有新东西还是会加进来的

1.先创建一个html文件，初始化代码

引入需要的js文件，这里我们都使用线上链接吧，尽可能使用一个页面文件实现，我们加上一些背景图片，背景音乐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网站名称 -->
    <title>相册</title>
    <!-- 网站图标 -->
    <link rel="icon" href="http://ramkxaclc.hn-bkt.clouddn.com/love.ico">
</head>
<!-- 引入js文件 -->
<script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
<body>
    <audio controls autoplay loop preload="auto" id="audio">
        <source src="http://ramkxaclc.hn-bkt.clouddn.com/love.mp3" type="audio/mpeg">
        您的浏览器不支持播放音乐。
    </audio>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        border: 0;
    }
    body {
        background: #f6c8d3 url("http://ramkxaclc.hn-bkt.clouddn.com/banner.gif") no-repeat;
        background-size: 100vw 100vh;
        overflow: hidden;
    }
    #audio {
        display: none;
    }
</style>
</html>

2.接下来就是在body中开始写three.js

这块我先简单的用正方体，具体的模型请看three.js文档，里面有各种模型，可以直接替换，参数都差不多

 <!-- 动画的js -->
<script>
    //我们把每一面要展示的图片放在这里(推荐线上地址呦)
    var imgpath = [
        "http://ramkxaclc.hn-bkt.clouddn.com/1.jpg",
        "http://ramkxaclc.hn-bkt.clouddn.com/2.jpg",
        "http://ramkxaclc.hn-bkt.clouddn.com/3.jpg",
        "http://ramkxaclc.hn-bkt.clouddn.com/4.jpg",
        "http://ramkxaclc.hn-bkt.clouddn.com/5.jpg",
        "http://ramkxaclc.hn-bkt.clouddn.com/6.jpg",
    ]
    //   创建场景对象Scene
    var scene = new THREE.Scene();
    // 创建一个立方体几何对象Geometry
    var geometry = new THREE.BoxGeometry(50, 50, 50);
    // 设置材质数组
    var materialArr = [];
    // 纹理加载器
    var textureLoader = new THREE.TextureLoader()
    // 主要的图片都在这里
    imgpath.forEach((item, index) => {
        // 材质对象Material
        var material = new THREE.MeshPhongMaterial({
            opacity: 0.8,
            transparent: true,
            name: "material" + index,
            map: textureLoader.load(item)
        });
        materialArr.push(material)
    })
    //网格模型对象Mesh
    var mesh = new THREE.Mesh(geometry, materialArr);
    //网格模型坐标系
    scene.add(mesh);
    // 创建一个壳子
    var customMaterial = new THREE.MeshNormalMaterial({
        opacity: 0.1,
        transparent: true,
    });
    var newmesh = new THREE.Mesh(geometry.clone(), customMaterial);
    // 放大1.2倍
    newmesh.scale.multiplyScalar(1.2);
    // 添加新壳子
    scene.add(newmesh);
    //点光源
    var point = new THREE.PointLight(0xffffff);
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0xffffff);
    scene.add(ambient);
    // 相机设置
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 50; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 0, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    // 创建渲染器对象
    var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(width, height);//设置渲染区域尺寸
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象render
    //执行渲染操作   指定场景、相机作为参数
    function render() {
        var audio = document.getElementById("audio")
        if (audio) {
            if (audio.paused) {// 如果是暂停状态, 让其播放, 反之暂停
                audio.play();
            }
        }
        renderer.render(scene, camera);//执行渲染操作
        mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
        newmesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
        requestAnimationFrame(render);//请求再次执行渲染函数render
    }
    render()
    // 初始化控制
    var controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象
    controls.addEventListener('change', renderer.render(scene, camera));//监听鼠标、键盘事件
</script>

3.接下来说一下如何使用线上地址的图片

平常qq空间的图片就可以使用，不过还是推荐大家用一下第三方的服务器，我们可以把页面也放上去，我这里用的是七牛云
在这里插入图片描述
上传的时候记得选择公开呀，然后就把我文章中的图片地址换一下，（注意的是免费域名只有30天试用期）好了，大致就是这样，点这里是我完成后的地址，大家大致看下，丑一点，大家参考一下就行

如果大家不想复制和话可以花1积分下载一下