Three.JS 學習筆記——簡介

Three.js · 發表 2018-12-06 19:15:48

摘要：一、前言 Three.js( github ) 是一個純 JavaScript 實現的 3D 渲染庫，其在前端 3D 渲染的地位不言而喻，看其在 github 上的 start 4.6 k，fork 1.7 k 這個量級便知道了。準確來說 ThreeJs 是一個基於 WebGL 的封裝，...

一、前言

Three.js( ofollow,noindex">github ) 是一個純 JavaScript/">JavaScript 實現的 3D 渲染庫，其在前端 3D 渲染的地位不言而喻，看其在 github 上的 start 4.6 k，fork 1.7 k 這個量級便知道了。準確來說 ThreeJs 是一個基於 WebGL 的封裝，而 WebGL 就是前端界的 OpenGL。

二、Github 首頁解讀

1.簡介

該專案的目的是建立一個易於使用，輕量級的3D庫。該庫提供Canvas 2D，SVG，CSS3D和WebGL渲染器。

Examples: 真的是史上見過最全的例程，良心良心啊，不過沒有文件說明，也沒有註釋。捂臉.jpg

Document: 文件也是非常的齊全了，同樣是良心作品。

其他連結有興趣的可以自己去探求一下。

2.使用

首先在自己的頁面中安裝或者以模組的方式進行匯入，再或者自己可以進行原始碼編譯並匯入。

<script src="js/three.min.js"></script>

下面是github首頁給的一個小例子，有興趣的可以拿來執行一下，改改裡面的引數，感受一下 3D 的世界。

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {
// 建立一個相機
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
// 建立場景
scene = new THREE.Scene();
// 建立一個3D Box 幾何體
geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
material = new THREE.MeshNormalMaterial();
// 建立 mesh 並新增到場景中
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// 建立一個 WebGLRenderer 並加入到上下文中
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

}

function animate() {

requestAnimationFrame( animate );

mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;

renderer.render( scene, camera );

}

不想自己敲程式碼的，也可以看看 github 中提供的 jsfiddle 中繪製出來的效果。沒法搞出一個 gif 出來，只得到一個 jpg，湊合著看看？

Box.png

除了 GitHub 首頁，其還提供了一個官網 https://threejs.org/ ，官網提供了 document 入口，原始碼下載地址或者直接下載，同時也有許多非常炫麗的產品展示。尤其亮瞎我鈦金眼的法拉第FF，真是吃了好大一個鯨 —— ff 91 vr

image.png

三、原始碼基本結構

1.本地除錯原始碼

(1) npm install 安裝依賴

(2) npm run dev 在本地起一個服務

成功後，如下會在本機開啟一個 8080 埠，然後你就可以愉快的在本機體驗所有的 demo 效果了。

控制檯輸出

[HTTP] Starting up http-server, serving ./
[HTTP] Available on:
[HTTP]http://127.0.0.1:8080
[HTTP]http://192.168.31.175:8080
[HTTP] Hit CTRL-C to stop the server

2.基本結構

瀏覽器輸出上面的 http 地址，如 http://127.0.0.1:8080，注意必須要用 http/https 協議，否則例程裡面的模型是不能下載的，即，不支援 ftp。