THREE.js 學習筆記（一）

来源:http://www.cnblogs.com/shouce/archive/2016/06/02/5551794.html
-Advertisement-
Play Games

一. 獲取THREE.js three.js的代碼托管在github上面，https://github.com/mrdoob/three.js/ 我們可以用git來獲取代碼，閑麻煩的話也可以直接下載zip文件。 二. 目錄結構 拿到代碼後先看下three.js的目錄結構 |-build |-cust ...


一. 獲取THREE.js

three.js的代碼托管在github上面，https://github.com/mrdoob/three.js/

我們可以用git來獲取代碼，閑麻煩的話也可以直接下載zip文件。

二. 目錄結構

拿到代碼後先看下three.js的目錄結構

|-build

     |-custom

     |-Three.js

|-examples

|-gui

|-src

     |-cameras

     |-core

     |-extras

     |-lights

     |-materials

     |-objects

     |-renderers

     |-scenes

     |-textures

     |-Three.js

|-utils

     |-compiler

     |-exporters

     |-build.bat

     |-build.sh

     |-build.xml

     |-build_all.bat

     |-build_all.sh

 

  1. build目錄下是源代碼連接壓縮過後的js文件，而連接和壓縮源代碼的工具放在utils目錄下，在utils目錄下還有一個exporters目錄，是各種模型導出工具，插件，有blender和max的導出插件，還有把fbx轉成THREE.js場景文件的python腳本。
  2. examples目錄下都是three.js的示例，值得一提的是，裡面有很多實用的shader腳本和js腳本可以拿來在自己的項目里用，比如js/ShaderExtra.js提供了很多現成的shader代碼，js/postprocessing下提供了封裝起來的幾種常用的後處理的介面
  3. gui下麵是一些封裝後的ui介面
  4. src當然就是重頭戲了，three.js的源代碼都在這個目錄下，src里下的各個子目錄也很好的體現了three.js的構成，像camera，light，object這些都是一個場景（scene）的基礎對象，而scenes下麵則是對整個場景的管理代碼，像scene graph的實現，renderers下是核心渲染器的實現，three.js對於場景和渲染器分離的還不錯，可以用不同的renderer渲染同一個場景，當然對於一些WebGL支持的高級特性，使用其它的renderer肯定是不行的。還有一個extras目錄是在核心代碼之上的一些未程式提供便利的介面，比如提供了一些常用的camera，material，light。
  5. utils目錄上面已提過

 

三. example分析 - webgl trackballcamera earth

QQ截圖未命名

examples目錄下有該示例

 

在這個example里我們能夠看到：

  • 一個最基本的three.js應用需要有的東西
  • camera的創建以及camera control的添加
  • 基本形體的創建，材質的創建
  • 粒子系統的創建，這個會後面講。

 

這裡不會逐行逐行代碼的分析，而是對於每個特性挑出代碼來講。

 

一個three.js應用的基本結構。

不管用什麼寫3d應用，c++的ogre，flash的pv3d，js的o3d，又或者使用場景編輯器，一個3d場景所需要的最基本的東西都是一樣的，一個主要的camera，一個主要的scene。

當然一般的場景里都會有物體，有燈光，每個物體都有材質。我們在three.js中可以一個個手動創建，也可以直接載入一個記錄場景數據的json文件。

 

創建一個scene

scene = new THREE.Scene();

創建一個攝像機

camera = new THREE.PerspectiveCamera( 25, width / height, 50, 1e7 );
camera.position.z = radius * 7;

這段代碼確定了一個攝像機的視錐，四個參數分別是攝像機的視錐角度，視口的長寬比，攝像機的近切麵(Front Clipping Plane)和遠切麵(Back Clipping Plane)，為什麼要四個參數？其實攝像機本質上就是一個投影矩陣，而建立一個透視投影的矩陣（還有正交投影）需要這四個參數，形象點可以看下圖

shenruTS_1

從圖中可以看到，要唯一確定一個透視的視錐(Viewing Frustum)至少需要上述的四個參數。

 

調整攝像機的位置和朝向

創建一個攝像機還需要擺好這個攝像機的位置和朝向，three.js里可以用camera.lookAt函數來設置攝像機的朝向，用camera.position設置攝像機的位置

