Three.js 場景、相機、渲染（01）-有解無憂

前言：本篇主要是three.js的一個介紹，了解WebGL與three.js的關系，以及three.js的四個重要的組建，

文章目錄

- 一、什么是WebGL？
- - 1.1瀏覽器為什么能繪制3D？
  - 1.2webgl能做什么
  - 1.3 WebGL與three.js的關系
  - 1.4 匯入three.js
  - - （1）直接npm
    - （2）單頁面中引入
- 二、四大組建
- - 2.1 場景
  - 2.2 相機
  - - 2.2.1 透視相機
    - 2.2.2 正投影相機
  - 2.3 渲染器
  - - 2.3.1 渲染
    - 2.3.2 實時渲染和離線渲染
  - 2.4 幾何體
- 三、一個栗子

一、什么是WebGL？

WebGL是一項可以在瀏覽器中流暢展示3D模型和場景的一種技術，他使用JavaScript作為編程語言，呼叫瀏覽器支持的3D繪制函式，來實作3D模型和場景的展現，

1.1瀏覽器為什么能繪制3D？

因為瀏覽器實作了OpenGL es的規范，這套規范可以直接使用指令操作顯卡，使顯卡渲染的3D世界，直接反應到瀏覽器中，

1.2webgl能做什么

游戲
家居
虛擬現實
城市地圖
CAD制圖

1.3 WebGL與three.js的關系

three.js是一個封裝好的WebGL庫，他使WebGL的學習更為簡單，

1.4 匯入three.js

（1）直接npm

如果使用了框架，可以npm后再匯入

npm install three --save

在使用的檔案中引入

var THREE = require('three');
//或者
import * as THREE from 'three';

（2）單頁面中引入

首先先在官網下載好最新版本的three.js壓縮包，解壓后在build檔案夾中找到three.js檔案，將它復制到使用的檔案夾下即可，

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

二、四大組建

在three.js中，要渲染物體到網頁中，需要4個組建：場景、相機、渲染器、和幾何體，有了這四樣東西，才能使用相機將場景渲染到網頁上去，

2.1 場景

場景就是所有物體的容器，可以把任何想要顯示的東西，放在場景中的任何位置，

在three.js中場景就只有一種
用THREE.Scene來表示，

構建一個場景：

var scene = new THREE.Scene();

2.2 相機

相機決定了場景中哪個角度的景色會顯示出來，我們最終能夠在瀏覽器中看到的景象，就是相機拍攝出來的，

相機分為兩大類：

透視相機
正投影相機

定義相機：只要設定不同的相機引數，就能讓相機產生不一樣的效果，

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

2.2.1 透視相機

透視相機：透視投影符合人們的心理習慣，即離視點近的物體大，離視點遠的物體小，遠到極點即為消失，成為滅點，

2.2.2 正投影相機

就是遠處和近處的是一樣大，

2.3 渲染器

渲染器，決定了畫家怎么把眼前的場景畫到螢屏上，即渲染器決定了渲染的結果應該畫在頁面的什么元素上，并且以怎樣的方式來繪制，

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

注意：渲染器render的DOMElement元素，表示渲染器中的畫布，所有的渲染都是畫在DOMElement上的，所以這里的appendChild表示將這個domElement掛接在body下面，這樣渲染的結果就能夠在頁面中顯示了，

2.3.1 渲染

渲染應該使用渲染器，結合相機和場景來得到結果畫面，

renderer.render(scene,camera);
//渲染函式的原型
render(scene,camera,renderTarget,forceClear);

scene:前面定義的場景
camera:前面定義的相機
renderTarget:渲染的目標，默認是渲染到前面定義的render變數中
forceClear:每次繪制之前都將畫布的內容清除，即使自動清楚標志autoClear為false，也會清除，

2.3.2 實時渲染和離線渲染

實時渲染：需要不停的對畫面進行渲染，即使畫面中什么也沒有改變，也需要重新渲染，

其中一個重要的函式就是 requestAnimationFrame(),這個函式就是然后瀏覽器去執行一次引數中的函式，再通過引數的函式去呼叫，就可以成為無限回圈了，

離線渲染：事先渲染好一幀一幀的圖片，然后再把圖片拼接成電影，

2.4 幾何體

幾何體，就是要顯示在場景中的物件，

三、一個栗子

一個旋轉的正方體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01</title>
    <script src="three.js"></script>
</head>
<body>
    <script>
        //1.創建場景
        var scene = new THREE.Scene();
        //2.創建相機
        var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
        //3.創建渲染器
        var renderer = new THREE.WebGLRenderer();
        //渲染器的尺寸大小
        renderer.setSize(window.innerWidth,window.innerHeight);
        //將渲染器結果掛載到body中
        document.body.appendChild(renderer.domElement);
        //4.定義一個幾何體
        //var geometry = new THREE.CubeGeometry(1,1,1);  這樣子定義正方體報錯了？？
        var geometry = new THREE.BoxGeometry(1,1,1); //定義一個正方體
        var material = new THREE.MeshBasicMaterial({color:0xff0000}); //定義材質
        //定義物體，即這是最終展現出來的物體
        var cube = new THREE.Mesh(geometry,material); 
        scene.add(cube);    //將物體加到場景里

        //將物體移動到可視位置
        camera.position.z = 5;
        function render(){   //render函式執行一次就會重新繪制一次
            requestAnimationFrame(render);  //不斷去呼叫render這個函式
            cube.rotation.x+=0.01;  //繞x的旋轉+0.01
            cube.rotation.y+=0.01;
            renderer.render(scene,camera);  
        }
        render();
    </script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/257354.html

標籤：其他

上一篇：【藍橋杯省賽JavaB組真題詳解】第五屆藍橋杯省賽真題詳解（2014）

下一篇：最大匹配問題（匈牙利演算法）