// 使用dat.GUI简化测试: 定义我们使用到的测试变量
var controls = new function() {
	this.rotationSpeed = 0.02;
	this.bouncingSpeed = 0.03;
};

var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 1);
gui.add(controls, 'bouncingSpeed', 0, 1);

// 添加场景
var scene = new THREE.Scene();
// 添加相机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 添加渲染器
var renderer = new THREE.WebGLRenderer();

// 设置场景的大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置场景的背景颜色 第一个参数是一个表示颜色的字符串或者16进制的数字
renderer.setClearColor(0x000000);

document.body.appendChild( renderer.domElement );
// 渲染器渲染我们的场景


// 新建坐标轴
var axes = new THREE.AxesHelper(20);
// 在场景中添加坐标轴
scene.add(axes);

/* 在设置了相机的位置之后才可以看到坐标轴 */

// 设置相机的x坐标位置
camera.position.x = -30;
// 设置相机的y坐标位置
camera.position.y = 40;
// 设置相机的z坐标的位置
camera.position.z = 30;
// 设置相机的焦点
camera.lookAt(scene.position);


//添加一个平面：
// 创建平面的骨架
var planeGeometry = new THREE.PlaneBufferGeometry(60, 30, 1, 1);
// 创建平面的材料
var planeMaterial = new THREE.MeshLambertMaterial({color: '#aaaaaa'});
// 合成平面
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// 设置平面的旋转角度
plane.rotation.x = -0.5 * Math.PI;
// 设置平面的位置
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
// 在场景中添加平面
scene.add(plane);


//添加一个立方体和一个球形：
// 创建立方体骨架
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
// 创建立方体材料
var cubeMaterial = new THREE.MeshLambertMaterial({color: 'yellow', wireframe: true});
// 合成立方体
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 设置立方体位置
cube.position.x = -8;
cube.position.y = 4;
cube.position.z = 0;
// 在场景中添加立方体
scene.add(cube);

// 创建并在场景中添加球体
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 'red', wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 10;
sphere.position.z = 0;
scene.add(sphere);


//在场景中添加灯光：
// 创建灯光
var spotLight = new THREE.SpotLight(0xffffff);
// 设置灯光位置
spotLight.position.set(-40, 60, -10);
// 在场景中添加灯光
scene.add(spotLight);



/* 设置渲染器允许阴影映射 */
renderer.shadowMap.enabled = true;

/* 设置哪些物体投射阴影，那些物体接受阴影 */
plane.receiveShadow = true;
cube.castShadow = true;
sphere.castShadow = true;
spotLight.castShadow = true;


//添加监测动画运行帧数的辅助库
var stats = new Stats();
document.body.appendChild( stats.dom );


var step = 0;
renderScene();

// 重复渲染场景
function renderScene() {
	// 更新
	stats.update();
	
	// 使用上面的变量替换我们的固定数据
    // 立方体的旋转
    cube.rotation.x += controls.rotationSpeed;
    cube.rotation.y += controls.rotationSpeed;
    cube.rotation.z += controls.rotationSpeed;
    // 球体的弹跳
    step += controls.bouncingSpeed;
    sphere.position.x = 20 + (10 * Math.cos(step));
    sphere.position.y = 0 + (10 * Math.sin(step));
		
	// 使用requestAnimationFrame代替setInterval
	requestAnimationFrame(renderScene);
	// 渲染场景
	renderer.render(scene, camera);
}