基于three.js实现简易照片墙效果
学习three.js的过程中，写的一个简易照片墙，可以使用鼠标滚轮上下浏览，采用的是移动相机的方式。
代码贴出来，供学习这一块的朋友们参考和指导：
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META charset="utf-8">
<META name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<TITLE></TITLE>
<STYLE>
html, body {
height: 100%;
}
body {
background-color: #454545;
margin: 0;
overflow: hidden;
background-size:cover;
}
.element {
width: 240px;
height: 320px;
}
.element img {
position: absolute;
border:none;
}
</STYLE>
</HEAD>
<BODY>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<SCRIPT src="js/three.min.js"></SCRIPT>
<SCRIPT src="js/CSS3DRenderer.js"></SCRIPT>
<DIV id="container"></DIV>
<DIV id="menu">
<SCRIPT>
var table = [];
var camera, scene, renderer;
createImages();
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 3000;
camera.lookAt({
x : 0,
y : 0,
z : 0
});
scene = new THREE.Scene();
for ( var i = 0; i < table.length ; i ++ ) {
var element = document.createElement( 'div' );
element.className = 'element';
element.id = 'element';
var photo = document.createElement('img');
photo.className = 'photo';
photo.id = table[ i ][0];
photo.src='images/'+table[ i ][0]+'?t='+Math.floor((Math.random()*100)+1);
element.appendChild( photo );
var objectCSS = new THREE.CSS3DObject( element );
objectCSS.position.x = ( table[ i ] [1] * 250 ) - 1750;
objectCSS.position.y = - ( table[ i ] [2]* 330 ) + 1200;
objectCSS.position.z = 0;
scene.add( objectCSS );
}
renderer = new THREE.CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.domElement.style.position = 'absolute';
document.getElementById( 'container' ).appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
$(window).mousewheel(function(event) {
camera.position.y -= event.deltaY * event.deltaFactor;
camera.position.z = 3000;
var target = new THREE.Vector3();
var _eye = new THREE.Vector3();
_eye.subVectors( camera.position, target );
camera.position.addVectors( target, _eye );
camera.lookAt( _eye );
});
function createImages (){
var files = [
{"name":"0.jpg"},
{"name":"1.jpg"},
{"name":"2.jpg"}
];
var row =1;
var col = 1;
for(var i = 0; i < files.length;i++)
{
var file = [];
file[0] = files[i]['name'];
file[1] = col++;
file[2] = row;
table[i] = file;
if(col > 13)
{
col = 1;
row++;
}
}
}
</SCRIPT>
</DIV>
</BODY>
</HTML>
效果图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现超酷的照片墙展示效果图附源码下载
这是一个超酷的照片墙展示效果,很多照片结合淡入淡出.旋转.缩放.倾斜及3D效果,照片快速从左侧切入,做旋转3D效果,最后在照片墙上整齐排列,为用户展示了超酷的照片墙展示效果. 查看演示 下载源码 HTML 本文结合实例给大家分享超酷的照片墙效果,该效果依赖jQuery和easing插件,因此首先载入这两个文件. <script src="jquery.min.js"></script> <script src="jquery.easing.1.3
-
javascript制作照片墙及制作过程中出现的问题
本文主要做了一个照片墙,整个制作过程,主要需要解决一下几个问题: 1.如何进行布局转换? 2.如何对图片进行拖拽处理? 3.如何检测图片碰撞问题?进行碰撞检测 4.当多个图片进行碰撞,如何取其中距离对象最小的物体? 5.如何将相互碰撞的两个物体的位置相互交换?涉及到运动的类库 代码如下: <html> <head> <style> body{background:black;margin: 0;padding: 0;color: white;font-size: 50p
-
js实现3D照片墙效果
聊一下心得:CSS写得好,真的可以省很多js代码哈,写起来也简单很多,所以要好好掌握js哈,所以这里也提供了css代码,如果您觉得您的css写得不错,可以直接看js代码哦 效果: 1.点击Start View进入照片墙 2.只有一张图片是在中间显示,其他图片在中间的图片两侧随机排序,并且随机旋转一定的角度,层级也是随机的哦 3.点击上面的导航条,可以让对应的图片在中间显示 4.点击中间的图片该照片翻转,显示背面(照片的描述信息) 实现过程: 1.用数据生成结构(模拟的数据,此处不再提供) 2.对
-
javascript实现了照片拖拽点击置顶的照片墙代码
演示图 styles.css *{ /*清空所有元素默认的外边距和内边距*/ } .photo_wall{ background:url(bg.jpg); /*定义照片墙的默认背景*/ background-size:cover; /*使照片墙的背景填充照片墙*/ width:1200px; /*设置照片墙的宽高*/ height:500px; margin:40px auto; /*设置照片墙的外边距*/ display:-webkit-box; /*使用CSS3的盒模型之流式布局*/ dis
-
js实现照片墙功能实例
本文实例讲述了js实现照片墙功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8">
-
原生js实现照片墙效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-
-
原生JS实现拖拽照片墙
本文实例为大家分享了一个用原生JS实现的可拖拽照片墙,效果如下: 实现代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现拖拽照片墙,实现照片互换位置</title> <style> * { marg
-
基于three.js实现简易照片墙效果
学习three.js的过程中,写的一个简易照片墙,可以使用鼠标滚轮上下浏览,采用的是移动相机的方式. 代码贴出来,供学习这一块的朋友们参考和指导: <!DOCTYPE HTML> <HTML> <HEAD> <META charset="utf-8"> <META name="viewport" content="width=device-width, user-scalable=no
-
JS模拟简易滚动条效果代码(附demo源码)
本文实例讲述了JS模拟简易滚动条效果的方法.分享给大家供大家参考,具体如下: 使用Js模拟滚动条.简易模式,类似手机上常见的滚动条. 效果如下: Js代码如下: var scrollMoveObj = null, scrollPageY = 0, scrollY = 0; var scrollDivList = new Array(); // obj需要添加滚动条的对象 w滚动条宽度 className滚动条样式名称 // obj元素 必须指定高度,并设置overflow:hidden; //
-
JS实现简易日历效果
本文实例为大家分享了JS实现简易日历效果的具体代码,供大家参考,具体内容如下 css * { margin: 0; padding: 0; list-style: none; } #box { width: 280px; height: 360px; margin: 50px auto; background-color: black; color: aliceblue; line-height: 40px; } #header { height: 40px; color: aliceblue;
-
基于Vue.js实现tab滑块效果
本文实例为大家分享了Vue.js实现tab滑块效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met
-
基于Turn.js 实现翻书效果实例解析
最近项目经理我个项目练练手,其项目需求是要实现翻书效果,看到这个需求后,我真是懵了,这咋整,我可是java出身的啊,这个问题真是难住我了,后来有同事的指导,之前他曾经做过PC版的翻书效果,当时使用的是Turn.js ,查过其相关API后,整个人突然豁然开朗呀,使用Turn.js 完全可以解决当前我接手这个项目的所有需求呀.下面小编把我的学习心得分享给大家,大家可以参考下 Turn.js的官方网址: http://www.turnjs.com/ 下面是我这个项目上线后的效果: 看过实际项目后,各位
-
基于vue.js组件实现分页效果
前言 为了练习vue.js 之前做了一个vue.js前端分页效果,后面看到vue.js组件内容,就试着把这个功能写成一个简单组件,向组件元素传递一个object参数,包含分页数据,显示的列名信息,分页信息,组件提供一个事件,传递给父元素一个分页信息,父元素拿着分页信息获取数据,修改之前的object.这样就实现了分页效果. 效果 知识点 components 组件 props 父级向组件传参 template 模板 computed 计算属性 $emit() 组件事件,组件先父级元素传参 htm
-
基于JS实现翻书效果的页面切换样式
本文给大家分享一段代码,基于js代码实现的翻书效果的页面切换样式,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <
-
原生Js实现简易烟花爆炸效果的方法
本文实例讲述了原生Js实现简易烟花爆炸效果的方法.分享给大家供大家参考.具体分析如下: 实现原理: 在一定范围内,随机生成一些div,形成烟花效果 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js烟花效果</title> <script type="text/javascript"> d
-
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
本文实例讲述了JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果.分享给大家供大家参考,具体如下: 基于Sketch.js,实现了物体触碰检测(蝌蚪会遇到障碍物以及聪明的躲避鼠标的点击),随机运动,聚集算法等. 已经具备了游戏的基本要素,扩展一下可以变成一个不错的 HTML5 游戏. 演示效果如下: 完整代码如下: <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-