resizing

Demonstrates support for window resizing without restarting the application.

1-2-three
example 25: resizing

<!DOCTYPE html>
<html>
<head>
<title>example 25: resizing</title>
<script type="text/javascript" src="js/three/three.js"></script>
<script type="text/javascript" src="js/three/examples/js/controls/FlyControls.js"></script>
<script src="js/mixer.js"></script>
<script type="text/javascript">

function init() {  
  Mixer.init(10);
  var snd = MediaLoader.loadSound("alarm","sounds/129464__robinhood76__02832-heavy-alarm.wav");
	var chan = Mixer.play(snd,0.0,true);

var mycanvas = document.getElementsByTagName("canvas")[0];
  var w = mycanvas.clientWidth;
  var h = mycanvas.clientHeight;

var renderer = new THREE.WebGLRenderer({canvas:mycanvas});
  renderer.setSize( w, h );
  renderer.setClearColor( new THREE.Color(0xeeeeee), 1 );

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(
      15,     // Field of view
      w / h,  // Aspect ratio
      0.1,    // Near
      10000   // Far
  );
  scene.add(camera);
  
  // Camera looks toward negative z with y up
  camera.position.set( 5, 5, 100 );
  
  var control = new THREE.FlyControls(camera,mycanvas);
  control.dragToLook = true;
  control.movementSpeed = 0.05;
  control.rollSpeed = 0.0005;

var cube = new THREE.Mesh(
      new THREE.CubeGeometry( 5, 5, 5 ),
      new THREE.MeshLambertMaterial( { color: 0xFF0000 } )
  );
  scene.add( cube );

window.onload = init;
</script>
</head>
<body><canvas style="width:100%;height:95%;border:1px gray solid;"></body>
</html>

resizing

1-2-threeexample 25: resizing

1-2-three
example 25: resizing