Three.js繪制基礎(chǔ)3D圖形的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下Three.js繪制基礎(chǔ)3D圖形的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

目前創(chuàng)新互聯(lián)公司已為上1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、武宣網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

一、 前言

Three.js 是一款 webGL（3D繪圖標(biāo)準(zhǔn)，在此不贅述）引擎，可以運(yùn)行于所有支持 webGL 的瀏覽器。Three.js 封裝了 webGL 底層的 API ，為我們提供了高級(jí)的開發(fā)接口，可以使用簡(jiǎn)單的代碼去實(shí)現(xiàn) 3D 渲染。（官網(wǎng)：https://threejs.org/）

二、 為什么要選擇Three.js？

Three.js 作為原生 web3D 引擎，對(duì)插件式 web3D 引擎的優(yōu)勢(shì)不言而喻：不需要安裝插件、在移動(dòng)端支持好。

Three.js 與其他原生 web3D 引擎對(duì)比：

• Babylon.js：一個(gè)強(qiáng)大的 3D 游戲引擎，由 Microsoft 的員工 David Cathue 主導(dǎo)開發(fā)。和 Three.js 相比，three.js 更傾向于動(dòng)畫，而 Babylon.js 則更適合游戲開發(fā)。

• PhiloGL：增加了額外的功能幫助你可以使用本地的 WebGL ，這個(gè) WebGL 的接口不是百分之百的被封裝好了的，這使得 PhiloGL 上手難度較高。

• SceneJS：一個(gè)開源的 JavaScript 3D 引擎，特別適合需要高精度細(xì)節(jié)的模型需求，比如工程學(xué)和醫(yī)學(xué)上常用的高精度模型。

• CopperLicht：一個(gè)“商業(yè)級(jí)別的 WebGL 3D 引擎和編輯器”，你可以免費(fèi)使用，但是要想獲得未壓縮的完整版帶支持文檔的源碼和其他服務(wù)，則需要購(gòu)買授權(quán)。

相對(duì)這些 web3D 引擎，Three.js 的還有以下幾點(diǎn)優(yōu)勢(shì)：

• 開發(fā)和維護(hù)比較活躍；

• 文檔齊全，案例豐富，易于學(xué)習(xí)；

• 設(shè)計(jì)靈活、方便拓展以及增加新的特性；

我們可以根據(jù)自己的需要去選擇web3D引擎。

三、 開始Three.js

1、 引導(dǎo)

在開始我們的第一個(gè) 3D 程序之前，我們需要了解 Three.js 的一些基礎(chǔ)，以下是 Three.js 制作 3D 的五要素：

1、渲染器（render）

我們可以把渲染器想想成為一個(gè)畫布，我們需要在這個(gè)畫布上去畫出我們需要展示的東西。

2、場(chǎng)景（scene）

相當(dāng)于一個(gè)空間，我們需要將展示的東西放在這個(gè)空間里，然后再在畫布上繪制出來。

3、照相機(jī)（camera）

相當(dāng)于眼睛，我們想要看到物體，就需要眼睛去看。

4、光源（light）

物體需要光照才能看見，不然就是漆黑一片（但是在某些情況下展示物體不需要光源）。

5、物體（object）

我們想要表現(xiàn)的內(nèi)容，會(huì)有形狀和材質(zhì)屬性。

了解了五要素之后，就可以開始寫我們的代碼了。

2、 創(chuàng)建渲染器

首先，我們創(chuàng)建一個(gè)渲染器。創(chuàng)建渲染器有兩種方式：

a. 在 html 上寫出 canvas 元素

