<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/build/three.min.js"></script>
</head>
<body>
<script>
// 場景
var scene = new THREE.Scene();
// 透視相機
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 渲染器
var renderer = new THREE.WebGLRenderer();
// 設置渲染器的大小爲窗口的內寬度，也就是內容區的寬度
renderer.setSize(window.innerWidth, window.innerHeight);
//加載渲染器
document.body.appendChild(renderer.domElement);
//一個物體添加到場景
//創建一個長方體,用來定義物體的形狀
var geometry = new THREE.CubeGeometry(1, 1, 1);
//創建一個材質用來定義物體衍射
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
//使用形狀和材質來定義物體
var cube = new THREE.Mesh(geometry, material);
//加載物體到場景
scene.add(cube);
//設置相機的軸
camera.position.z = 5;
//渲染
function render() {
//requestAnimationFrame實時渲染：就是需要不停的對畫面進行渲染，即使畫面中什麼也沒有改變，也需要重新渲染。
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
//渲染相機和場景
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
