<!DOCTYPE HTML>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>我的第一個three.js-004.html</title>
<style>
canvas{width:100%; height:100%}
</style>
</head>
<body>
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<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;
//004.html的目的是要讓立方體動起來
//修正我們的render的function
function render(){
//cube.rotation這兩句代表著，每秒讓立方體旋轉60次
requestAnimationFrame(render);
cube.rotation.x +=0.1;
//cube.rotation.y +=0.1;
renderer.render(scene, camera);
}
render();
//這樣就完成了，打開瀏覽器看一下吧(請記得找個..有支援webgl的瀏覽器XD)
</script>
</body>
</html>