日期:2014-05-16  浏览次数:20338 次

three.js鏂囨。缈昏瘧-----绗竴绡?鍦烘櫙scene

鏈汉鑻辫姘村钩鏈夐檺锛屽彧闄愪釜浜哄叴瓒g埍濂界炕璇戞鏂囨。锛屾杩庡悇浣嶇綉鍙嬫媿鐮栧拰鎸囩偣锛屾湰缈昏瘧鏈粡闆曠悽锛屼粎鍑劅瑙夊紕鍑虹涓€绋匡紝鍙互鑲畾杩欎笉浼氭槸绗竴绋匡紝濡傞渶浜嗚Вthree.js鐨凥TML5 3D绫诲簱鐨勮祫鏂欐枃妗o紝澶у鍙互鍒癵it鍘讳笅杞斤紝鍦板潃鏄?a style="font-size: 12px; line-height: 1.5;" href="https://github.com/mrdoob/three.js">https://github.com/mrdoob/three.js

1.鍒涘缓涓€涓満鏅紙scene锛?/span>

鏈妭鐨勭洰鐨勬槸涓轰簡缁橳hree.js绠€瑕佷粙缁嶃€傛垜浠皢寤轰竴涓棆杞珛鏂逛綋鐨勫満鏅€傚鏋滀綘琚繕涓嶆槑鐧斤紝鎴戜滑灏嗘彁渚涗簡涓€涓殑渚嬪瓙浠ヤ緵浣犲弬鑰冿紱

Three.js鏄粈涔堬紵

濡傛灉浣犳鍦ㄨ杩欑瘒鏂囩珷锛屼及璁′綘涔嬪墠瀵筎hree.js鏈変竴浜涗簡瑙h繕鏈夊畠鑳藉府鍔╀綘鍋氫簺浠€涔堬紝浣嗚繕鏄鎴戜滑绠€鍗曚粙缁嶄竴涓嬪畠銆?/p>

Three.js鏄竴涓簱锛屼娇寰梂ebGL-3D鍦ㄦ祻瑙堝櫒涓睍绀洪潪甯稿鏄撱€備妇涓緥瀛愶紝鎴戜滑浣跨敤鍘熺敓鎬佺殑WebGL璇硶鏉ユ弿杩颁竴涓珛鏂逛綋锛屾垜浠渶瑕佸啓鍑犵櫨琛孞avascript鍜岀潃鑹插櫒浠g爜锛屼絾鏄鏋滅敤

three.js鐨勮瘽锛屾垜浠彧闇€瑕佸緢灏忛儴鍒嗗氨鍙互杈惧埌杩欑鏁堟灉锛屽洜涓鸿繖涓被搴撳凡缁忓府浣犲皝瑁呭ソ浜嗗嚱鏁般€?/p>

(1)寮€濮嬩箣鍓?/p>

鍦ㄥ紑濮嬪涔犱箣鍓嶏紝浣犲彲浠ユ妸涓嬮潰杩欐浠g爜淇濆瓨璧锋潵骞朵笖杩愯瀹?/p>

************************

<html>
	<head>
		<title>My first Three.js app</title>
		<style>canvas { width: 100%; height: 100% }</style>
	</head>
	<body>
		<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
		<script>
			// Our Javascript will go here.
		</script>
	</body>
</html>

************************

鎴戜滑娣诲姞鐨勪唬鐮侀兘鏀惧湪script鏍囩閲岄潰

(2)寤虹珛涓€涓満鏅紙scene锛?/p>

涓轰簡鑳藉浣跨敤tree.js鏉ュ睍绀烘晥鏋滐紝鎴戜滑闇€瑕佸仛涓変欢浜嬫儏锛氬垱寤哄満鏅紙scene锛夛紝瑙嗚锛坈amera锛夛紝娓叉煋鍣紙renderer锛夛紱

********************************

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 );

********************************

璁╂垜浠潵鐪嬭繖娈典唬鐮侊紝鎴戜滑宸茬粡寤虹珛鍦烘櫙锛岃瑙掞紝娓叉煋鍣紝鍦ㄦ垜浠殑绫诲簱涓湁鍑犵涓嶅悓鐨勮瑙抍ameras锛屾垜浠皢鍦ㄥ悗闈㈢珷鑺傞噷闈㈣瑙o紱鐜板湪鎴戜滑灏变互鍏朵腑鐨勪竴涓被

perspectiveCamera浣滀负鎴戜滑鐨刢amera瑙嗚锛屽畠鐨勭涓€涓睘鎬ф槸瑙嗚锛岀浜屼釜鏄楂樻瘮锛涘緢澶氭椂鍊欐垜浠兘浣跨敤鍏冪礌鐨勫搴﹂櫎浠ラ珮搴︼紱鏈€鍚庣殑涓や釜灞炴€ф槸near鍜宖ar瀵归〉闈㈣鍓殑灞?/p>

