Skip to content

Instantly share code, notes, and snippets.

@davedx

davedx/gist:10102954

Created April 8, 2014 08:58
Show Gist options
  • Save davedx/10102954 to your computer and use it in GitHub Desktop.
Save davedx/10102954 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!doctype html>
<html>
<head>
<style type="text/css">
html {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: black;
}
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-family: Helvetica, sans-serif;
background-color: #444;
overflow: hidden;
-webkit-perspective: 0;
perspective: 0;
-webkit-transform: translateZ(-999999px);
}
.surface {
position: absolute;
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#fight_club {
background-image: url('http://ia.media-imdb.com/images/M/MV5BMjIwNTYzMzE1M15BMl5BanBnXkFtZTcwOTE5Mzg3OA@@._V1_SX214_.jpg');
}
#dances_with_wolves {
background-image: url('http://ia.media-imdb.com/images/M/MV5BMTY3OTI5NDczN15BMl5BanBnXkFtZTcwNDA0NDY3Mw@@._V1_SX214_.jpg');
}
#enemy_at_the_gates {
background-image: url('http://ia.media-imdb.com/images/M/MV5BMjAyMDMwNzA2OV5BMl5BanBnXkFtZTgwNTIxNzQxMTE@._V1_SX214_.jpg');
}
#rocky {
background-image: url('http://ia.media-imdb.com/images/M/MV5BMTMyOTYzMDMzMF5BMl5BanBnXkFtZTcwMTkzODM1NA@@._V1_SX214_.jpg');
}
#kill_bill {
background-image: url('http://ia.media-imdb.com/images/M/MV5BMTU1NDg1Mzg4M15BMl5BanBnXkFtZTYwMDExOTc3._V1_SX214_.jpg');
}
#team_america {
background-image: url('http://ia.media-imdb.com/images/M/MV5BMTM2Nzc4NjYxMV5BMl5BanBnXkFtZTcwNTM1MTcyMQ@@._V1_SY317_CR6,0,214,317_.jpg');
}
.poster {
width: 214px;
height: 320px;
}
#frame {
width: 1280px;
height: 340px;
background: #000;
overflow: hidden;
}
#stats { position: absolute; top:0; left: 0 }
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.js"></script>
<script src="stats.min.js"></script>
<script>
var camera, scene, renderer;
var geometry, material, mesh, stats;
var width = 1280;
var height = 340;
window.onload = function() {
stats = new Stats();
init();
animate();
document.body.appendChild( stats.domElement );
};
var makeBox = function(index, url) {
geometry = new THREE.BoxGeometry( 214, 318, 1 );
//material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture(url) } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = (110 + index * 220) - width/2;
return mesh;
};
function init() {
camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
//camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.add( makeBox(0, 'http://ia.media-imdb.com/images/M/MV5BMjIwNTYzMzE1M15BMl5BanBnXkFtZTcwOTE5Mzg3OA@@._V1_SX214_.jpg'));
scene.add( makeBox(1, 'http://ia.media-imdb.com/images/M/MV5BMTY3OTI5NDczN15BMl5BanBnXkFtZTcwNDA0NDY3Mw@@._V1_SX214_.jpg'));
scene.add( makeBox(2, 'http://ia.media-imdb.com/images/M/MV5BMjAyMDMwNzA2OV5BMl5BanBnXkFtZTgwNTIxNzQxMTE@._V1_SX214_.jpg'));
scene.add( makeBox(3, 'http://ia.media-imdb.com/images/M/MV5BMTMyOTYzMDMzMF5BMl5BanBnXkFtZTcwMTkzODM1NA@@._V1_SX214_.jpg'));
scene.add( makeBox(4, 'http://ia.media-imdb.com/images/M/MV5BMTU1NDg1Mzg4M15BMl5BanBnXkFtZTYwMDExOTc3._V1_SX214_.jpg'));
scene.add( makeBox(5, 'http://ia.media-imdb.com/images/M/MV5BMTM2Nzc4NjYxMV5BMl5BanBnXkFtZTcwNTM1MTcyMQ@@._V1_SY317_CR6,0,214,317_.jpg'));
renderer = new THREE.CanvasRenderer();
renderer.setSize( width, height );
document.body.appendChild( renderer.domElement );
console.log(scene.children);
}
function animate() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame( animate );
//mesh.position.x += 1;
var dx = 1;
for(var i=0; i<scene.children.length; i++) {
var m = scene.children[i];
m.position.x = (m.position.x + dx);
if(m.position.x-110 > width/2)
m.position.x = (-width/2)-110;
}
renderer.render( scene, camera );
stats.update();
}
</script>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment