abernier/index.html

## index.html
<!DOCTYPE html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
  <style>
  html {-webkit-perspective:250;}
  body {width:100%; height:100%; position:relative;}
  body, body * {-webkit-transform-style:preserve-3d;}

  #ground {width:100%;height:100%; background:red url("http://dummyimage.com/600x400/000/fff"); backgroun-size:cover;}
  </style>
</head>
<body>

<div id="ground"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
<script>
var WW = $(window).width();
var WH = $(window).height();

var camera = new THREE.PerspectiveCamera(90, WW/WH, 0.001, 700);
camera.position.set(0, 10, 0);
camera.lookAt(WW/2, WH/2, 0);

camera.updateProjectionMatrix();
$('html').css('perspective', 'matrix3d('+camera.elements.join(',')+')');


</script>

</body>
</html>

<!--<script src="js/third-party/threejs/StereoEffect.js"></script> <script src="js/third-party/threejs/DeviceOrientationControls.js"></script> <script src="js/third-party/threejs/OrbitControls.js"></script>
<script>var camera, scene, renderer;var effect, controls;var element, container;
var clock = new THREE.Clock();
if (has.webgl) { init(); animate();} else { document.getElementById('demo').style.display = 'none';}
function init() { renderer = new THREE.WebGLRenderer(); element = renderer.domElement; container = document.getElementById('example'); container.appendChild(element);
effect = new THREE.StereoEffect(renderer);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(90, 1, 0.001, 700); camera.position.set(0, 10, 0); scene.add(camera);
controls = new THREE.OrbitControls(camera, element); controls.rotateUp(Math.PI / 4); controls.target.set( camera.position.x + 0.1, camera.position.y, camera.position.z ); controls.noZoom = true; controls.noPan = true;
function setOrientationControls(e) { if (!e.alpha) { return; }
controls = new THREE.DeviceOrientationControls(camera, true); controls.connect(); controls.update();
element.addEventListener('click', fullscreen, false);
window.removeEventListener('deviceorientation', setOrientationControls); } window.addEventListener('deviceorientation', setOrientationControls, true);

var light = new THREE.HemisphereLight(0x777777, 0x000000, 0.6); scene.add(light);
var texture = THREE.ImageUtils.loadTexture( 'textures/patterns/checker.png' ); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat = new THREE.Vector2(50, 50); texture.anisotropy = renderer.getMaxAnisotropy();
var material = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0xffffff, shininess: 20, shading: THREE.FlatShading, map: texture });
var geometry = new THREE.PlaneGeometry(1000, 1000);
var mesh = new THREE.Mesh(geometry, material); mesh.rotation.x = -Math.PI / 2; scene.add(mesh);
window.addEventListener('resize', resize, false); setTimeout(resize, 1);}
function resize() { var width = container.offsetWidth; var height = container.offsetHeight;
camera.aspect = width / height; camera.updateProjectionMatrix();
renderer.setSize(width, height); effect.setSize(width, height);}
function update(dt) { resize();
camera.updateProjectionMatrix();
controls.update(dt);}
function render(dt) { effect.render(scene, camera);}
function animate(t) { requestAnimationFrame(animate);
update(clock.getDelta()); render(clock.getDelta());}
function fullscreen() { if (container.requestFullscreen) { container.requestFullscreen(); } else if (container.msRequestFullscreen) { container.msRequestFullscreen(); } else if (container.mozRequestFullScreen) { container.mozRequestFullScreen(); } else if (container.webkitRequestFullscreen) { container.webkitRequestFullscreen(); }}</script>-->
	<!DOCTYPE html>
	<html class="no-js">
	<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
	<style>
	html {-webkit-perspective:250;}
	body {width:100%; height:100%; position:relative;}
	body, body * {-webkit-transform-style:preserve-3d;}

	#ground {width:100%;height:100%; background:red url("http://dummyimage.com/600x400/000/fff"); backgroun-size:cover;}
	</style>
	</head>
	<body>

	<div id="ground"></div>

	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
	<script>
	var WW = $(window).width();
	var WH = $(window).height();

	var camera = new THREE.PerspectiveCamera(90, WW/WH, 0.001, 700);
	camera.position.set(0, 10, 0);
	camera.lookAt(WW/2, WH/2, 0);

	camera.updateProjectionMatrix();
	$('html').css('perspective', 'matrix3d('+camera.elements.join(',')+')');


	</script>

	</body>
	</html>

	<!--<script src="js/third-party/threejs/StereoEffect.js"></script> <script src="js/third-party/threejs/DeviceOrientationControls.js"></script> <script src="js/third-party/threejs/OrbitControls.js"></script>
	<script>var camera, scene, renderer;var effect, controls;var element, container;
	var clock = new THREE.Clock();
	if (has.webgl) { init(); animate();} else { document.getElementById('demo').style.display = 'none';}
	function init() { renderer = new THREE.WebGLRenderer(); element = renderer.domElement; container = document.getElementById('example'); container.appendChild(element);
	effect = new THREE.StereoEffect(renderer);
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(90, 1, 0.001, 700); camera.position.set(0, 10, 0); scene.add(camera);
	controls = new THREE.OrbitControls(camera, element); controls.rotateUp(Math.PI / 4); controls.target.set( camera.position.x + 0.1, camera.position.y, camera.position.z ); controls.noZoom = true; controls.noPan = true;
	function setOrientationControls(e) { if (!e.alpha) { return; }
	controls = new THREE.DeviceOrientationControls(camera, true); controls.connect(); controls.update();
	element.addEventListener('click', fullscreen, false);
	window.removeEventListener('deviceorientation', setOrientationControls); } window.addEventListener('deviceorientation', setOrientationControls, true);

	var light = new THREE.HemisphereLight(0x777777, 0x000000, 0.6); scene.add(light);
	var texture = THREE.ImageUtils.loadTexture( 'textures/patterns/checker.png' ); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat = new THREE.Vector2(50, 50); texture.anisotropy = renderer.getMaxAnisotropy();
	var material = new THREE.MeshPhongMaterial({ color: 0xffffff, specular: 0xffffff, shininess: 20, shading: THREE.FlatShading, map: texture });
	var geometry = new THREE.PlaneGeometry(1000, 1000);
	var mesh = new THREE.Mesh(geometry, material); mesh.rotation.x = -Math.PI / 2; scene.add(mesh);
	window.addEventListener('resize', resize, false); setTimeout(resize, 1);}
	function resize() { var width = container.offsetWidth; var height = container.offsetHeight;
	camera.aspect = width / height; camera.updateProjectionMatrix();
	renderer.setSize(width, height); effect.setSize(width, height);}
	function update(dt) { resize();
	camera.updateProjectionMatrix();
	controls.update(dt);}
	function render(dt) { effect.render(scene, camera);}
	function animate(t) { requestAnimationFrame(animate);
	update(clock.getDelta()); render(clock.getDelta());}
	function fullscreen() { if (container.requestFullscreen) { container.requestFullscreen(); } else if (container.msRequestFullscreen) { container.msRequestFullscreen(); } else if (container.mozRequestFullScreen) { container.mozRequestFullScreen(); } else if (container.webkitRequestFullscreen) { container.webkitRequestFullscreen(); }}</script>-->
No results found