three.js入門篇

時間 2019-11-07

原文原文鏈接

背景

一個偶然的機會看到了用three.js開發的3D效果，當即引發了個人興趣，直接用JavaScript輕鬆的建立在瀏覽器上顯示的3D模型，這在之前要作這樣的效果門檻但是很高的，這實在是前端開發的一個福音。css

簡介

OpenGL是最經常使用的跨平臺圖形庫，WebGL是基於OpenGL設計的面向web的圖形化標準，提供了一系列JavaScript API，經過這些API進行圖形渲染將得以利用圖形硬件從而得到較高性能。而Three.js是經過對WebGL接口的封裝與簡化而造成的一個易用的圖形庫。html

簡單點的說法：WebGL能夠當作是瀏覽器給咱們提供的接口，在JavaScript中能夠直接用這些API進行3D圖形的繪製；而Three.js就是在這些接口上又幫咱們封裝得更好用一些。 Three.js是經過對WebGL接口的封裝與簡化而造成的一個易用的圖形庫。前端

也有不少人直接使用WebGL開發圖形化應用，但WebGL門檻相對較高，須要相對較多的數學知識。雖然WebGL提供的是面向前端的API，但本質上WebGL跟前端開發徹底是兩個不一樣的方向，知識的重疊不多。相關性只是他們都在web平臺上，都是用JavaScript而已。一個前端程序員或許還熟悉解析幾何，可是還熟悉線性代數的應該寥寥無幾了（好比求個逆轉置矩陣試試？），更況且使用中強調矩陣運算中的物理意義，這在教學中也是比較缺失的。git

所以，前端工程師想要短期上手WebGL仍是挺有難度的。因而，Three.js對WebGL提供的接口進行了很是好的封裝，簡化了不少細節，大大下降了學習成本。而且，幾乎沒有損失WebGL的靈活性。程序員

概念

在Three.js中，有3個重要的組件：場景（scene）、相機（camera）和渲染器（renderer）。這是將物體渲染到網頁中的三個必不可少的要素。github

場景
場景是全部物體的容器，若是要顯示一個蘋果，就須要將蘋果對象加入場景中。web

相機
相機決定了場景中那個角度的景色會顯示出來。相機就像人的眼睛同樣，人站在不一樣位置，擡頭或者低頭都可以看到不一樣的景色。瀏覽器

場景只有一種，可是相機卻又不少種。和現實中同樣，不一樣的相機肯定了呈相的各個方面。好比有的相機適合人像，有的相機適合風景，專業的攝影師根據實際用途不同，選擇不一樣的相機。對程序員來講，只要設置不一樣的相機參數，就可以讓相機產生不同的效果。bash

渲染
最後一步就是設置渲染器，渲染器決定了渲染的結果應該畫在頁面的什麼元素上面，而且以怎樣的方式來繪製。前端工程師

看一下代碼框架：

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);
複製代碼

注：渲染器renderer的domElement元素，表示渲染器中的畫布，全部的渲染都是畫在domElement上的，因此這裏的appendChild表示將這個domElement掛接在body下面，這樣渲染的結果就可以在頁面中顯示了。

例子

要開始three.js很簡單，只要有瀏覽器和three.js這個源文件就能夠開始了。

three.js能夠直接引用cdn路徑：cdn.bootcss.com/three.js/92…)，或者到github下載源碼。

下面用three.js建立一個簡單的例子，先看效果圖：

下面是代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
     <style>
        body {
            margin: 0;
        }

    </style>
</head>
<body onload="init()">
<script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
<script>
    //聲明一些全局變量
    var renderer, camera, scene, geometry, material, mesh;
  
   //初始化場景
    function initScene() {
        scene = new THREE.Scene(); //實例化場景
    }

    //初始化相機
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //實例化相機
        camera.position.set(0, 0, 15);
    }

    //初始化渲染器
    function initRenderer() {
        renderer = new THREE.WebGLRenderer(); //實例化渲染器
        renderer.setSize(window.innerWidth, window.innerHeight); //設置寬和高
        document.body.appendChild(renderer.domElement); //添加到dom
    }
    
    //建立模型
    function initMesh() {
        geometry = new THREE.BoxGeometry( 2, 2, 2 ); //建立幾何體
        material = new THREE.MeshNormalMaterial(); //建立材質

        mesh = new THREE.Mesh( geometry, material ); //建立網格
        scene.add( mesh ); //將網格添加到場景
    }

    //運行動畫
    function animate() {
        requestAnimationFrame(animate); //循環調用函數

        mesh.rotation.x += 0.01; //每幀網格模型的沿x軸旋轉0.01弧度
        mesh.rotation.y += 0.02; //每幀網格模型的沿y軸旋轉0.02弧度

        renderer.render( scene, camera ); //渲染界面
    }

    //初始化函數，頁面加載完成是調用
    function init() {
        initScene();//初始化場景
        initCamera();//初始化相機
        initRenderer();//渲染
     
        initMesh();//建立模型
        animate();//運行動畫
    }
</script>
</body>
</html>
複製代碼

能夠看到，就是進行場景、相機、渲染器三個要素的準備以後就能夠進行模型的建立了，這是一個很簡單的3D效果的例子，更多效果能夠看官網，web開發人員也能夠實現不少複雜的3D效果。

1. three.js入門
2. three.js - (入門四)
3. three.js - (入門一)
4. 【three.js詳解之一】入門篇
5. Three.js入門篇之1 - WebGL on HTML
6. 【轉】three.js詳解之入門篇
7. Three.js 基礎入門
8. three.js 入門案例
9. three.js 場景入門
10. webGL之three.js入門4--ThreeJS Editor入門篇
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。