鏈汉鑻辫姘村钩鏈夐檺锛屽彧闄愪釜浜哄叴瓒ｇ埍濂界炕璇戞鏂囨。锛屾杩庡悇浣嶇綉鍙嬫媿鐮栧拰鎸囩偣锛屾湰缈昏瘧鏈粡闆曠悽锛屼粎鍑劅瑙夊紕鍑虹涓€绋匡紝鍙互鑲畾杩欎笉浼氭槸绗竴绋匡紝濡傞渶浜嗚Вthree.js鐨凥TML5 3D绫诲簱鐨勮祫鏂欐枃妗ｏ紝澶у鍙互鍒癵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鏈変竴浜涗簡瑙ｈ繕鏈夊畠鑳藉府鍔╀綘鍋氫簺浠€涔堬紝浣嗚繕鏄鎴戜滑绠€鍗曚粙缁嶄竴涓嬪畠銆?/p>
Three.js鏄竴涓簱锛屼娇寰梂ebGL-3D鍦ㄦ祻瑙堝櫒涓睍绀洪潪甯稿鏄撱€備妇涓緥瀛愶紝鎴戜滑浣跨敤鍘熺敓鎬佺殑WebGL璇硶鏉ユ弿杩颁竴涓珛鏂逛綋锛屾垜浠渶瑕佸啓鍑犵櫨琛孞avascript鍜岀潃鑹插櫒浠ｇ爜锛屼絾鏄鏋滅敤
聽
three.js鐨勮瘽锛屾垜浠彧闇€瑕佸緢灏忛儴鍒嗗氨鍙互杈惧埌杩欑鏁堟灉锛屽洜涓鸿繖涓被搴撳凡缁忓府浣犲皝瑁呭ソ浜嗗嚱鏁般€?/p>
(1)寮€濮嬩箣鍓?/p>
鍦ㄥ紑濮嬪涔犱箣鍓嶏紝浣犲彲浠ユ妸涓嬮潰杩欐浠ｇ爜淇濆瓨璧锋潵骞朵笖杩愯瀹?/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锛屾垜浠皢鍦ㄥ悗闈㈢珷鑺傞噷闈㈣瑙ｏ紱鐜板湪鎴戜滑灏变互鍏朵腑鐨勪竴涓被
聽
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)娓叉煋鍦烘櫙
濡傛灉浣犳嫹璐濅箣鍓嶇殑浠ｇ爜锛屼綘鐪嬩笉鍒颁换浣曟晥鏋滐紝杩欐槸鍥犱负鎴戜滑娌℃湁娓叉煋浠讳綍涓滆タ锛屼负姝わ紝鎴戜滑闇€瑕佽皟鐢╮ender寰幆娓叉煋
******************
function render() {
requestAnimationFrame(render);
render