jyuko/mirage.html

## mirage.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Mirage Sample</title>
  <meta charset="utf-8">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <style>
    canvas {
      padding-left: 76px; /* 端末に合わせて調整 */
    }
    body {
      background-color: #000;
    }
  </style>
  <script src="three.js-master/build/three.min.js"></script>
  <script src="three.js-master/examples/js/effects/StereoEffect.js"></script>

  <link rel="manifest" href="manifest.json">
</head>
<body>
<script>
  var camera, scene, renderer;
  var geometry, material, mesh;

  init();
  animate();

  function init() {
    var width = 630; //端末に合わせて調整
    var height = 275; //端末に合わせて調整
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( width, height );
    document.body.appendChild( renderer.domElement );

    camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
    scene = new THREE.Scene();
    geometry = new THREE.BoxGeometry( 0.4, 0.4, 0.4 );
    material = new THREE.MeshNormalMaterial();
    mesh = new THREE.Mesh( geometry, material );
    mesh.position.set( 0, 0, -1 );
    scene.add( mesh );

    effect = new THREE.StereoEffect(renderer);
    effect.setEyeSeparation(0.5);
  }

  function animate() {
    requestAnimationFrame( animate );
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    effect.render( scene, camera );
  }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<title>Mirage Sample</title>
	<meta charset="utf-8">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<style>
	canvas {
	padding-left: 76px; /* 端末に合わせて調整 */
	}
	body {
	background-color: #000;
	}
	</style>
	<script src="three.js-master/build/three.min.js"></script>
	<script src="three.js-master/examples/js/effects/StereoEffect.js"></script>

	<link rel="manifest" href="manifest.json">
	</head>
	<body>
	<script>
	var camera, scene, renderer;
	var geometry, material, mesh;

	init();
	animate();

	function init() {
	var width = 630; //端末に合わせて調整
	var height = 275; //端末に合わせて調整
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( width, height );
	document.body.appendChild( renderer.domElement );

	camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
	scene = new THREE.Scene();
	geometry = new THREE.BoxGeometry( 0.4, 0.4, 0.4 );
	material = new THREE.MeshNormalMaterial();
	mesh = new THREE.Mesh( geometry, material );
	mesh.position.set( 0, 0, -1 );
	scene.add( mesh );

	effect = new THREE.StereoEffect(renderer);
	effect.setEyeSeparation(0.5);
	}

	function animate() {
	requestAnimationFrame( animate );
	mesh.rotation.x += 0.01;
	mesh.rotation.y += 0.02;
	effect.render( scene, camera );
	}
	</script>
	</body>
	</html>