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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類