Three.js新手入門實踐案例解析

導讀

該篇文章呢，主要用於記錄一個簡單的入門級Three.js小案例，主要涉及到場景、攝像機的種類及攝像機創建，幾何體創建，幾何體運動，材質貼圖添加，窗口渲染 內容自適應這幾個方面來開發下面這個小案例，當然也包括相關實現方法的參數的詳解。幫助自己知識複習，如果能幫助大家入門Three.js這門瀏覽器端的WebGL神奇強大炫酷框架中去，那就更好了。

首選我們來看一下，Three.js的基本概念和簡介：

• three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能

• 什麼是threejs，很簡單，你將它理解成three + js就可以了。three表示3D的意思，js表示javascript的意思。那麼合起來，three.js就是使用javascript來寫3D程序的意思。Javascript是運行在網頁端的腳本語言，那麼毫無疑問Three.js也是運行在瀏覽器上的。

代碼開發階段

1、 首先我們需要創建Scene場景，Scene 允許我們設置Three.js渲染的內容以及位置。我們可以在這個scene場景中放置物體對象，燈光和照相機等等 ：

// 1. 首先我們需要創建場景 實例化THREE下面的方法Scene
scene = new THREE.Scene();

2、 再接着，我們需要創建攝像機，目前THREEJS中裏面的攝像機及有兩種類別，分別是透視型3D攝像機，正交投影攝像機。如下圖所示：

左側的就是我們的透視攝像機，右側的就是我們的正交投影攝像機；這裏呢，我們採用第一種，模擬人眼視角的透視型攝像機，代碼如下：

camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerWidth, 0.1, 1000); 

好，接着我們來介紹下這個PerspectiveCamera(fov, aspect, near, far)方法的參數的含義及作用：

• fov 可視角度，一般 60-90，人眼180左右，默認 45
• aspect 爲width/height,通常設置爲 canvas元素的高寬比。
• near 近端距離， 默認0.1
• far 遠端距離，默認1000
  只有離相機的距離大於near值，小於far值，且在相機的可視角度之內，才能被相機投影到。

3、 接着往下，我們就需要創建THREEJS渲染器，然後把渲染器append到我們的頁面中去，如下：

renderer = new THREE.WebGLRenderer({ antialias: true }); // antialias 平滑 抗鋸齒 
renderer.setSize(window.innerWidth, window.innerHeight);

// append 頁面中去
document.body.appendChild(renderer.domElement)

這裏呢，附上常用的WebGLRenderer參數配置

let renderer = new THREE.WebGLRenderer({
    antialias: true, // true/false表示是否開啓反鋸齒
    alpha: true, // true/false 表示是否可以設置背景色透明
    precision: 'highp', // highp/mediump/lowp 表示着色精度選擇
    premultipliedAlpha: false, // true/false 表示是否可以設置像素深度（用來度量圖像的分辨率）
    preserveDrawingBuffer: true, // true/false 表示是否保存繪圖緩衝
    maxLights: 3, // 最大燈光數
    stencil: false // false/true 表示是否使用模板字體或圖案
});

4、 創建幾何模型，並給這些幾何模型貼上好看的紋理貼圖：

// 創建矩形盒子
const geometry = new THREE.BoxGeometry( 2, 2, 2 );
// 創建紋理貼圖
const texture = new THREE.TextureLoader().load('imgs/wenli_03.png')
const material = new THREE.MeshBasicMaterial( { map: texture } );
cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 6;

5、 實現動畫不斷渲染，讓幾何模型不斷在空間旋轉：

// 動畫 animate
function animate(){
    requestAnimationFrame(animate);

    // 旋轉
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

6、 實現窗口縮放，尺寸內容模型響應式，代碼如下：

// 尺寸發生變化
function onWindowResize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize',()=>{
    onWindowResize();
})

結語

好，這個基礎案例，到這裏就結束了，該篇文章主要涉及到一些THREEJS相關的一些基礎知識的概念模型建立，更多好玩酷炫的效果，需要大家去到官網查看相關的案例源代碼啦 ~~