PierrotLL/fov_expriment.html

## fov_expriment.html
<html>
<body style="margin:0;padding:0">
<input type="range" id="slider" min="10" max="100" value="50" style="position:absolute; width:50%;"/>
<script src="http://threejs.org/build/three.min.js"></script>
<script>
var renderer, scene, camera;

main();

document.getElementById('slider').oninput = function(e) {
	setFOV(e.target.value);
}

function main() {
	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setClearColor( 0x9fd0e1, 1 );
	document.body.appendChild( renderer.domElement );

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 500 );
	camera.position.set( 0, 1, -500 );
	camera.lookAt(0, 1, 1);
	scene.add( camera );

	var floor = new THREE.Mesh(
		new THREE.PlaneGeometry( 1000, 1000 ),
		new THREE.MeshBasicMaterial( { map: floorTexture() } )
	);
	floor.rotateX( -Math.PI / 2 );
	scene.add( floor );

	var tree = new THREE.Mesh(
		new THREE.BoxGeometry( 1, 2, 1 ),
		new THREE.MeshBasicMaterial( { color: 0x0b4507 } )
	);
	tree.position.y = 1;
	for (var i = -500 ; i < 500 ; i += 20) {
		tree.position.z = i;
		tree = tree.clone();
		tree.position.x = 5;
		scene.add( tree );
		tree = tree.clone();
		tree.position.x = -5;
		scene.add( tree );
	}

	loop();
}

function floorTexture() {
	const ctx = document.createElement('canvas').getContext('2d');
	ctx.canvas.width = 1000;
	ctx.canvas.height = 1000;
	ctx.fillStyle = '#0f9131';
	ctx.fillRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
	ctx.fillStyle = '#505050';
	ctx.fillRect( (ctx.canvas.width - 4) / 2, 0, 4, ctx.canvas.height );
	for (var i = 0 ; i < ctx.canvas.height ; i += 10) {
		ctx.fillStyle = i % 20 ? '#f5f1f0' : '#991b12';
		ctx.fillRect( (ctx.canvas.width - 6) / 2    , i, 1, 10 );
		ctx.fillRect( (ctx.canvas.width - 6) / 2 + 5, i, 1, 10 );
	}
	var texture = new THREE.CanvasTexture( ctx.canvas );
	texture.magFilter = THREE.NearestFilter;
	texture.minFilter = THREE.NearestFilter;
	return texture;
}

function loop() {
	if (camera.position.z == 0) camera.position.z = -500;
	camera.position.z++;
	renderer.render( scene, camera );
	requestAnimationFrame(loop);
}

function setFOV(value) {
	camera.fov = value;
	camera.updateProjectionMatrix();
}
</script>
</body>
</html>
	<html>
	<body style="margin:0;padding:0">
	<input type="range" id="slider" min="10" max="100" value="50" style="position:absolute; width:50%;"/>
	<script src="http://threejs.org/build/three.min.js"></script>
	<script>
	var renderer, scene, camera;

	main();

	document.getElementById('slider').oninput = function(e) {
	setFOV(e.target.value);
	}

	function main() {
	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setClearColor( 0x9fd0e1, 1 );
	document.body.appendChild( renderer.domElement );

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 500 );
	camera.position.set( 0, 1, -500 );
	camera.lookAt(0, 1, 1);
	scene.add( camera );

	var floor = new THREE.Mesh(
	new THREE.PlaneGeometry( 1000, 1000 ),
	new THREE.MeshBasicMaterial( { map: floorTexture() } )
	);
	floor.rotateX( -Math.PI / 2 );
	scene.add( floor );

	var tree = new THREE.Mesh(
	new THREE.BoxGeometry( 1, 2, 1 ),
	new THREE.MeshBasicMaterial( { color: 0x0b4507 } )
	);
	tree.position.y = 1;
	for (var i = -500 ; i < 500 ; i += 20) {
	tree.position.z = i;
	tree = tree.clone();
	tree.position.x = 5;
	scene.add( tree );
	tree = tree.clone();
	tree.position.x = -5;
	scene.add( tree );
	}

	loop();
	}

	function floorTexture() {
	const ctx = document.createElement('canvas').getContext('2d');
	ctx.canvas.width = 1000;
	ctx.canvas.height = 1000;
	ctx.fillStyle = '#0f9131';
	ctx.fillRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
	ctx.fillStyle = '#505050';
	ctx.fillRect( (ctx.canvas.width - 4) / 2, 0, 4, ctx.canvas.height );
	for (var i = 0 ; i < ctx.canvas.height ; i += 10) {
	ctx.fillStyle = i % 20 ? '#f5f1f0' : '#991b12';
	ctx.fillRect( (ctx.canvas.width - 6) / 2 , i, 1, 10 );
	ctx.fillRect( (ctx.canvas.width - 6) / 2 + 5, i, 1, 10 );
	}
	var texture = new THREE.CanvasTexture( ctx.canvas );
	texture.magFilter = THREE.NearestFilter;
	texture.minFilter = THREE.NearestFilter;
	return texture;
	}

	function loop() {
	if (camera.position.z == 0) camera.position.z = -500;
	camera.position.z++;
	renderer.render( scene, camera );
	requestAnimationFrame(loop);
	}

	function setFOV(value) {
	camera.fov = value;
	camera.updateProjectionMatrix();
	}
	</script>
	</body>
	</html>