How to realize simple Photo Wall effect based on three.js
This article mainly explains "how to achieve simple photo wall effect based on three.js". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to achieve simple photo wall effect based on three.js"!
Code:
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;} 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++;}
The effect picture is as follows:
At this point, I believe you have a deeper understanding of "how to achieve simple photo wall effect based on three.js". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