這個demo里由於創建了一個實現軌跡球控制效果的TrackballControls，因此camera的變換都被封裝在這裡面了。

如果看lookAt的代碼，其實這些操作都是矩陣的操作，攝像機本質上和一個場景中的實體無異，都是使用變換矩陣來做變換。

 

下麵要為場景中添加一些東西了

我們可以在演示中大概看到這個場景中有一個地球，一個月球，周圍的太空，還有一個一直照著地球模擬太陽的光照，如果看得仔細點，我們還會發現其實地球外面還包著一層大氣層。

下麵要一一在場景中添加進入這些東西

 

1. 首先是地球

在WebGL里創建一個object，我們需要的最基本的數據就是這個object的頂點位置，當然，如果需要這個物體能夠入眼的話，我們還需要為它編寫shader，需要傳入頂點的法線數據，需要傳入texcoord來完成紋理映射。

說到shader，我們先看下WebGL中渲染一個物體的基本順序：

程式會先載入，編譯和綁定shader代碼，每個渲染批次，顯卡都會將這些頂點數據傳入流水線，在流水線中會通過Vertex Shader進行頂點位置的變換，光柵化，Fragment Shader中對每個像素計算顏色，最後深度測試等等後輸出到屏幕。

 

THREE.js中將物體頂點數據的管理封裝成為geometry介面，將shader和shader中參數的管理封裝成為material介面，每次編譯載入綁定shader，傳入頂點數據都會在WebGLRenderer中統一處理。

複製代碼 
var materialNormalMap = new THREE.ShaderMaterial({
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: uniforms,
    lights: true
});
複製代碼

這裡便是創建了一個材質,傳入了fragmentShader和vertexShader的代碼，uniforms是這兩個shader里的參數。

這兩個都是可以拿來主義的

複製代碼 
var shader = THREE.ShaderUtils.lib[ "normal" ],
    uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
uniforms[ "tNormal" ].texture = normalTexture;
uniforms[ "uNormalScale" ].value = 0.85;

uniforms[ "tDiffuse" ].texture = planetTexture;
uniforms[ "tSpecular" ].texture = specularTexture;

uniforms[ "enableAO" ].value = false;
uniforms[ "enableDiffuse" ].value = true;
uniforms[ "enableSpecular" ].value = true;

uniforms[ "uDiffuseColor" ].value.setHex( 0xffffff );
uniforms[ "uSpecularColor" ].value.setHex( 0x333333 );
uniforms[ "uAmbientColor" ].value.setHex( 0x000000 );

uniforms[ "uShininess" ].value = 15;
複製代碼


於是這裡創建了一個法線貼圖的材質（關於法線貼圖的原理，這裡先不多講），並且設置好了它的各個參數，其中tNnormal是法線紋理，tDiffuse是漫反射紋理，tSpecular是高光紋理，

earth_atmos_2048earth_specular_2048earth_normal_2048

tDiffuse，tSpecular和tNormal

 

uDiffuseColor, uSpecularColor, uAmbientColor, uShininess這四個是Phong模型光照的參數，

uDiffuseColor：漫反射顏色

uSpecularColor：高光顏色

uAmbientColor:環境光顏色

uShininess：物體錶面光滑度

 

下麵這段便是創建這個地球本身了，並且加入到場景裡面

複製代碼 
geometry = new THREE.SphereGeometry( radius, 100, 50 );
geometry.computeTangents();
meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
meshPlanet.rotation.y = 1.3;
meshPlanet.rotation.z = tilt;
scene.add( meshPlanet );
複製代碼

最後看一下這個添加到scene里的Mesh的組成圖

繪圖2

 

2. 建月球和雲層也是依法炮製，雲層因為是png格式所以有半透明效果。

3. 創建平行光

創建一個光照是很簡單的，tree.js的燈光對象主要就是保存燈光參數的作用，而光照的實際計算是放在shader里，我們暫時不用關心

dirLight = new THREE.DirectionalLight( 0xFFFFFF );
dirLight.position.set( -1, 0, 1 ).normalize();
scene.add( dirLight );

場景的互動

sample中我們可以使用滑鼠控制攝像機的旋轉，three.js為我們提供一些常用的攝像機控制介面，這個sample里用的是軌跡球

複製代碼 
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.2;

controls.noZoom = false;
controls.noPan = false;

controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;

controls.minDistance = radius * 1.1;
controls.maxDistance = radius * 100;
複製代碼

我們可以在src/extras/controls下麵看到幾個常用的攝像機控制

 

渲染

我們最後來看看render函數里的代碼

複製代碼 
var t = new Date().getTime(),
dt = ( t - time ) / 1000;
time = t;

meshPlanet.rotation.y += rotationSpeed * dt;
meshClouds.rotation.y += 1.25 * rotationSpeed * dt;

var angle = dt * rotationSpeed;

meshMoon.position = new THREE.Vector3(
    Math.cos( angle ) * meshMoon.position.x - Math.sin( angle ) * meshMoon.position.z,
    0,
    Math.sin( angle ) * meshMoon.position.x + Math.cos( angle ) * meshMoon.position.z
);
meshMoon.rotation.y -= angle;

controls.update();

renderer.clear();
renderer.render( scene, camera );
複製代碼

這個函數主要做了每一幀都要做的幾件事：

  • 計算這一幀的時間
  • 旋轉地球
  • 計算月球位置
  • 更新攝像機控制
  • 渲染

最後render函數里需要兩個參數，scene和camera，我們如果看下render里的代碼話就可以知道，每次render的時候，都需要遍歷一遍scene graph，渲染裡面每個需要渲染的對象，而攝像機的作用就只是提供一個視角變換矩陣和投影矩陣。這個以後看WebGLRenderer里的代碼的時候會繼續深入。

 

這個函數會使用setInterval定時調用，來實現動畫的效果。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 淺談 SOLID 原則的具體使用
    SOLID 是面向對象設計5大重要原則的首字母縮寫，當我們設計類和模塊時，遵守 SOLID 原則可以讓軟體更加健壯和穩定。那麼，什麼是 SOLID 原則呢？本篇文章我將談談 SOLID 原則在軟體開發中的具體使用。 單一職責原則（SRP） 單一職責原則（SRP）表明一個類有且只有一個職責。一個類就像 ...
  • 第三章 微服務之間的調用 + 服務發現 + 負載均衡 + retrofit通信
    微服務與微服務之間通信。 一、通信協議 我們選用的通信協議是http，其實現工具是retrofit。 特點：實現簡單，但是速度相較於tcp協議是慢一些 如果對速度要求很高，可以使用tcp協議，實現產品可選用mina2/netty 特點：實現簡單，但是速度相較於tcp協議是慢一些 二、服務路由 說明： ...
  • 第二章 微服務架構搭建 + 服務啟動註冊
    一、首先編寫微服務基礎項目framework 1、pom.xml 1 <?xml version="1.0" encoding="UTF-8"?> 2 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...
  • JavaScript來實現打開鏈接頁面（轉載）
    在頁面中的鏈接除了常規的方式以外，如果使用javascript，還有很多種方式，下麵是一些使用javascript，打開鏈接的幾種方式： 1.使用window的open方法打開鏈接，這裡可是在制定頁面中打開鏈接，也可以定製打開頁面的尺寸等等。<a href=”javascript:window.op ...
  • angular.js
    angular.js 從來沒有接觸過 現在大家一起來學習 ng-app 指令定義一個 AngularJS 應用程式。 ng-model 指令把元素值（比如輸入域的值）綁定到應用程式。 ng-bind 指令把應用程式變數 name 綁定到某個段落的 innerHTML。 ...
  • EXT中單擊button按鈕，grid添加一行（游標位置可設置）
    1.創建一個添加按鈕，listeners事件中button的單擊事件，{ id:'button1', xtype : 'button', margin : '6', text : '添加', name : 'btn-add', iconCls: 'btn-add', listeners:{ clic ...
  • Javascript 小技能
    /* @@截取字元串長度，漢字算2個字元 @@return [string]+'...' */ var subString = function(str, len) { var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\x ...
  • [Effective JavaScript 筆記]第23條：永遠不要修改arguments對象
    arguments對象並不是標準的Array類型的實例。arguments對象不能直接調用Array方法。 arguments對象的救星call方法 使得arguments可以品嘗到數組方法的美味，知道可以吃，下麵就是怎麼吃的問題了。不管怎麼吃，先吃一口試試。 感覺很棒的樣子，色香都具備了，拿筷子... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類