Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
69 lines (58 sloc) 2.06 KB
<html>
<head>
<title>Resizeable Canvas</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 75% }
</style>
</head>
<body>
<h1>Resizeable Canvas</h1>
<canvas id="canvas"></canvas>
<script src="js/three.min.js"></script>
<script>
function onResize(element, callback) {
var height = element.clientHeight;
var width = element.clientWidth;
return setInterval(function() {
if (element.clientHeight != height || element.clientWidth != width) {
height = element.clientHeight;
width = element.clientWidth;
callback();
}
}, 500);
}
</script>
<script>
var canvas = document.getElementById('canvas');
var renderer = new THREE.WebGLRenderer({canvas: canvas});
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
renderer.setViewport(0, 0, canvas.clientWidth, canvas.clientHeight);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, canvas.clientWidth/canvas.clientHeight, 0.1, 1000);
camera.position.z = 3;
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshPhongMaterial({ color: 0x1C4A8C });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
var light = new THREE.DirectionalLight(0xffffff, 0.55);
light.position.set(0, 0, 1);
scene.add(light);
onResize(canvas, function () {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
renderer.setViewport(0, 0, canvas.clientWidth, canvas.clientHeight);
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
});
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>