<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="../libs/three.js"></script>
<script type="text/javascript" src="../libs/stats.js"></script>
<script type="text/javascript" src="../libs/dat.gui.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 用于显示统计图形 -->
<div id="Stats-output">
</div>
<!-- 作为Three.js渲染器输出元素 -->
<div id="WebGL-output">
</div>
<script type="text/javascript">
//网页加载完毕后会被调用
function init() {
////初始化统计对象
var stats = initStats();
//创建一个场景（场景是一个容器，用于保存、跟踪所要渲染的物体和使用的光源）
var scene = new THREE.Scene();
//创建一个摄像机对象（摄像机决定了能够在场景里看到什么）
var camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 40;
camera.position.y = 20;
camera.position.z = 60;
camera.lookAt(scene.position);
//创建一个WebGL渲染器并设置其大小
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE));
renderer.setSize(window.innerWidth, window.innerHeight);
//创建一个平面
var planeGeometry = new THREE.PlaneGeometry(50, 50);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
//设置平面的旋转角度和位置
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
//将平面添加场景中
scene.add(plane);
//在平面上方添加一个个小方块
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
for (var j = 0; j < (planeGeometry.parameters.height / 5); j++) {
for (var i = 0; i < planeGeometry.parameters.width / 5; i++) {
var rnd = Math.random() * 0.75 + 0.25;
var cubeMaterial = new THREE.MeshLambertMaterial();
cubeMaterial.color = new THREE.Color(rnd, 0, 0);
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5);
cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5);
cube.position.y = 2;
scene.add(cube);
}
}
//添加环境光
var ambientLight = new THREE.AmbientLight(0x292929);
scene.add(ambientLight);
//添加平行光
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
directionalLight.position.set(-20, 40, 60);
scene.add(directionalLight);
//将渲染的结果输出到指定页面元素中
document.getElementById("WebGL-output").appendChild(renderer.domElement);
//dat.GUI对象使用的配置（存放有所有需要改变的属性的对象）
var controls = new function () {
//当前使用的摄像机类型
this.perspective = "Perspective";
//切换摄像机
this.switchCamera = function () {
if (camera instanceof THREE.PerspectiveCamera) {
//切换成正交投影摄像机
camera = new THREE.OrthographicCamera(window.innerWidth / -16,
window.innerWidth / 16, window.innerHeight / 16,
window.innerHeight / -16, -200, 500);
camera.position.x = 40;
camera.position.y = 20;
camera.position.z = 60;
camera.lookAt(scene.position);
this.perspective = "Orthographic";
} else {
//切换成透视投影摄像机
camera = new THREE.PerspectiveCamera(45,
window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 40;
camera.position.y = 20;
camera.position.z = 60;
camera.lookAt(scene.position);
this.perspective = "Perspective";
}
};
};
//创建dat.GUI，传递并设置属性
var gui = new dat.GUI();
gui.add(controls, 'switchCamera').name("切换摄像机");
gui.add(controls, 'perspective').listen();
//渲染场景
render();
//渲染场景
function render() {
stats.update();
//通过requestAnimationFrame方法在特定时间间隔重新渲染场景
requestAnimationFrame(render);
//渲染场景
renderer.render(scene, camera);
}
//初始化统计对象
function initStats() {
var stats = new Stats();
//设置统计模式
stats.setMode(0); // 0: fps, 1: ms
//统计信息显示在左上角
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
//将统计对象添加到对应的<div>元素中
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
}
//确保init方法在网页加载完毕后被调用
window.onload = init
</script>
</body>
</html>
