<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../js/three.js"></script>
</head>
<body onload="main()">
<script>
function initTHREE(){
width = window.innerWidth;
height = window.innerHeight;
renderer = new THREE.WebGLRenderer({
antialias:true //是否為抗鋸齒
});
renderer.setSize(width,height);
renderer.setClearColor(0xFFFFFF,1.0);
document.body.appendChild(renderer.domElement);
}
function initCamera(){
camera = new THREE.PerspectiveCamera(45,width/height,1,1000);
camera.position.z = 15;
camera.position.x = 3;//將相機的位置往右邊挪5個單位
}
function initScene(){
scene = new THREE.Scene();
}
function initGeometry(){
var geometry = new THREE.CubeGeometry(2,2,2);
var materail = new THREE.MeshBasicMaterial({color:0xff0000});
cube = new THREE.Mesh(geometry,materail);
//在網頁上顯示坐標系，其中坐標系的長度為6
var axisHelper =new THREE.AxisHelper(6);
/* scene.add(cube);*/ //-------
//將坐標系加入到場景中 |--->這個兩個注釋掉的主要原因是因為下面要演示將坐標系和我們的幾何體綁定的例子
/*scene.add(axisHelper);*/ //-------
var object = new THREE.Object3D();//聲明一個3d對象
object.add(axisHelper); //將坐標系加入到對象中
object.add(cube); //將幾何實體加入到對象中
//得到一個綁定了實體和坐標系的對象，然后將它加入到場景當中
scene.add(object);
}
function main(){
initTHREE();
initCamera();
initScene();
initGeometry();
render();
}
function render(){
requestAnimationFrame(render);
cube.rotation.y += 0.01;//0.01是弧度值
renderer.render(scene,camera);
}
</script>
</body>
</html>
