一些平鋪直敘技術相關文: 只學一天的three.js(一)

2013年7月2日星期二

只學一天的three.js(一)

今天剛好有點時間，簡單研究了一下three.js
白話一點就是他是一個可以做出3D效果的JavaScript

那麼廢話不多說就直接開始了
下面的範例幾乎是從

http://threejs.org/docs/58/#Manual/Introduction/Creating_a_scene

官網參考過來的，想看英文的話就不用往下看了，因為我寫的感覺有點類似在英翻中。

以下是001的範例:

	<!DOCTYPE HTML>
	<html lang="zh-TW">
	<head>
	<meta charset="UTF-8">
	<title>我的第一個three.js</title>
	<style>
	canvas{width:100%; height:100%}
	</style>
	</head>
	<body>
	<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
	<script>
	/*
	*在這裡，就是我們要使用three.js的地方
	*please refer: http://threejs.org/docs/58/#Manual/Introduction/Creating_a_scene
	*/
	</script>
	</body>
	</html>

view raw three001.html hosted with ❤ by GitHub

簡單說明一下001.html所做的事情:
匯入three.js
另外要做的事情，就是準備一個場景(scene)
這就好比說，你要讓一個上台表演，你必須給他一個舞台
而以這個範例來說，舞台就是canvas
如果001沒有問題的話，接著繼續看002.html

以下是002的範例:

	<!DOCTYPE HTML>
	<html lang="zh-TW">
	<head>
	<meta charset="UTF-8">
	<title>我的第一個three.js-002.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>
	/*
	*(1)
	*在我們開始使用three.js之前，有個觀念，要大家先知道的
	*有三個必備的元素:
	* (A)就是001.html所提及的，我們需要一個場景(scene)
	* (B)一台相機(camera)
	* (C)一個渲染器(renderer)，這個渲染器可以將相機拍的東西顯示在場景(scene)上
	*/
	//以下範例是模仿three.org網站的Manual，可同時參考 http://threejs.org/docs/58/#Manual/Introduction/Creating_a_scene

	//首先讓我們用three.js實例化一個場景(scene)
	var scene = new THREE.Scene();

	//接著實例化一台相機，暫且先不解釋ProspectiveCamera的args
	//ProspectiveCamera(視野的大小fov, 寬高的比例aspect,相機離視體最近的距離near ,相機離視體最遠的距離far );
	//http://www.html5china.com/HTML5features/WebGL/20120509_3611.html
	var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

	//實例化渲染器
	var renderer = new THREE.WebGLRenderer();

	//渲染器設定大小
	renderer.setSize( window.innerWidth, window.innerHeight );

	//將渲染器插入到body標籤裡
	document.body.appendChild ( renderer.domElement);

	//設定完成，003.html，會開始實做在畫面上畫一個cube(立方體)!

	</script>
	</body>
	</html>

view raw three002.html hosted with ❤ by GitHub

002.html的說明都在文件裡，002.html其實就是001的加強版
如果002沒有問題的話，接著繼續看003.html

以下是003的範例:

	<!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>

view raw three003.html hosted with ❤ by GitHub

以下是004的範例:

	<!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>

view raw three004.html hosted with ❤ by GitHub

我原本是想要用codepen跑出效果放到這邊，不過好像沒有成功，可以跑跑看004.html，就會有個綠色方體正在旋轉!

沒有留言:

張貼留言

若你看的文章，時間太久遠的問題就別問了，因為我應該也忘了... XD

一些平鋪直敘技術相關文

2013年7月2日星期二

只學一天的three.js(一)

沒有留言:

張貼留言

Vue multiselect set autofocus and tinymce set autofocus

關於我自己

2013年7月2日 星期二

只學一天的three.js(一)

沒有留言:

張貼留言

Vue multiselect set autofocus and tinymce set autofocus

2013年7月2日星期二