Three.js中的材質(zhì)（Material）是實(shí)現(xiàn)引人注目的3D效果的關(guān)鍵組件之一。本篇博客中，我們將深入探討Three.js中的材質(zhì)類型、屬性和用法。

一、什么是Three.js材質(zhì)？

在Three.js中，材質(zhì)是應(yīng)用于幾何體（Geometry）的外觀和紋理的規(guī)則。它們決定了對(duì)象在場(chǎng)景中如何反射光線、顯示顏色、反射環(huán)境等。

Three.js提供了各種類型的材質(zhì)，每種都有不同的特性和用途，使開發(fā)人員能夠根據(jù)需求創(chuàng)建出各種視覺效果。

官方文檔地址

本文源碼地碼 lesson5

二、Three.js的材質(zhì)類型

1. 材質(zhì)類型

• LineBasicMaterial 基礎(chǔ)線條材質(zhì)
• LineDashedMaterial 虛線材質(zhì)
• Material 材質(zhì)的抽象基類
• MeshBasicMaterial 基礎(chǔ)網(wǎng)格材質(zhì)
• MeshDepthMaterial 深度網(wǎng)格材質(zhì)
• MeshDistanceMaterial 網(wǎng)格距離材質(zhì)
• MeshLambertMaterial 非光澤表面的網(wǎng)格材質(zhì)
• MeshMatcapMaterial 網(wǎng)格Matcap材質(zhì)
• MeshNormalMaterial 一種把法向量映射到RGB顏色的材質(zhì)
• MeshPhongMaterial 具有鏡面高光的光澤表面的材質(zhì)
• MeshPhysicalMaterial 物理網(wǎng)格材質(zhì)
• MeshStandardMaterial 標(biāo)準(zhǔn)網(wǎng)格材質(zhì)
• MeshToonMaterial 一種實(shí)現(xiàn)卡通著色的材質(zhì)
• PointsMaterial 點(diǎn)材質(zhì)
• RawShaderMaterial 原始著色器材質(zhì)
• ShaderMaterial 著色器材質(zhì)
• ShadowMaterial 陰影材質(zhì)
• SpriteMaterial 點(diǎn)精靈材質(zhì)

2. 材質(zhì)的共用屬性

下面內(nèi)容來自官方文檔。

（1）.alphaHash : Boolean

啟用alphaHash透明度，這是.transparent或.alphaTest的替代方案。如果不透明度低于隨機(jī)閾值，則不會(huì)渲染材質(zhì)。隨機(jī)化會(huì)引入一些顆粒或噪點(diǎn)，但相較于傳統(tǒng)的Alpha blend方式，避免了透明度引起的深度排序問題。使用TAARenderPass可以有效減少噪點(diǎn)。

（2）.alphaTest : Float

設(shè)置運(yùn)行alphaTest時(shí)要使用的alpha值。如果不透明度低于此值，則不會(huì)渲染材質(zhì)。默認(rèn)值為0。

（3）.alphaToCoverage : Boolean

啟用 Alpha 到覆蓋。只能與啟用 MSAA 的上下文一起使用（即當(dāng)渲染器是通過將抗鋸齒參數(shù)設(shè)置為 true 創(chuàng)建時(shí)）。
啟用此功能將平滑剪裁平面邊緣和 alphaTest 剪裁邊緣的鋸齒。默認(rèn)值為 false。

（4）.blendDst : Integer

blendDst 用于定義在混合（blending）時(shí)目標(biāo)顏色的混合因子。混合是一種用于在渲染時(shí)將對(duì)象的顏色與背景混合在一起的技術(shù)，通常用于實(shí)現(xiàn)半透明效果。

blendDst 控制了混合的目標(biāo)顏色的混合因子，它影響了對(duì)象的像素如何與背景顏色進(jìn)行混合。該屬性通常與 blendSrc 屬性一起使用，后者用于定義源顏色的混合因子。

