"use strict"; // 參考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// 喝水鳥建模作業
// 你的作業是完成喝水鳥的建模
// 藍圖與尺寸、位置可以在以下找到：
// https://web.archive.org/web/20210420094200/https://www.udacity.com/wiki/cs291/notes
//
// 材質應該是：
// 帽子與頸椎：cylinderMaterial（藍色）
// 頭與下半身：sphereMaterial（紅色）
// 身體其他部分：cubeMaterial（橘色）
//
// 作業完成時，喝水鳥樣子應該很酷
// 所有 SphereGeometry 呼叫應該如下：
//     SphereGeometry( radius, 32, 16 );
// 所有 CylinderGeometry 呼叫應該如下：
//     CylinderGeometry( radiusTop, radiusBottom, height, 32 );
////////////////////////////////////////////////////////////////////////////////

var camera, scene, renderer;
var cameraControls, effectController;
var clock = new THREE.Clock();
var gridX = false;
var gridY = false;
var gridZ = false;
var axes = false;
var ground = true;

function init() {
	var canvasWidth = window.innerWidth;
	var canvasHeight = window.innerHeight;
	var canvasRatio = canvasWidth / canvasHeight;

// RENDERER
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.gammaInput = true;
	renderer.gammaOutput = true;
	renderer.setSize(canvasWidth, canvasHeight);
	renderer.setClearColorHex( 0xAAAAAA, 1.0 );

// 攝影機
	camera = new THREE.PerspectiveCamera( 45, canvasRatio, 1, 40000 );

// 控制
	cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);

camera.position.set( -480, 659, -619 );
	cameraControls.target.set(4,301,92);

fillScene();
}

// 鳥的支撐框架－基底＋腳＋腳掌
function createSupport() {
	var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xF07020 } );
	// 基底
	var cube;
	cube = new THREE.Mesh(
		new THREE.CubeGeometry( 20+64+110, 4, 2*77 ), cubeMaterial );
	cube.position.x = -45;	// (20+32) - half of width (20+64+110)/2
	cube.position.y = 4/2;	// half of height
	cube.position.z = 0;	// centered at origin
	scene.add( cube );

// 左腳掌
	cube = new THREE.Mesh(
		new THREE.CubeGeometry( 20+64+110, 52, 6 ), cubeMaterial );
	cube.position.x = -45;	// (20+32) - half of width (20+64+110)/2
	cube.position.y = 52/2;	// half of height
	cube.position.z = 77 + 6/2;	// offset 77 + half of depth 6/2
	scene.add( cube );

// 左腳
	cube = new THREE.Mesh(
		new THREE.CubeGeometry( 64, 334+52, 6 ), cubeMaterial );
	cube.position.x = 0;	// centered on origin along X
	cube.position.y = (334+52)/2;
	cube.position.z = 77 + 6/2;	// offset 77 + half of depth 6/2
	scene.add( cube );

// 右腳掌

// 右腳

}

// 鳥的身體－連接身體到頭的部分
function createBody() {
	var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xA00000 } );
	var cylinderMaterial = new THREE.MeshLambertMaterial( { color: 0x0000D0 } );
}

// 鳥的頭－頭＋帽子
function createHead() {
	var sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xA00000 } );
	var cylinderMaterial = new THREE.MeshLambertMaterial( { color: 0x0000D0 } );
}

function createDrinkingBird() {
	// 建模
	// 基底＋腳＋腳掌
	createSupport();

// 身體＋連接身體到頭的部分
	createBody();

// 頭＋帽子
	createHead();
}

function fillScene() {
	// 場景
	scene = new THREE.Scene();
	scene.fog = new THREE.Fog( 0x808080, 3000, 6000 );

// 光源
	var ambientLight = new THREE.AmbientLight( 0x222222 );
	var light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
	light.position.set( 200, 400, 500 );

var light2 = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
	light2.position.set( -400, 200, -300 );

scene.add(ambientLight);
	scene.add(light);
	scene.add(light2);

if (ground) {
		Coordinates.drawGround({size:1000});
	}
	if (gridX) {
		Coordinates.drawGrid({size:1000,scale:0.01});
	}
	if (gridY) {
		Coordinates.drawGrid({size:1000,scale:0.01, orientation:"y"});
	}
	if (gridZ) {
		Coordinates.drawGrid({size:1000,scale:0.01, orientation:"z"});
	}
	if (axes) {
		Coordinates.drawAllAxes({axisLength:300,axisRadius:2,axisTess:50});
	}
	createDrinkingBird();
}

function addToDOM() {
	var container = document.getElementById('container');
	var canvas = container.getElementsByTagName('canvas');
	if (canvas.length>0) {
		container.removeChild(canvas[0]);
	}
	container.appendChild( renderer.domElement );
}

function animate() {
	window.requestAnimationFrame(animate);
	render();
}

function render() {
	var delta = clock.getDelta();
	cameraControls.update(delta);
	if ( effectController.newGridX !== gridX || effectController.newGridY !== gridY || effectController.newGridZ !== gridZ || effectController.newGround !== ground || effectController.newAxes !== axes)
	{
		gridX = effectController.newGridX;
		gridY = effectController.newGridY;
		gridZ = effectController.newGridZ;
		ground = effectController.newGround;
		axes = effectController.newAxes;

fillScene();
	}
	renderer.render(scene, camera);
}

function setupGui() {
	effectController = {
		newGridX: gridX,
		newGridY: gridY,
		newGridZ: gridZ,
		newGround: ground,
		newAxes: axes
	};

var gui = new dat.GUI();
	gui.add(effectController, "newGridX").name("顯示 XZ 格線");
	gui.add( effectController, "newGridY" ).name("顯示 YZ 格線");
	gui.add( effectController, "newGridZ" ).name("顯示 XY 格線");
	gui.add( effectController, "newGround" ).name("顯示地面");
	gui.add( effectController, "newAxes" ).name("顯示軸線");
}