WebGL之Three.js開發第一個場景（含原始碼）

阿新 • • 發佈：2019-01-19

在h5火熱的當下，各種絢麗的場景層出不窮。但是，我們是不是發現大部分或者說絕大部分的網站只是一個向用戶展示資訊的平臺。至於使用者與其進行的互動則僅限於下拉瀏覽，點選觸發，或者填寫一些表單資訊。

我一直在思考下一個web時代，並不敢斷言一定會是WebGL，但是在不久後的幾年中，使用者在瀏覽網站時所能進行的互動將會越來越多，一種類似於遊戲的渲染將會更多的應用在Web開發中。

下面是我對WebGL的第三方庫Three.js的學習心得，如有不足還望諒解。非常希望您能提出寶貴意見。

開始學習：)

1、引入Three.js

在進行開發之前，我們要要引入開發所必須的庫檔案three.js。這個建議在

官網上下載。建議直接左側download，裡面包含的其他js檔案將在後期還會有用。下載完成後，我們便需要引入js檔案。下面是引入three.js檔案的程式碼展示。

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script>
        // Our Javascript will go here.
    </script>
</body>
</html>

2.建立場景

場景的建立同Scene物件，他是設定由three.js呈現的內容的位置，是我們放置燈光，物體和照相機的地方。

var scene = new THREE.Scene();//使用場景

3.建立相機

下面的語句表示的是建立一個透視相機，什麼是透視相機為了讓顯示的更像3維的效果。透視相機在現實的時候會根據距離的遠近來顯示場景，離的近會顯示大，離的遠會顯示的小。其實就像我們眼睛一眼，離的近所能看見的物品少，離的遠就能看見較多的物品。

PerspectiveCamera( fov, aspect, near, far )有三個四個引數，分別是仰角，長寬比近裁剪面遠裁剪面。

var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);

4.渲染

使用WebGL來渲染場景。WebGLRenderer含有引數，在定義引數中可以將場景渲染於特定的canvas中，不寫引數時為預設值。

var renderer = new THREE.WebGLRenderer();//渲染
renderer.setSize( window.innerWidth, window.innerHeight );//設定顯示的效果  如果需要顯示很少的解析度的話   可以設定更小的高度的寬度 
document.body.appendChild( renderer.domElement );//渲染元素到body中顯示

5.建立一個geometry幾何體

BoxGeometry能夠建立一個box。其中的三個引數分別表示長寬高。
MeshBasicMaterial 表示用最簡單的方式來繪製幾何體。其中color是設定幾何體的顏色。
Mesh函式呼叫geometry,和material來構造出幾何體。
最後將我們所畫的正方體新增在場景中。

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

6.渲染顯示

在我們建立了場景、照相機、和渲染的物件，並且我們還建立了一個幾何體新增在場景中時，我們還不能顯示出來這個正方形的幾何體。建立的場景是需要渲染的。

renderer.render( scene, camera );   //渲染場景和攝像機

7.完整程式碼展示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>the first three.js </title>
    <style>
        body { margin: 0;}
        canvas { width: 100%; height: 100%;}
    </style>
</head>
<body>
    <script src="../js/three.js"></script>
    <script>
        var scene = new THREE.Scene();//使用場景
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement ); 

        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        camera.position.z = 5;

        function animate() {
            requestAnimationFrame( animate ); 
            renderer.render( scene, camera );
            cube.rotation.x += 0.05;  
            cube.rotation.y += 0.05;
        }
        animate();
    </script>

</body>

WebGL之Three.js開發第一個場景（含原始碼）

開始學習：)

1、引入Three.js

2.建立場景

3.建立相機

4.渲染

5.建立一個geometry幾何體

6.渲染顯示

7.完整程式碼展示。

WebGL之Three.js開發第一個場景（含原始碼）

webGL之three.js入門3--材料篇

webGL之three.js入門4--ThreeJS Editor入門篇

three.js入門第一個案例

[BZOJ2844]albus就是要第一個出場（線性基）

.NET Core單元測試之搞死開發的覆蓋率統計（coverlet + ReportGenerator ）

安迪的第一個字典（UVa 10815）

使用高德地圖微信小程式SDK開發案例-輸入提示（附原始碼）

動態規劃之最長單調遞增子序列（C++原始碼）

Activity生命週期互動設計思想和應用場景（附原始碼）

小程式開發快速入門教程（附原始碼）

SpringBoot進階之統一異常處理（含原始碼）

SpringBoot進階之訪問資料庫（含原始碼）

wireshark外掛開發詳細流程（含原始碼）

01-THREE.JS第一個場景

使用WebGL + Three.js制作動畫場景

Webgl基於Three.js的開發——利用Frustum來判斷相交或者包含

一、WCF學習之旅-創建第一個服務

用UNITY5開發第一個手機遊戲(1)各種插件的準備

JEECG開發第一個菜單現實設備列表

WebGL之Three.js開發第一個場景（含原始碼）

開始學習：)

1、引入Three.js

2.建立場景

3.建立相機

4.渲染

5.建立一個geometry幾何體

6.渲染顯示

7.完整程式碼展示。

相關推薦