做一个网页的相册动画"/>
使用three.js做一个网页的相册动画
想了很久不知道有没有必要，但还是记录下来，以后说不定还会用的到，希望大家也有机会试试
就先做一个简单的页面，做一下动画，放一些图片吧，以后有新东西还是会加进来的
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=".ico">
</head>
<!-- 引入js文件 -->
<script src=".min.js"></script>
<script src=".js"></script>
<body><audio controls autoplay loop preload="auto" id="audio"><source src=".mp3" type="audio/mpeg">您的浏览器不支持播放音乐。</audio>
</body>
<style>* {margin: 0;padding: 0;box-sizing: border-box;border: 0;}body {background: #f6c8d3 url(".gif") no-repeat;background-size: 100vw 100vh;overflow: hidden;}#audio {display: none;}
</style>
</html>
2.接下来就是在body中开始写three.js
这块我先简单的用正方体，具体的模型请看three.js文档，里面有各种模型，可以直接替换，参数都差不多
<!-- 动画的js -->
<script>//我们把每一面要展示的图片放在这里(推荐线上地址呦)var imgpath = [".jpg",".jpg",".jpg",".jpg",".jpg",".jpg",]// 创建场景对象Scenevar scene = new THREE.Scene();// 创建一个立方体几何对象Geometryvar geometry = new THREE.BoxGeometry(50, 50, 50);// 设置材质数组var materialArr = [];// 纹理加载器var textureLoader = new THREE.TextureLoader()// 主要的图片都在这里imgpath.forEach((item, index) => {// 材质对象Materialvar material = new THREE.MeshPhongMaterial({opacity: 0.8,transparent: true,name: "material" + index,map: textureLoader.load(item)});materialArr.push(material)})//网格模型对象Meshvar 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积分下载一下
就是这样，下班！！！
更多推荐
使用three.js做一个网页的相册动画
发布评论