Three.js初探

時間 2019-12-17

原文原文鏈接

　　WebGL是在瀏覽器中實現三維效果的一套規範，而Three.js是一個WebGL的開源框架，它掩蓋了WebGL不少麻煩的細節。html

1、環境配置

　　引入 three.js文件就能夠了git

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>
</body>
</html>

2、代碼結構

　　在Three.js中，要渲染物體到網頁，咱們須要三個組件：場景(scene)、相機(camera)、和渲染器(renderer)。有了這三個東西，咱們才能使用相機將場景渲染到網頁上去。程序員

1.代碼

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="js/three.js"></script>
</head>
<body>
    <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.CubeGeometry(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 render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>
</html>

2.三大組件（場景、相機、渲染器）

場景：github

在Threejs中場景就只有一種，用THREE.Scene來表示，要構件一個場景也很簡單，只要new一個對象就能夠了，代碼以下：web

var scene = new THREE.Scene();

場景是全部物體的容器，至關於Phaser中的World。canvas

相機：瀏覽器

相機就像人的眼睛同樣，人站在不一樣位置，擡頭或者低頭都可以看到不一樣的景色。app

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

代碼以下：dom

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);//渲染器的畫布掛接到body上

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

3.添加物體到場景中

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

立方體：HREE.CubeGeometry

4.渲染

渲染應該使用渲染器，結合相機和場景來獲得結果畫面。實現這個功能的函數是

renderer.render(scene, camera);

渲染函數的原型以下：

render( scene, camera, renderTarget, forceClear )

各個參數的意義是：

scene：前面定義的場景

camera：前面定義的相機

renderTarget：渲染的目標，默認是渲染到前面定義的render變量中

forceClear：每次繪製以前都將畫布的內容給清除，即便自動清除標誌autoClear爲false，也會清除。

5.渲染循環

渲染有兩種方式：離線渲染、實時渲染。

離線渲染指的是先渲染好一幀一幀的圖片，而後將圖片拼接成動畫。

實時渲染就是不停的對畫面進行渲染，不管畫面是否改變，相似於Phaser的update()。代碼以下：

function ShiShiXuanRan() {
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
    requestAnimationFrame(ShiShiXuanRan);//執行一ShiShiXuanRan
}
ShiShiXuanRan();

【注】：其中一個重要的函數是requestAnimationFrame，這個函數就是讓瀏覽器去執行一次參數中的函數，這樣經過上面render中調用requestAnimationFrame()函數，requestAnimationFrame()函數又讓rander()再執行一次，就造成了咱們一般所說的遊戲循環了。

【注】：requestAnimationFrame()函數實際上能夠放到render函數中的任何一行，而不是說非要放到第一行，requestAnimationFrame函數並非一個return語句，並無退出render函數的功能。 requestAnimationFrame函數表示下一幀將執行render函數，不是立刻執行render函數的意思。它後面的語句仍是會執行的。