以下是一些常見的 blendDst 屬性值及其作用：

• THREE.ZeroFactor：混合因子為零，表示目標(biāo)顏色不參與混合。
• THREE.OneMinusSrcAlphaFactor：源顏色的補(bǔ)值與源顏色的 alpha 值相乘。
• THREE.OneFactor：混合因子為一，表示目標(biāo)顏色完全參與混合。
• THREE.DstColor：使用目標(biāo)顏色的顏色值作為混合因子。
• THREE.DstAlphaFactor：使用目標(biāo)顏色的 alpha 值作為混合因子。

例如，如果你想要實(shí)現(xiàn)標(biāo)準(zhǔn)的透明混合效果，可以將 blendDst 設(shè)置為 THREE.OneMinusSrcAlphaFactor，這樣目標(biāo)顏色的 alpha 值將與源顏色的 alpha 值相乘，實(shí)現(xiàn)了標(biāo)準(zhǔn)的透明混合效果。

material.blending = THREE.CustomBlending;
material.blendEquation = THREE.AddEquation;
material.blendSrc = THREE.SrcAlphaFactor;
material.blendDst = THREE.OneMinusSrcAlphaFactor;
material.transparent = true; // 啟用透明度
material.opacity = 0.6; // 設(shè)置透明度為 0.5

官網(wǎng)示例可以通過實(shí)時(shí)調(diào)節(jié)參數(shù)方式看到更明顯的透明設(shè)置效果：

（5）.blendDstAlpha : Integer

.blendDst的透明度。 默認(rèn)值為 null.

（6）.blendEquation : Integer

使用混合時(shí)所采用的混合方程式。默認(rèn)值為AddEquation。 必須將材質(zhì)的 blending 設(shè)置為 CustomBlending才能生效，如下可選值：

1. THREE.AddEquation：

• 這是標(biāo)準(zhǔn)的混合方程式，它將源顏色和目標(biāo)顏色簡(jiǎn)單相加。這是最常用的混合方程式之一，通常用于實(shí)現(xiàn)透明度混合效果。

2. THREE.SubtractEquation：

• 這種混合方程式將源顏色減去目標(biāo)顏色。這通常用于實(shí)現(xiàn)顏色反轉(zhuǎn)效果。

3. THREE.ReverseSubtractEquation：

• 這種混合方程式將目標(biāo)顏色減去源顏色。與 THREE.SubtractEquation 相反，這也可以用于實(shí)現(xiàn)顏色反轉(zhuǎn)效果。

4. THREE.MinEquation：

• 這種混合方程式比較源顏色和目標(biāo)顏色的每個(gè)分量，并將結(jié)果中的每個(gè)分量設(shè)置為兩者中較小的那個(gè)。這通常用于實(shí)現(xiàn)深度測(cè)試時(shí)的混合效果。

5. THREE.MaxEquation：

• 這種混合方程式與 THREE.MinEquation 相反，它比較源顏色和目標(biāo)顏色的每個(gè)分量，并將結(jié)果中的每個(gè)分量設(shè)置為兩者中較大的那個(gè)。這也可以用于實(shí)現(xiàn)深度測(cè)試時(shí)的混合效果。

這些混合方程式可以根據(jù)需要在 Three.js 中的材質(zhì)（Material）對(duì)象中使用，以實(shí)現(xiàn)不同的混合效果。

（7）.blendEquationAlpha : Integer

.blendEquation 的透明度. 默認(rèn)值為 null.

（8）.blending : Blending

在使用此材質(zhì)顯示對(duì)象時(shí)要使用何種混合。
必須將其設(shè)置為CustomBlending才能使用自定義blendSrc, blendDst 或者 [page:Constant blendEquation]。 混合模式所有可能的取值請(qǐng)參閱constants。默認(rèn)值為NormalBlending。

（9）.blendSrc : Integer

混合源。默認(rèn)值為SrcAlphaFactor。
必須將材質(zhì)的blending設(shè)置為CustomBlending才能生效。

（10）.blendSrcAlpha : Integer

.blendSrc的透明度。 默認(rèn)值為 null.

（11）.clipIntersection : Boolean

更改剪裁平面的行為，以便僅剪切其交叉點(diǎn)，而不是它們的并集。默認(rèn)值為 false。

（12）.clippingPlanes : Array

用戶定義的剪裁平面，在世界空間中指定為THREE.Plane對(duì)象。這些平面適用于所有使用此材質(zhì)的對(duì)象。空間中與平面的有符號(hào)距離為負(fù)的點(diǎn)被剪裁（未渲染）。 這需要WebGLRenderer.localClippingEnabled為true。 示例請(qǐng)參閱WebGL / clipping /intersection。默認(rèn)值為 null。

（13）.clipShadows : Boolean

定義是否根據(jù)此材質(zhì)上指定的剪裁平面剪切陰影。默認(rèn)值為 false。

（14）.colorWrite : Boolean

是否渲染材質(zhì)的顏色。 這可以與網(wǎng)格的renderOrder屬性結(jié)合使用，以創(chuàng)建遮擋其他對(duì)象的不可見對(duì)象。默認(rèn)值為true。

（15）.defines : Object

注入shader的自定義對(duì)象。 以鍵值對(duì)形式的對(duì)象傳遞，{ MY_CUSTOM_DEFINE: '' , PI2: Math.PI * 2 }。 這些鍵值對(duì)在頂點(diǎn)和片元著色器中定義。默認(rèn)值為undefined。

（16）.depthFunc : Integer

使用何種深度函數(shù)。默認(rèn)為L(zhǎng)essEqualDepth。

（17）.depthTest : Boolean

是否在渲染此材質(zhì)時(shí)啟用深度測(cè)試。默認(rèn)為 true。

（18）.depthWrite : Boolean

渲染此材質(zhì)是否對(duì)深度緩沖區(qū)有任何影響。默認(rèn)為true。

在繪制2D疊加時(shí)，將多個(gè)事物分層在一起而不創(chuàng)建z-index時(shí)，禁用深度寫入會(huì)很有用。

（19）.forceSinglePass : Boolean

決定雙面透明的東西是否強(qiáng)制使用單通道渲染，默認(rèn)為false。

為了減少一些半透明物體的渲染錯(cuò)誤，此引擎調(diào)用兩次繪制來渲染渲染雙面透明的東西。 但是此方案可能會(huì)導(dǎo)致在某些情況下使繪制調(diào)用次數(shù)翻倍，例如渲染一些平面的植物例如草精靈之類的。 在這些情況下，將forceSinglePass設(shè)置為true來使用單通道渲染來避免性能問題。

（20）.isMaterial : Boolean

檢查這個(gè)對(duì)象是否為材質(zhì)Material的只讀標(biāo)記.

（21）.stencilWrite : Boolean

是否對(duì)模板緩沖執(zhí)行模板操作，如果執(zhí)行寫入或者與模板緩沖進(jìn)行比較，這個(gè)值需要設(shè)置為true。默認(rèn)為false。

（22）.stencilWriteMask : Integer

寫入模板緩沖區(qū)時(shí)所用的位元遮罩，默認(rèn)為0xFF。

（23）.stencilFunc : Integer

使用模板比較時(shí)所用的方法，默認(rèn)為AlwaysStencilFunc。在模板函數(shù) constants 中查看可用的值

（24）.stencilRef : Integer

在進(jìn)行模板比較或者模板操作的時(shí)候所用的基準(zhǔn)值，默認(rèn)為0。

（25）.stencilFuncMask : Integer

與模板緩沖進(jìn)行比較時(shí)所使用的位元遮罩，默認(rèn)為0xFF

（26）.stencilFail : Integer

當(dāng)比較函數(shù)沒有通過的時(shí)候要執(zhí)行的模板操作，默認(rèn)為KeepStencilOp。

（27）.stencilZFail : Integer

當(dāng)比較函數(shù)通過了但是深度檢測(cè)沒有通過的時(shí)候要執(zhí)行的模板操作， 默認(rèn)為KeepStencilOp。

（28）.stencilZPass : Integer

當(dāng)比較函數(shù)和深度檢測(cè)都通過時(shí)要執(zhí)行的模板操作，默認(rèn)為KeepStencilOp。

（29）.id : Integer

此材質(zhì)實(shí)例的唯一編號(hào)。

（30）.name : String

對(duì)象的可選名稱（不必是唯一的）。默認(rèn)值為空字符串。

（31）.needsUpdate : Boolean

指定需要重新編譯材質(zhì)。

（32）.opacity : Float

在0.0 - 1.0的范圍內(nèi)的浮點(diǎn)數(shù)，表明材質(zhì)的透明度。值0.0表示完全透明，1.0表示完全不透明。
如果材質(zhì)的transparent屬性未設(shè)置為true，則材質(zhì)將保持完全不透明，此值僅影響其顏色。 默認(rèn)值為1.0。

（33）.polygonOffset : Boolean

是否使用多邊形偏移。默認(rèn)值為false。這對(duì)應(yīng)于WebGL的GL_POLYGON_OFFSET_FILL功能。

（34）.polygonOffsetFactor : Integer

設(shè)置多邊形偏移系數(shù)。默認(rèn)值為0。

（35）.polygonOffsetUnits : Integer

設(shè)置多邊形偏移單位。默認(rèn)值為0。

（36）.precision : String

重寫此材質(zhì)渲染器的默認(rèn)精度?？梢允?highp", “mediump” 或 “l(fā)owp”。默認(rèn)值為null。

（37）.premultipliedAlpha : Boolean

是否預(yù)乘alpha（透明度）值。有關(guān)差異的示例，請(qǐng)參閱WebGL / Materials / Physical / Transmission。 默認(rèn)值為false。

（38）.dithering : Boolean

是否對(duì)顏色應(yīng)用抖動(dòng)以消除條帶的外觀。默認(rèn)值為 false。

（39）.shadowSide : Integer

定義投影的面。設(shè)置時(shí)，可以是THREE.FrontSide, THREE.BackSide, 或Materials。默認(rèn)值為 null。
如果為null， 則面投射陰影確定如下：

（40）.side : Integer

定義將要渲染哪一面 - 正面，背面或兩者。 默認(rèn)為THREE.FrontSide。其他選項(xiàng)有THREE.BackSide 和 THREE.DoubleSide。

（41）.toneMapped : Boolean

定義這個(gè)材質(zhì)是否會(huì)被渲染器的toneMapping設(shè)置所影響，默認(rèn)為 true 。

（42）.transparent : Boolean

定義此材質(zhì)是否透明。這對(duì)渲染有影響，因?yàn)橥该鲗?duì)象需要特殊處理，并在非透明對(duì)象之后渲染。
設(shè)置為true時(shí)，通過設(shè)置材質(zhì)的opacity屬性來控制材質(zhì)透明的程度。
默認(rèn)值為false。

（43）.type : String

值是字符串’Material’。

（44）.uuid : String

此材質(zhì)實(shí)例的UUID，會(huì)自動(dòng)分配，不應(yīng)該被更改。

（45）.version : Integer

開始為0，會(huì)記錄 .needsUpdate : Boolean設(shè)置為true的次數(shù)。

（46）.vertexColors : Boolean

是否使用頂點(diǎn)著色。默認(rèn)值為false。 此引擎支持RGB或者RGBA兩種頂點(diǎn)顏色，取決于緩沖 attribute 使用的是三分量（RGB）還是四分量（RGBA）。

（47）.visible : Boolean

此材質(zhì)是否可見。默認(rèn)為true。

（48）.userData : Object

自定義屬性，允許開發(fā)者將任意數(shù)據(jù)附加到 Three.js 對(duì)象上。

3. 材質(zhì)的共用方法

• .clone() 克隆新材質(zhì)；
• .copy() 復(fù)制參數(shù)；
• .dispose() 銷毀材質(zhì)，釋放資源；
• .onBeforeCompile() 編譯shader前的回調(diào)；
• .customProgramCacheKey () : 定義 onBeforeCompile 中的配置項(xiàng)；
• .setValues(values:Object)：設(shè)置多個(gè)屬性值；
• .toJSON(meta:Object)：對(duì)象序列化。

三、材質(zhì)的使用

1. 源碼示例

下面是一個(gè)簡(jiǎn)單的例子，演示了如何創(chuàng)建一個(gè)使用MeshStandardMaterial的紅色立方體：

// 引入Three.js庫(kù)的全部功能，并將其命名為THREE
import * as THREE from 'three';
// 引入交互控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';


// 創(chuàng)建一個(gè)場(chǎng)景
const scene = new THREE.Scene();

// 創(chuàng)建一個(gè)透視相機(jī)，參數(shù)分別為視野角度、視口寬高比、近端距離、遠(yuǎn)端距離
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 創(chuàng)建一個(gè)WebGL渲染器
const renderer = new THREE.WebGLRenderer();

// 設(shè)置渲染器的大小為窗口的寬度和高度
renderer.setSize(window.innerWidth, window.innerHeight);

// 將渲染器的canvas元素添加到HTML文檔中的body標(biāo)簽中
document.body.appendChild(renderer.domElement);


//------------- 下面放創(chuàng)建幾何體并創(chuàng)建材質(zhì)的代碼 -----------------------
const geometry = new THREE.BoxGeometry(10, 10, 10);
// 創(chuàng)建材質(zhì)
const material = new THREE.MeshStandardMaterial({color: 0xff0000});

// 創(chuàng)建網(wǎng)格
const myGeometry = new THREE.Mesh(geometry, material);
scene.add(myGeometry);

//--------------- 創(chuàng)建幾何體代碼結(jié)束 --------------------------

// 創(chuàng)建一個(gè)平行光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize(); // 設(shè)置光源的方向
scene.add(directionalLight);

const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 40;


// 創(chuàng)建一個(gè)動(dòng)畫函數(shù)
function animate() {
    // 請(qǐng)求下一幀動(dòng)畫
    requestAnimationFrame(animate);

    // 更新 OrbitControls
    controls.update();
    myGeometry.rotation.y += 0.01;
    myGeometry.rotation.z += 0.01;


    // 渲染場(chǎng)景
    renderer.render(scene, camera);
}

animate()

2. 運(yùn)行效果

通過修改材質(zhì)，可以看到不同材質(zhì)在平行光源下的表現(xiàn)效果。

3. 部分材質(zhì)的展示效果

（1）LineBasicMaterial

只能渲染基本的線條，不會(huì)產(chǎn)生光照、陰影或其他 3D 效果。

const material = new THREE.LineBasicMaterial( {
    color: 0x00ff00,
    linewidth: 1,
    linecap: 'round', //ignored by WebGLRenderer
    linejoin:  'round' //ignored by WebGLRenderer
} );

（2）LineDashedMaterial

// 引入Three.js庫(kù)的全部功能，并將其命名為THREE
import * as THREE from 'three';
// 引入交互控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';


// 創(chuàng)建一個(gè)場(chǎng)景
const scene = new THREE.Scene();

// 創(chuàng)建一個(gè)透視相機(jī)，參數(shù)分別為視野角度、視口寬高比、近端距離、遠(yuǎn)端距離
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 創(chuàng)建一個(gè)WebGL渲染器
const renderer = new THREE.WebGLRenderer();

// 設(shè)置渲染器的大小為窗口的寬度和高度
renderer.setSize(window.innerWidth, window.innerHeight);

// 將渲染器的canvas元素添加到HTML文檔中的body標(biāo)簽中
document.body.appendChild(renderer.domElement);


//------------- 下面放創(chuàng)建幾何體并創(chuàng)建材質(zhì)的代碼 -----------------------
const points = [];
points.push(new THREE.Vector3(-10, 0, 0));
points.push(new THREE.Vector3(0, 10, 0));
points.push(new THREE.Vector3(10, 0, 0));

const geometry = new THREE.BufferGeometry().setFromPoints(points);


// 創(chuàng)建材質(zhì)
const material = new THREE.LineDashedMaterial({
    color: 0x00ff00,
    dashSize: 5,
    gapSize: 3
});

// 創(chuàng)建線條對(duì)象
const line = new THREE.Line(geometry, material);
line.computeLineDistances(); // 計(jì)算線條的距離，用于虛線效果

scene.add(line);

//--------------- 創(chuàng)建幾何體代碼結(jié)束 --------------------------

// 創(chuàng)建一個(gè)平行光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 3);
directionalLight.position.set(1, 1, 1).normalize(); // 設(shè)置光源的方向
scene.add(directionalLight);

const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 40;


// 創(chuàng)建一個(gè)動(dòng)畫函數(shù)
function animate() {
    // 請(qǐng)求下一幀動(dòng)畫
    requestAnimationFrame(animate);

    // 更新 OrbitControls
    controls.update();
    line.rotation.y += 0.01;
    line.rotation.z += 0.01;


    // 渲染場(chǎng)景
    renderer.render(scene, camera);
}

animate()

（3）MeshBasicMaterial

MeshBasicMaterial 是一種非?；A(chǔ)的材質(zhì)，它不會(huì)受到光照的影響，因此看起來沒有立體感。
MeshBasicMaterial 一些屬性：

• alphaMap：灰度紋理 ， 控制整個(gè)表面的不透明度；
• aoMap：該紋理的紅色通道用作環(huán)境遮擋貼圖 ；
• aoMapIntensity：環(huán)境遮擋效果的強(qiáng)度 ；
• color：材質(zhì)的顏色；
• combine：將表面顏色的結(jié)果與環(huán)境貼圖（如果有）結(jié)合起來；
• envMap：環(huán)境貼圖；
• .fog：是否受霧影響
• .lightMap：光照貼圖；
• .lightMapIntensity：烘焙光的強(qiáng)度；
• .map：顏色貼圖；
• .reflectivity：環(huán)境貼圖對(duì)表面的影響程度；
• .refractionRatio：空氣折射率除以材質(zhì)的折射率；
• .specularMap：材質(zhì)使用的高光貼圖；
• .wireframe：將幾何體渲染為線框；
• .wireframeLinecap：定義線兩端的外觀；
• .wireframeLinejoin：定義連接節(jié)點(diǎn)的樣式；
• .wireframeLinewidth：控制線框?qū)挾取?/li>

const geometry = new THREE.SphereGeometry(20, 20, 20);

const textureLoader = new THREE.TextureLoader();
const alphaTexture = textureLoader.load('../../images/paper.jpg');
// 創(chuàng)建材質(zhì)
const material = new THREE.MeshBasicMaterial({
    alphaMap: alphaTexture,
    map: alphaTexture,
    color: 0x00ff00,
    transparent: true, // 設(shè)置為透明
    opacity: 0.9 // 設(shè)置透明度
});

const sphere = new THREE.Mesh(geometry, material);

scene.add(sphere);
const cube2 = sphere.clone();
cube2.position.x = 14;
scene.add(cube2);

（4）MeshLambertMaterial

一種非光澤表面的材質(zhì)，沒有鏡面高光。

const geometry = new THREE.SphereGeometry(20, 20, 20);

const textureLoader = new THREE.TextureLoader();
const alphaTexture = textureLoader.load('../../images/stone.jpg');
// 創(chuàng)建材質(zhì)
const material = new THREE.MeshLambertMaterial({
    alphaMap: alphaTexture,
    alpha: 0.6,
    color: 0x00ff00,
    transparent: true
});
material.side = THREE.DoubleSide;