<canvas id="mainCanvas" width="600px" height="450px" ></canvas>
然后創(chuàng)建渲染器時(shí)綁定此元素
var renderer = new THREE.WebGLRenderer({
 canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(“#000”); // 設(shè)置渲染器背景為黑色

b. html 上不創(chuàng)建 canvas 元素，而是使用普通的元素作為容器

<div id="mainCanvas"  ></div>
然后創(chuàng)建渲染器，放入容器中
var canvasContainer = document.getElementById('mainCanvas');
var width = canvasContainer.clientWidth; //獲取畫布的寬
var height = canvasContainer.clientHeight; //獲取畫布的高
var renderer = new THREE.WebGLRenderer({
 antialias: true //抗鋸齒開
});
renderer.setSize(width, height); //設(shè)置渲染器的寬和高
renderer.setClearColor(0x000000); //設(shè)置渲染器的背景顏色為黑色
var canvas = renderer.domElement; //獲取渲染器的畫布元素
canvasContainer.appendChild(canvas); //將畫布寫入html元素中

這樣，我們的渲染器就創(chuàng)建成功了。創(chuàng)建渲染器時(shí)，還可以設(shè)置多個(gè)屬性，比如抗鋸齒、透明度等等，詳見 three.js 官方文檔。

3、 創(chuàng)建場(chǎng)景

渲染器創(chuàng)建之后，我們?cè)賱?chuàng)建場(chǎng)景，準(zhǔn)備將我們需要繪制的東西放入場(chǎng)景。

var scene = new THREE.Scene();

4、 創(chuàng)建照相機(jī)

照相機(jī)常用的有兩種，一種叫正投影相機(jī)：

THREE.OrthographicCamera( left, right, top, bottom, near, far )；

下圖為該照相機(jī)的視野：

一種叫做透視照相機(jī)：

THREE.PerspectiveCamera( fov, aspect, near, far ) ;

下圖為該照相機(jī)的視野：

下圖為兩個(gè)照相機(jī)展示效果的對(duì)比：

**左邊為正投照相機(jī)，遠(yuǎn)近大小都一樣；右邊為透視照相機(jī)，遠(yuǎn)小近大，更接近于人眼觀察物體的感覺。**

在此以正投照相舉例：

var camera = new THREE.OrthographicCamera(-6, 6, 4.5, -4.5, 0, 50); //創(chuàng)建照相機(jī)
camera.position.set(35, 15, 25); //設(shè)置照相機(jī)的位置
camera.lookAt(new THREE.Vector3(0, 0, 0)); //設(shè)置照相機(jī)面向(0,0,0)坐標(biāo)觀察

照相機(jī)默認(rèn)坐標(biāo)為(0,0,0);

默認(rèn)面向?yàn)檠貁軸向里觀察;

5、 創(chuàng)建光源

常用光源有：

1、平行光(DirectionalLight)，效果類似太陽(yáng)光

DirectionalLight ( color, intensity )

color — 光源顏色的RBG數(shù)值。

intensity — 光強(qiáng)的數(shù)值。

2、點(diǎn)光源(PointLight)，效果類似燈泡

PointLight ( color, intensity, distance, decay )

color — 光源顏色的RBG數(shù)值。

intensity — 光強(qiáng)的數(shù)值。

distance -- 光強(qiáng)為0處到光源的距離，0表示無窮大。

decay -- 沿著光照距離的衰退量。

3、聚光光源(SpotLight)，效果類似聚光燈

SpotLight ( color, intensity, distance, angle, penumbra, decay )

color — 光源顏色的RBG數(shù)值。

intensity — 光強(qiáng)的數(shù)值。

distance -- 光強(qiáng)為0處到光源的距離，0表示無窮大。

angle -- 光線散射角度，大為Math.PI/2。

penumbra -- 聚光錐的半影衰減百分比。在0和1之間的值。默認(rèn)為0。

decay -- 沿著光照距離的衰退量。

在此以點(diǎn)光源舉例：

var light = new THREE.PointLight(0xffffff, 1, 100); //創(chuàng)建光源
light.position.set(12, 15, 10); //設(shè)置光源的位置
scene.add(light); //在場(chǎng)景中添加光源

