最近在看一些Web3D的內容，覺得如果用純openGLes寫一個簡單的3D場景太難了；不過還好，有很多現成的庫可以使用。
（個人感覺）：我知道的經常的是Three.JS和SceneJS。感覺Three.JS資料比較多，貌似好學一些吧；另一個是ScenenJS，感覺官方介紹比較好，適合做一些工程和醫學上的模擬，實時性比較好，但是中文資料感覺比較少，不太好學習。我個人看的是Three.JS
學習中用到的一些工具和庫：學習中用到一些庫，也費了不少時間去整理，下載；
用到的工具：WebStorm，個人感覺還好，雖然說，開始學不建議IDE，但是起碼有代碼提示，會有函數的簡單說明，起碼知道你輸入的代碼（即使是照著教程抄）是否正確，如果智能提示有，那么至少說明你輸入的代碼是正確的。
sublimeText ：一個文本工具，配置了也可以對代碼有些提示，但是，提示功能不如專業IDE。速度很好；
工具不上傳了，太大，可以自己去官網下載。
用到的庫：
個人也是初學，工具用的是WebStorm，下面是three.JS的第一個例子，代碼中添加了很詳細的解釋，照著寫，仔細看看注釋。學習的時候，個人建議把下載到庫修改下名字，和你寫的HTML文件統一放到一個文件夾中，這樣像下面的例子中，添加引用的庫就可以了，要不就要指定引用庫的全路徑。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Three.js 第一章學習</title><!--需要的基本JS庫--> <script src="jquery19.js"></script> <script src="three.js"></script> <script src ="stats.js"></script> <script src = "dat.gui.js"></script> <script src = "controlKit.js"></script> <!--給body加入一個樣式，邊框為0（零，不顯示邊框）；滾動條隱藏--> <style type="text/css"> body{ margin: 0; overflow: hidden; } </style></head><body><!--建立一個DIV，WebGL渲染的基本物體會在此處輸出--><div id="WebGL-output"></div><!--定義一個JQuery函數，所有的WebGL操作展示將在該函數中進行--><script type="text/javascript">$(function () { <!--構建場景--> var scene = new THREE.Scene(); <!--建立相機，查看場景,透視相機--> var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); <!--構建渲染器，進行渲染--> var renderer = new THREE.WebGLRenderer(); <!--渲染背景色,不知道為什么在此學習過程中，該函數setClearColorHex()老是提示錯誤？--> // renderer.setClearColorHex(0xEEEEEE); renderer.setClearColor(0xAAFFCC); <!--渲染尺寸--> renderer.setSize(window.innerWidth,window.innerHeight); <!--添加一個輔助坐標軸--> var axes = new THREE.AxisHelper(20); scene.add(axes); <!--構建一個平面，物體將會放置在這個平面上--> <!--平面尺寸，100x60，寬度方向平分幾分，高度方向平分幾分，如果參數最后2位不是（1,1），平面會顯示為網格平面--> var planeGeometry = new THREE.PlaneGeometry(100,60,10,10); <!--平面材質,僅僅指定顏色 0xcccccc--> var planeMaterial = new THREE.MeshBasicMaterial({color:0xccaacc}); <!--有尺寸和材質構建一個平面--> var plane = new THREE.Mesh(planeGeometry,planeMaterial); <!--把平面選擇-90°，方便觀察--> plane.rotation.x = -0.5*Math.PI; <!--指定平面的位置--> plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; <!--把平面加入到場景中--> scene.add(plane); <!--建立物體，一個立方體，一個球體--> <!--建立一個立方體--> <!--指定立方體的幾何尺寸，長寬高，不包括位置--> var cubeGeometry = new THREE.CubeGeometry(4,4,4); <!--指定立方體的材質，僅僅指定顏色：0xFF0000，是否使用線框模式顯示：是--> var cubeMaterial = new THREE.MeshBasicMaterial({color:0xFF0000,wireframe:true}); <!--以給定的幾何尺寸和材質構建一個立方體--> var cube = new THREE.Mesh(cubeGeometry,cubeMaterial); <!--指定立方體的具體位置xyz--> cube.position.x =-4; cube.position.y =3; cube.position.z = 0; <!--把建立的立方體放入場景--> scene.add(cube); <!--建立一個球體sphere--> <!--指定球體的幾何尺寸，不包括位置；最后2個參數感覺是指定網格密度--> var sphereGeometry = new THREE.SphereGeometry(4,50,50); <!--指定球體材質，僅僅指定顏色：0xFF0000，是否以線框形式顯示：是--> var sphereMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true}); <!--以給定的幾何尺寸和材質，建立一個球體--> var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial); <!--指定球體的位置 X Y Z--> sphere.position.x =20; sphere.position.y=4; sphere.position.z = 0; <!--把建立的球體加入到場景中--> scene.add(sphere); <!--指定相機的位置和方向，決定我們在場景中如何看，能看到什么--> camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); <!--利用JQuery查找到ID為WebGL-output的DIV，并把渲染到的東西輸出到該DIV--> $("#WebGL-output").append(renderer.domElement); <!--利用渲染器以給定的相機去渲染場景--> renderer.render(scene,camera);}) ;</script></body></html>
新聞熱點
疑難解答
圖片精選
