winwu · December 19, 2015 06:19
diff --git a/three003.html b/three003.html
 <!DOCTYPE HTML>
 <html lang="zh-TW">
 <head>
 <meta charset="UTF-8">
 <title>我的第一個three.js-003.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);
   
   //在建立立方體之前，需要一個CubeGeometry物件
   var geometry = new THREE.CubeGeometry(1,1,1);
   
   /*另外不管是立方體還是哪一種幾何型，
    *你應該不會只想畫一個單純的立方體吧..
    *所以three.js提供了各種材質和顏色，
    *接下來我們會使用到MeshBasicMaterial(番成白話就是"網格劃分基本材質")
    *為了先讓事情簡單一點，接下來會先用簡單的上色，裡面的數值，是hex colors
    */
  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00} );
   
   
   //接下來我們需要使用Msah這個物件(Object)，參數丟入你的geometry(幾何型)以及你的材料
   var cube = new THREE.Mesh( geometry, material );
   
   //最後就是把這個畫好的立方體，
   //丟到場景scene(scene.add())，預設情況下呢，立方體會被擺到座標(0,0,0)
   scene.add(cube); //scene在第13行已經宣告好了
   
   //截至目前為只為有一個問題，就是立方體的位子跟相機所看到的畫面對不起來
   //但是你在畫面，並不會有感覺
   //解決的方法就是移一下相機的位置
   
   camera.position.z = 5;

   
   //以上，畫面上都還不會有東西，因為...我們沒有渲染場景，別忘了renderer
   function render(){
      requestAnimationFrame(render);
      renderer.render(scene, camera);
   }
   render();
   
   //嗯，到這裡，使用瀏覽器瀏覽，確定會有東西了，
   //不過他不會動...，接下來004.html，讓你知道他是怎麼動的
  </script>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html lang="zh-TW">
	<head>
	<meta charset="UTF-8">
	<title>我的第一個three.js-003.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);

	//在建立立方體之前，需要一個CubeGeometry物件
	var geometry = new THREE.CubeGeometry(1,1,1);

	/*另外不管是立方體還是哪一種幾何型，
	*你應該不會只想畫一個單純的立方體吧..
	*所以three.js提供了各種材質和顏色，
	*接下來我們會使用到MeshBasicMaterial(番成白話就是"網格劃分基本材質")
	*為了先讓事情簡單一點，接下來會先用簡單的上色，裡面的數值，是hex colors
	*/
	var material = new THREE.MeshBasicMaterial( { color: 0x00ff00} );


	//接下來我們需要使用Msah這個物件(Object)，參數丟入你的geometry(幾何型)以及你的材料
	var cube = new THREE.Mesh( geometry, material );

	//最後就是把這個畫好的立方體，
	//丟到場景scene(scene.add())，預設情況下呢，立方體會被擺到座標(0,0,0)
	scene.add(cube); //scene在第13行已經宣告好了

	//截至目前為只為有一個問題，就是立方體的位子跟相機所看到的畫面對不起來
	//但是你在畫面，並不會有感覺
	//解決的方法就是移一下相機的位置

	camera.position.z = 5;


	//以上，畫面上都還不會有東西，因為...我們沒有渲染場景，別忘了renderer
	function render(){
	requestAnimationFrame(render);
	renderer.render(scene, camera);
	}
	render();

	//嗯，到這裡，使用瀏覽器瀏覽，確定會有東西了，
	//不過他不會動...，接下來004.html，讓你知道他是怎麼動的
	</script>
	</body>
	</html>