6、 創(chuàng)建物體

制作物體的方法是 Mesh：

new THREE.Mesh(Geometry, Material);

Geometry 為物體的形狀，Material 為物體的材質(zhì)；

1、形狀(Geometry)

three.js 給出了很多方法去生成固定的形狀，比如長(zhǎng)方體(BoxGeometry)、球體(SphereGeometry)、圓形(CircleGeometry)等等。還有根據(jù)坐標(biāo)去生成具體形狀的方法，可以借助第三方建模軟件建模之后引入，轉(zhuǎn)換為坐標(biāo)后再生成，就可以做比較復(fù)雜的形狀了，比如人臉、汽車等等。

在此以長(zhǎng)方體為例生成形狀：

//設(shè)置正方體寬度，高度，深度分別為5,5,5
var geometry = new THREE.BoxGeometry (5, 5, 5);

2、材質(zhì)(Material)

材質(zhì)就像是物體的皮膚，決定物體外表的樣子，例如物體的顏色，看起來是否光滑，是否有貼圖等等。

常用材質(zhì)有：

·網(wǎng)格基礎(chǔ)材質(zhì)(MeshBasicMaterial)

該材質(zhì)不受光照的影響，不需要光源即可顯示出來，設(shè)置顏色后，各個(gè)面都是同一個(gè)顏色。

·網(wǎng)格法向材質(zhì)(MeshNormalMaterial)

該材質(zhì)不受光照的影響，不需要光源即可顯示出來，并且每個(gè)方向的面的顏色都不同，同但一個(gè)方向的面顏色是相同的，

該材質(zhì)一般用于調(diào)試。

·網(wǎng)格朗博材質(zhì)(MeshLambertMaterial)

該材質(zhì)會(huì)受到光照的影響，沒有光源時(shí)不會(huì)顯示出來，用于創(chuàng)建表面暗淡，不光亮的物體。

·網(wǎng)格 Phong 材質(zhì)(MeshPhongMaterial)

該材質(zhì)會(huì)受到光照的影響，沒有光源時(shí)不會(huì)顯示出來，用于創(chuàng)建光亮的物體。

在此以網(wǎng)格 Phong 材質(zhì)為例創(chuàng)建材質(zhì)：

var material = new THREE.MeshPhongMaterial({
  color: "yellow" //設(shè)置顏色為yellow
});

創(chuàng)建形狀和材質(zhì)之后，就可以創(chuàng)建該物體了：

//創(chuàng)建物體
var cube = new THREE.Mesh(geometry, material);

7、 渲染畫布

通過以上步驟，我們已經(jīng)有了渲染器(renderer)、場(chǎng)景(scene)、照相機(jī)(camera)、光源(light)和物體(cube)，此時(shí)我們需要將光源和物體加入場(chǎng)景中：

scene.add(light);
scene.add(cube);

然后再使用渲染器將場(chǎng)景和照相機(jī)渲染出來：

renderer.render(scene, camera);

效果如下圖：

四、 結(jié)束語(yǔ)

在以上內(nèi)容中，只寫到了 Three.js 中提供的基礎(chǔ)功能，還有很多高級(jí)的功能需要大家去探索。希望大家看完這篇文章后能對(duì) Three.js 有一個(gè)初步的了解，并能夠使用 Three.js 繪制出基礎(chǔ)的 3D 圖形。

大家可以去 Three.js 官網(wǎng)的 examples 中看看，這里面都是一些很優(yōu)秀和典型的 examples，并且還有代碼可以下載，大家可以去研究探索一番。

在此附上幾個(gè)精彩的例子供大家欣賞：

以上是“Three.js繪制基礎(chǔ)3D圖形的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站題目：Three.js繪制基礎(chǔ)3D圖形的示例分析-創(chuàng)新互聯(lián)
文章出自：http://muchs.cn/article42/dddchc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、ChatGPT、App開發(fā)、企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)