three.js-WebGL引擎，用於數據3D可視化展現。

` WebGL1.0標準2011年發佈以來，至今天2017年，通過了大約6年。如今多數瀏覽器最新版本已經可以支持WebGL1.0標準，包括移動端瀏覽器。貧道喜歡把團隊用SolidWorks軟件設計的機械零件在我的網站解析出來，工程師之間能夠隨時隨地用手機瀏覽器訪問網站，打開零件相互交流，對外交流展現更加方便。貧道相信其它各個領域都有用到WebGL的項目，好比國內大型電商平臺推動商品在線3D預覽顯示計劃，3D效果的展現要比一張圖片體驗好得多；遊戲行業但願在線部署遊戲，相比須要下載的遊戲更加有利於推廣；房地產、酒店、商場領域但願能夠經過網頁在線展現室內效果，CAD開發公司但願能夠利用WebGL技術實如今線進行三維建模。除了特定領域的工程應用外，也有不少的計算機圖形學學習者但願用網頁在線展現本身的做品、算法，相比客戶端使用OpenGL開發的做品而言，使用WebGL技術實現的做品只須要給他人發送一個連接便可。事實上，愈來愈多的軟件應用搬上了網頁，瀏覽器的做用不只僅用來展現網頁內容，而是做爲一個平臺。不論學習WebGL仍是學習OpenGL，其實都是學習計算機圖形學及其延伸應用，WebGL對應的是瀏覽器平臺，OpenGL對應的是操做系統平臺。

相比瀏覽器對WebGL的支持而言，WebGL缺乏的是普及問題，人才需求遠遠大於人才供應。俗話說隔行如隔山，WebGL目前的普及慢，除了圖形學比較難之外，也有這方面問題。WebGL前三個字母體現的是互聯網平臺、瀏覽器頁面，後兩個字母體現的是計算機圖形學。瞭解前端的工程師，每每不瞭解圖形學，瞭解圖形學的每每又不瞭解網站開發，網頁設計。關於圖形學的學習資料每每都是使用C或C++語言編寫，基於操做系統平臺。

由於學員的基礎、行業多樣化分佈，所以本系列WebGL教程儘可能照顧不一樣基礎、不一樣領域的人，對於前端工程師，教程爲把圖形學的知識系統講解，對於已經瞭解圖形學的學習者，教程會講解相關的網頁設計知識，只要有必定的編程能力就行。在實際的WebGL項目中，除了圖形學自己而言，也要學習交互界面設計，經過HTML和CSS能夠完成界面的設計，經過WebGL API、着色器語言GLSL ES和Javascript語言，能夠完成圖形學部分的開發。若是你已經熟練使用HTML、CSS和Javascript語言，你只須要學習WebGL的API和GLSL ES語言，着色器語言GLSL ES相似C語言，運行在GPU上，對於多數學習過C語言的人來講並不難。對於有OpenGL基礎的人而言，WebGL API只不過是OpenGL API子集的子集，更多學習的是如何過渡到互聯網的生態環境下，在網頁上設計應用的GUI要比操做系統平臺方便的多，直接使用超文本語言HTML便可。 `

WebGL完美地解決了現有的Web交互式三維動畫的兩個問題：第一，它經過HTML腳本自己實現Web交互式三維動畫的製做，無需任何瀏覽器插件支持;第二，它利用底層的圖形硬件加速功能進行的圖形渲染，是經過統一的、標準的、跨平臺的OpenGL接口實現的。

WebGL（全寫Web Graphics Library）是一種3D繪圖協議，這種繪圖技術標準容許把JavaScript和OpenGL ES 2.0結合在一塊兒，經過增長OpenGL ES 2.0的一個JavaScript綁定，WebGL能夠爲HTML5 Canvas提供硬件3D加速渲染，這樣Web開發人員就能夠藉助系統顯卡來在瀏覽器裏更流暢地展現3D場景和模型了，還能建立複雜的導航和數據視覺化。顯然，WebGL技術標準免去了開發網頁專用渲染插件的麻煩，可被用於建立具備複雜3D結構的網站頁面，甚至能夠用來設計3D網頁遊戲等等。

Three.js是一款開源的主流3D繪圖JS引擎（名字Three就是3D的含義），原做者爲Mr.Doob，項目地址爲：https://github.com/mrdoob/three.js/。 咱們知道WebGL是一種網頁3D繪圖標準，和jQuery簡化了HTML DOM操做同樣，Three.js能夠簡化WebGL編程。 WebGL是HTML5技術生態鏈中最爲使人振奮的標準之一，把Web帶入3D的時代，對WebGL沒有概念的請閱讀本站相關入門教程。

[](#javascript-3d-library)JavaScript 3D library

The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.

Examples — Documentation — Wiki — Migrating — Questions — Forum — Slack — Discord

[](#usage)Usage

This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.

import * as THREE from './js/three.module.js';
let camera, scene, renderer;
let geometry, material, mesh;
init();
function init() {
 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
 camera.position.z = 1;
 scene = new THREE.Scene();
 geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
 material = new THREE.MeshNormalMaterial();
 mesh = new THREE.Mesh( geometry, material );
 scene.add( mesh );
 renderer = new THREE.WebGLRenderer( { antialias: true } );
 renderer.setSize( window.innerWidth, window.innerHeight );
 renderer.setAnimationLoop( animation );
 document.body.appendChild( renderer.domElement );
}
function animation( time ) {
 mesh.rotation.x = time / 2000;
 mesh.rotation.y = time / 1000;
 renderer.render( scene, camera );
}

If everything went well, you should see this.

[](#cloning-this-repository)Cloning this repository

Cloning the repo with all its history results in a ~2GB download. If you don't need the whole history you can use the depth parameter to significantly reduce download size.

git clone --depth=1 https://github.com/mrdoob/three.js.git

[](#change-log)Change log

Releases

[](#%E7%8E%AF%E5%A2%83%E6%94%AF%E6%8C%81)環境支持

• 須要 npm install http-server -g
• 在根目錄 cmd 命令行執行 http-server （本地起一個node服務，用於加載圖片/文件/json）
• 複製 命令行中相似 http://10.10.100.20:8080 的地址，在本地瀏覽器點擊查看相應的 demo (或者直接在瀏覽器地址欄輸入路徑，進行查看)

[](#%E5%85%B6%E4%BB%96%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99)其餘參考資料

• 1 《Three.js 入門指南》的書例代碼 http://zhangwenli.com/ThreeExample.js
• 2 http://www.yanhuangxueyuan.com/Three.js
• 3 http://www.yanhuangxueyuan.com
• 4 https://github.com/takahirox/takahirox.github.io (兩萬五千多個文件)
• 5 https://threejs.org/
• 6 https://www.bilibili.com/video/av909518/
• 7 https://www.blender.org/
• 8 https://www.blendercn.org/
• 9 https://github.com/mrdoob/three.js
• 10 http://www.yanhuangxueyuan.com/work.html
• 11 http://www.yanhuangxueyuan.com/WebGL_course/preface.html
• 12 http://www.javashuo.com/article/p-gxzjzzsh-g.html
• 13 https://echarts.apache.org/zh/tutorial.html#%E4%BD%BF%E7%94%A8%20ECharts%20GL%20%E5%AE%9E%E7%8E%B0%E5%9F%BA%E7%A1%80%E7%9A%84%E4%B8%89%E7%BB%B4%E5%8F%AF%E8%A7%86%E5%8C%96
• 14 https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/
• 15 https://www.babylonjs.com/
• 16 https://github.com/pixijs/pixi.js