"use strict"; // 參考 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
////////////////////////////////////////////////////////////////////////////////
// 修正錯誤 JavaScript 練習
////////////////////////////////////////////////////////////////////////////////
// 你的作業是修正 Javacript 文法錯誤
// 直到畫面出現一個金色方形！
// Internet Explorer 不支援 WebGL
// 這裡有 3 個文法錯誤
////////////////////////////////////////////////////////////////////////////////

var camera, scene, renderer;
var windowScale;
var cameraControls;
var clock = new THREE.Clock();

function drawGoldCube() {

var cube;
	var cubeSizeLength = 100;
	var goldColor = "#FFDF00";
	var showFrame = true;
	var wireMaterial = new THREE.MeshBasicMaterial( { color: goldColor, wireframe: showFrame } ) ;

var cubeGeometry = new THREE.CubeGeometry(cubeSizeLength, cubeSizeLength, cubeSizeLength);

cube = new THREE.Mesh( cubeGeometry, wireMaterial );
	cube.position.x = 0;	// 中心設於原點
	cube.position.y = 0;	// 中心設於原點
	cube.position.z = 0;	// 中心設於原點
	scene.add( cube ;

}

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

// 場景
	scene = new THREE.Scene();
	scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );

// 光照
	scene.add( new THREE.AmbientLight( 0x222222 ) );

// RENDERER
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.gammaInput = true;
	renderer.gammaOutput = true;
	renderer.setSize(canvasWidth, canvasHeight);
	renderer.setClearColor( scene.fog.color, 1 );

var container = document.getElementById('container');
	container.appendChild( renderer.domElement );

// 攝影機
	camera = new THREE.PerspectiveCamera( 45, canvasRatio, 1, 4000 );
	camera.position.set( -200, 200, -150 );

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

/ 繪製坐標系格線
	Coordinates.drawGrid({size:1000,scale:0.01});
	Coordinates.drawGrid(size:1000,scale:0.01, orientation:"y"});
	Coordinates.drawGrid({size:1000,scale:0.01, orientation:"z"});
}

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

function render() {
	var delta = clock.getDelta();
	cameraControls.update(delta);
	renderer.render(scene, camera);
}

document.addEventListener("DOMContentLoaded", function () {
	init();
	drawGoldCube();
	animate();
})