快捷導(dǎo)航

Three.JS實(shí)現(xiàn)三維場景

更新時間：2018年12月30日 10:18:14 作者：bullzerone

這篇文章主要為大家詳細(xì)介紹了Three.JS實(shí)現(xiàn)三維場景，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近在看一些Web3D的內(nèi)容，覺得如果用純openGLes寫一個簡單的3D場景太難了；不過還好，有很多現(xiàn)成的庫可以使用。

（個人感覺）：我知道的經(jīng)常的是Three.JS和SceneJS。感覺Three.JS資料比較多，貌似好學(xué)一些吧；另一個是ScenenJS，感覺官方介紹比較好，適合做一些工程和醫(yī)學(xué)上的模擬，實(shí)時性比較好，但是中文資料感覺比較少，不太好學(xué)習(xí)。我個人看的是Three.JS

學(xué)習(xí)中用到的一些工具和庫：學(xué)習(xí)中用到一些庫，也費(fèi)了不少時間去整理，下載；
用到的工具：WebStorm，個人感覺還好，雖然說，開始學(xué)不建議IDE，但是起碼有代碼提示，會有函數(shù)的簡單說明，起碼知道你輸入的代碼（即使是照著教程抄）是否正確，如果智能提示有，那么至少說明你輸入的代碼是正確的。

sublimeText ：一個文本工具，配置了也可以對代碼有些提示，但是，提示功能不如專業(yè)IDE。速度很好；
工具不上傳了，太大，可以自己去官網(wǎng)下載。

用到的庫：

Three.JS（介紹可以搜索）：
JQuery-1.9.0.JS:
JQuery-3.2.1.JS：
stats.JS：
dat.GUI.JS：
controlKit.JS：
SceneJS.js：

個人也是初學(xué)，工具用的是WebStorm，下面是three.JS的第一個例子，代碼中添加了很詳細(xì)的解釋，照著寫，仔細(xì)看看注釋。學(xué)習(xí)的時候，個人建議把下載到庫修改下名字，和你寫的HTML文件統(tǒng)一放到一個文件夾中，這樣像下面的例子中，添加引用的庫就可以了，要不就要指定引用庫的全路徑。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Three.js 第一章學(xué)習(xí)</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加入一個樣式，邊框?yàn)?（零，不顯示邊框）；滾動條隱藏-->
  <style type="text/css">
    body{
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
<!--建立一個DIV，WebGL渲染的基本物體會在此處輸出-->
<div id="WebGL-output">

</div>

<!--定義一個JQuery函數(shù)，所有的WebGL操作展示將在該函數(shù)中進(jìn)行-->
<script type="text/javascript">
$(function () {
  <!--構(gòu)建場景-->
  var scene = new THREE.Scene();
  <!--建立相機(jī)，查看場景,透視相機(jī)-->
  var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
  <!--構(gòu)建渲染器，進(jìn)行渲染-->
  var renderer = new THREE.WebGLRenderer();
  <!--渲染背景色,不知道為什么在此學(xué)習(xí)過程中，該函數(shù)setClearColorHex()老是提示錯誤？-->
  // renderer.setClearColorHex(0xEEEEEE);
  renderer.setClearColor(0xAAFFCC);
  <!--渲染尺寸-->
  renderer.setSize(window.innerWidth,window.innerHeight);

  <!--添加一個輔助坐標(biāo)軸-->
  var axes = new THREE.AxisHelper(20);
  scene.add(axes);

  <!--構(gòu)建一個平面，物體將會放置在這個平面上-->
  <!--平面尺寸，100x60，寬度方向平分幾分，高度方向平分幾分，如果參數(shù)最后2位不是（1,1），平面會顯示為網(wǎng)格平面-->
  var planeGeometry = new THREE.PlaneGeometry(100,60,10,10);
  <!--平面材質(zhì),僅僅指定顏色 0xcccccc-->
  var planeMaterial = new THREE.MeshBasicMaterial({color:0xccaacc});
  <!--有尺寸和材質(zhì)構(gòu)建一個平面-->
  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);
  <!--指定立方體的材質(zhì)，僅僅指定顏色：0xFF0000，是否使用線框模式顯示：是-->
  var cubeMaterial = new THREE.MeshBasicMaterial({color:0xFF0000,wireframe:true});
  <!--以給定的幾何尺寸和材質(zhì)構(gòu)建一個立方體-->
  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個參數(shù)感覺是指定網(wǎng)格密度-->
  var sphereGeometry = new THREE.SphereGeometry(4,50,50);
  <!--指定球體材質(zhì)，僅僅指定顏色：0xFF0000，是否以線框形式顯示：是-->
  var sphereMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});
  <!--以給定的幾何尺寸和材質(zhì)，建立一個球體-->
  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);

  <!--指定相機(jī)的位置和方向，決定我們在場景中如何看，能看到什么-->
  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);
  <!--利用渲染器以給定的相機(jī)去渲染場景-->
  renderer.render(scene,camera);
})  ;
</script>


</body>
</html>

效果：