基于three.js怎么实现简易照片墙效果
短信预约 -IT技能 免费直播动态提醒
本篇内容主要讲解“基于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 class="lazy" data-src="js/jquery-3.1.1.min.js"></script> <script class="lazy" data-src="js/jquery.mousewheel.min.js"></script> <SCRIPT class="lazy" data-src="js/three.min.js"></SCRIPT> <SCRIPT class="lazy" data-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.class="lazy" data-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>效果图如下：
到此，相信大家对“基于three.js怎么实现简易照片墙效果”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