const sphere = new THREE.Mesh(geometry, material);

scene.add(sphere);
const cube2 = sphere.clone();
cube2.position.x = 14;
scene.add(cube2);

（5）MeshMatcapMaterial

一種把法向量映射到RGB顏色的材質(zhì)。

const geometry = new THREE.SphereGeometry(20, 20, 20);

// 創(chuàng)建材質(zhì)
const material = new THREE.MeshNormalMaterial({
    color: 0x00ff00,
    transparent: false,
    // wireframe: true
});
material.side = THREE.DoubleSide;

const sphere = new THREE.Mesh(geometry, material);
sphere.position.x = -20

scene.add(sphere);

（6）MeshPhongMaterial

一種用于具有鏡面高光的光澤表面的材質(zhì)。

const geometry = new THREE.SphereGeometry(20, 20, 20);

const textureLoader = new THREE.TextureLoader();
const alphaTexture = textureLoader.load('../../images/metal.jpg');
// 創(chuàng)建材質(zhì)
const material = new THREE.MeshPhongMaterial({
    color: 0xFFFFFF,
    bumpScale: 1,
    bumpMap: alphaTexture,  // 設(shè)置凹凸貼圖
    combine: THREE.MixOperation
});
material.side = THREE.DoubleSide;

const sphere = new THREE.Mesh(geometry, material);

scene.add(sphere);

四、材質(zhì)使用實(shí)例

下面代碼創(chuàng)建一個(gè)球體，并將其設(shè)置為具有環(huán)境貼圖的場(chǎng)景背景。通過環(huán)境貼圖，我們可以模擬出球體在真實(shí)環(huán)境中的反射效果，使其看起來更加逼真。

// 引入Three.js庫(kù)的全部功能，并將其命名為THREE
import * as THREE from 'three';
// 引入交互控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';

// 創(chuàng)建一個(gè)場(chǎng)景
const scene = new THREE.Scene();

// 創(chuàng)建一個(gè)透視相機(jī)，參數(shù)分別為視野角度、視口寬高比、近端距離、遠(yuǎn)端距離
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 創(chuàng)建一個(gè)WebGL渲染器
const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});

// 設(shè)置渲染器的大小為窗口的寬度和高度
renderer.setSize(window.innerWidth, window.innerHeight);

// 將渲染器的canvas元素添加到HTML文檔中的body標(biāo)簽中
document.body.appendChild(renderer.domElement);

// 加載材質(zhì)
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('../../images/house.jpg');
texture.mapping = THREE.EquirectangularReflectionMapping;

// 設(shè)置場(chǎng)景的背景為環(huán)境貼圖
scene.background = texture;

//------------- 下面放創(chuàng)建幾何體并創(chuàng)建材質(zhì)的代碼 -----------------------
const geometry = new THREE.SphereGeometry(15, 15, 15);

// 創(chuàng)建材質(zhì)
const material = new THREE.MeshBasicMaterial({
    envMap: texture
});

const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

//--------------- 創(chuàng)建幾何體代碼結(jié)束 --------------------------

// 創(chuàng)建一個(gè)平行光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
directionalLight.position.set(1, 0, 0).normalize(); // 設(shè)置光源的方向
scene.add(directionalLight);

const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 40;

// 創(chuàng)建一個(gè)動(dòng)畫函數(shù)
function animate() {
    // 請(qǐng)求下一幀動(dòng)畫
    requestAnimationFrame(animate);
    // 更新 OrbitControls
    controls.update();


    // 渲染場(chǎng)景
    renderer.render(scene, camera);
}

animate()

效果：
文章來源地址http://www.zghlxwxcb.cn/news/detail-833062.html

到了這里，關(guān)于Three.JS教程5 threejs中的材質(zhì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！