鎬э紝濡傛灉涓€涓璞¤繙绂昏瑙掓瘮杩欎釜far鍊艰繕澶э紝鎴栬€呮瘮near鍊艰繕灏忓氨鍙兘涓嶄細琚樉绀猴紝涓嶈繃浣犱笉鐢ㄦ媴蹇冿紝浣犱篃鍙互浣跨敤鍏朵粬鍊间粠鑰岃幏寰楁洿濂界殑灞曠ず鏁堟灉锛?/p>

涓嬩竴姝ユ槸灞曠ず锛岃繖鏄杩瑰彂鐢熺殑鍦版柟锛屾澶栬繕鏈変竴鐐硅璇寸殑鏄垜浠櫎浜嗗垱寤烘覆鏌撳櫒瀹炰緥锛岃繕瑕佽缃垜浠簲鐢ㄧ▼搴忕殑澶у皬锛屾垜浠娇鐢ㄦ祻瑙堝櫒鐨勫鍜岄珮鏉ュ~鍏呮垜浠父鎴忓睆骞曠殑瀹藉拰楂橈紝

浣嗘槸瀵逛簬鎬ц兘瑕佹眰绱у紶鐨勬父鎴忥紝浣犲彲鑳介渶瑕佽缃皬涓€鐐圭殑鍊硷紝姣斿1/2鐨勯珮搴﹀拰瀹藉害锛岃繕鏈夊噺灏戜竴閮ㄥ垎鍒嗚鲸鐜囷紝浣嗚繖骞朵笉琛ㄧず浣犵殑娓告垙鍙兘濉弧绐楀彛鐨勪竴鍗婏紝鍙槸鐪嬭捣鏉ユā绯婁簡涓€鐐?/p>

锛?/p>

鎺ヤ笅鏉ユ垜浠鍦℉TML閲岄潰灞曠ず鎴戜滑鐨勫厓绱狅紝<canvas>鍏冪礌灏嗛€氳繃鍦烘櫙杩涜娓叉煋锛?/p>

濂戒簡锛屾垜浠竴鍒囬兘鍑嗗濂戒簡锛岄偅涔堟垜浠殑绔嬫柟浣撳湪鍝噷鍛紵濂斤紝鐜板湪璁╂垜浠妸浠栫粰鍔犱笂鍘?/p>

***************************

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;

*************************************

涓轰簡寤虹珛涓€涓珛浣撳瀷鎴戜滑闇€瑕佷竴涓猚ubeGeometry 杩欎釜瀵硅薄鍖呭惈鎵€鏈夌偣(vertices)鍜岄潰(fill), 鎴戜滑灏嗗湪鍚庨潰绔犺妭涓洿璇︾粏鎻忚堪锛?/p>

闄や簡鍑犱綍鍥惧舰鎴戜滑杩橀渶瑕佹潗璐ㄩ鑹诧紝three.js涓烘垜浠厤澶囧嚑绉嶆潗璐紝浣嗘垜浠繖閲屼娇鐢∕eshBasicMaterial 锛屾墍鏈夌殑鏉愯川閮?/p>

搴旂敤鍒颁竴涓璞$殑灞炴€э紝涓轰簡浣夸簨鎯呭彉寰楃畝鍗曪紝鎴戜滑鍙敤鍒伴鑹茬殑灞炴€?x00ff00 瀹冭〃绀虹豢鑹诧紝鍚屾牱鐨勬柟寮忔垜浠篃鍦╟ss鍜宲hotoshop閲岄潰浣跨敤銆?/p>

绗笁浠朵簨鎴戜滑闇€瑕佺綉鏍糓esh 涓€涓綉鏍煎璞℃槸涓€涓満鏅寘鍚潃鏉愯川鐨勫嚑浣曞浘褰㈠苟涓旇兘澶熻繘琛岀Щ鍔紱

榛樿鎯呭喌涓嬶紝鎴戜滑浼氳皟鐢╯cene.add()鏂规硶锛屾垜浠坊鍔犵殑涓滆タ灏嗚娣诲姞鍒癱oordinates(0,0,0)鍧愭爣涓婂幓锛岃繖鍙兘浼氫娇鐩告満camera鍜岀珛鏂逛綋鐩镐簰瑕嗙洊锛屼负浜嗛伩鍏?/p>

杩欑鎯呭喌鍙戠敓锛屾垜浠渶瑕佺Щ鍔ㄦ垜浠琧amera瑙嗚锛?/p>

(3)娓叉煋鍦烘櫙

濡傛灉浣犳嫹璐濅箣鍓嶇殑浠g爜锛屼綘鐪嬩笉鍒颁换浣曟晥鏋滐紝杩欐槸鍥犱负鎴戜滑娌℃湁娓叉煋浠讳綍涓滆タ锛屼负姝わ紝鎴戜滑闇€瑕佽皟鐢╮ender寰幆娓叉煋

******************

function render() {
	requestAnimationFrame(render);
	render