Three.js貼圖效果一覽

理貼圖（Textures）字面意思就是給幾何體對象貼上不同的紋理圖！好比于我們每天選擇穿不同的衣服，我們穿不同的衣服帶來的感官會有很大變化！同理幾何體不同貼圖的視覺效果也會有千差萬別。紋理貼圖是 Three.js一個很重要的內(nèi)容，掌握了紋理貼圖可以讓3d效果產(chǎn)生質(zhì)的飛躍。
那現(xiàn)在就讓我們進入正題吧！go!go!go!

貼圖的重要性

如果沒有紋理貼圖，我們看到的3d物體將會是很糟糕的！例如下面這個最基礎(chǔ)貼圖例子。

//創(chuàng)建一個球體幾何對象
const circlegeometry=new THREE.SphereBufferGeometry(0.5, 16, 16)
//創(chuàng)建一個立方體幾何對象Geometry
const geometry=new THREE.BoxGeometry(1, 1, 1);
//創(chuàng)建一個圓環(huán)幾何對象
const tourGeometry=new THREE.TorusBufferGeometry(0.3, 0.15, 16, 32);

// 加載貼圖
let textureLoader=new THREE.TextureLoader();
const texture=textureLoader.load('/three/grass.png');
//材質(zhì)對象Material
const material=new THREE.MeshBasicMaterial({
    // color: 0xb9d3ff
});
material.map=texture;

不同材質(zhì)對象的貼圖效果

不同的人穿同樣的衣服顯然是不合適的，好比一個140kg的胖子穿s碼的T恤，那肯定是穿不下的！紋理貼圖也是一樣的道理，它并不是適合每種「材質(zhì)對象（Material）」。材質(zhì)對象按大類分可分為五種。如下

點材質(zhì)
線材質(zhì)
網(wǎng)格材質(zhì)
精靈Sprite材質(zhì)
自定義著色器材質(zhì)

「網(wǎng)絡(luò)（Mesh）材質(zhì)」顧名思義，網(wǎng)格類模型才會使用的材質(zhì)對象。那現(xiàn)在就來看看它帶來的貼圖效果吧。

MeshBasicMaterial

網(wǎng)格基礎(chǔ)材質(zhì)，不受帶有方向光源影響，沒有棱角感。使用示例如下：

//材質(zhì)對象MeshBasicMaterial
const material=new THREE.MeshBasicMaterial({
    color: 0x00ff00
    transparent:true,
    opacity:.5
});
material.map=texture;
material.wireframe=true;

材質(zhì)常用屬性簡介：color材質(zhì)顏色，比如藍(lán)色0x0000ff；wireframe將幾何圖形渲染為線框。默認(rèn)值為false；opacity透明度設(shè)置，0表示完全透明，1表示完全不透明；transparent是否開啟透明，默認(rèn)false

MeshNormalMaterial

網(wǎng)格法向量材質(zhì),是一種比較特殊的材質(zhì)。它使得物體的每一個面的顏色都從該面向外指的法向量計算得到的。

//材質(zhì)對象MeshNormalMaterial
const material=new THREE.MeshNormalMaterial({
    // color: 0x00ff00,
    // transparent:true,
    // opacity:.5
});
// material.map=texture;
// material.wireframe=true;
material.flatShading=true

材質(zhì)常用屬性簡介：flatShading可以讓每個小平面更加的平坦突出

MeshMatcapMaterial

由一個材質(zhì)捕捉（MatCap，或光照球（Lit Sphere））紋理所定義，其編碼了材質(zhì)的顏色與明暗。由于mapcap圖像文件編碼了烘焙過的光照，因此MeshMatcapMaterial 不對燈光作出反應(yīng)。

const texture=textureLoader.load('/three/5B4CBC_B59AF2_9B84EB_8F78E4.png');
//材質(zhì)對象Material
const material=new THREE.MeshMatcapMaterial({
});
material.matcap=texture;

材質(zhì)特別屬性簡介：matcap貼圖屬性

MeshDepthMaterial

使用這種材質(zhì)的物體，其外觀不是由光照或某個材質(zhì)屬性決定的;而是由物體到相機的距離決定的。「當(dāng)物體離相機較近時會呈現(xiàn)白色，較遠(yuǎn)時會呈現(xiàn)黑色。貼圖和顏色對其無效果」，可以將這種材質(zhì)與其他材質(zhì)相結(jié)合，從而很容易創(chuàng)建逐漸消失的效果。

const material=new THREE.MeshDepthMaterial({
    // color: 0x00ff00,
    // transparent:true,
    // opacity:.5
});

const width=container.clientWidth; //窗口寬度
const height=container.clientHeight; //窗口高度
const k=width / height; //窗口寬高比
const s=1.2; //三維場景顯示范圍控制系數(shù)，系數(shù)越大，顯示的范圍越大
//創(chuàng)建相機對象
const camera=new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 100);
camera.position.set(2, 3, 4); //設(shè)置相機位置
// camera.position.set(20, 30, 40); //設(shè)置相機位置
camera.lookAt(scene.position); //設(shè)置相機方向(指向的場景對象)

MeshLambertMaterial 和 MeshPhongMaterial

MeshLambertMaterial這是一種暗淡的非光澤表面的材質(zhì),沒有鏡面高光,并且會對光源做出反應(yīng)。高光網(wǎng)格材質(zhì)MeshPhongMaterial除了和MeshLambertMaterial一樣可以實現(xiàn)光源和網(wǎng)格表面的漫反射光照計算，還可以產(chǎn)生高光效果(鏡面反射)。

//點光源
const point=new THREE.PointLight(0xffffff,.5);
point.position.set(4, 4, 4); //點光源位置
scene.add(point); //點光源添加到場景中
// //環(huán)境光
const ambient=new THREE.AmbientLight(0xffffff,.5);
scene.add(ambient);

// MeshLambertMaterial 
const material=new THREE.MeshLambertMaterial({
    color: 0xff0000,  
});
// MeshPhongMaterial
const material=new THREE.MeshPhongMaterial({
    color: 0xff0000,
    specular:0xffffff,//高光部分的顏色
    shininess:60,//高光部分的亮度，默認(rèn)30
});

MeshLambertMaterial特別屬性簡介:specular高光部分的顏色；shininess高光部分的亮度，默認(rèn)30

MeshStandardMaterial

MeshStandardMaterial和MeshPhysicalMaterial類是PBR物理材質(zhì)，可以更好的模擬光照計算，相比光網(wǎng)格材質(zhì)MeshPhongMaterial渲染效果更逼真。我們今天只看MeshStandardMaterial貼圖效果。

//材質(zhì)對象Material
const material=new THREE.MeshStandardMaterial();
material.metalness=0.45; // 金屬度屬性
material.roughness=0.65; //粗糙度屬性
material.map=texture;

// 環(huán)境貼圖
const envTextTure=cubeTextureLoader.load([
    '/three/texture/px.png',
    '/three/texture/nx.png',
    '/three/texture/py.png',
    '/three/texture/ny.png',
    '/three/texture/pz.png',
    '/three/texture/nz.png'
])
//材質(zhì)對象Material
const material=new THREE.MeshStandardMaterial();
material.metalness=0.7; // 金屬度屬性
material.roughness=0.2; //粗糙度屬性
material.envMap=envTextTure;

材質(zhì)特別屬性簡介：metalness金屬度屬性(0.0到1.0之間的值可用于生銹的金屬外觀)；roughness粗糙度屬性(0.0表示平滑的鏡面反射，1.0表示完全漫反射. 默認(rèn) 0.5)

網(wǎng)站推薦

這些網(wǎng)站主要是關(guān)于「貼圖推薦」和「紋理貼圖工具」。好的「貼圖」可以讓我們的物體更加的惟妙惟肖。所以推薦一下，希望對大家有幫助！

textures

地址：https://www.textures.com/library
簡介：這個網(wǎng)站貼圖類別是我看過最齊全的啦！強大的搜索功能允許你搜索特定的紋理以及標(biāo)簽。不過國內(nèi)加載有時會有點慢，不知道是不是我網(wǎng)絡(luò)問題。不過還是極力推薦的！

polyhaven

地址：https://polyhaven.com/textures
簡介：這是一個完全免費的3D素材網(wǎng)站。里面的貼圖質(zhì)量非常的高，貼圖素材也很豐富！

MatCaps

地址：https://github.com/nidorx/matcaps
簡介：是專為MeshMatcapMaterial材質(zhì)準(zhǔn)備的，太贊了！

plaintextures

地址：https://www..com/pbr/category/all/1
簡介：網(wǎng)站能提供免費紋理、畫筆和照片高級賬號可以下載更高分辨率的素材。

Texture Niaja

地址：https://texture.ninja/category/Wood/2
簡介：網(wǎng)站能提供5106種貼圖，如果你需要指紋貼圖的話，這會是很好的選擇！

圖片切割

地址：https://matheowis.github.io/HDRI-to-CubeMap/
簡介：上傳圖片文件可以切割成6等分，環(huán)境貼圖可以用到哈！

紋理生成器1

地址：http://www.tartanmaker.com/

紋理生成器2

地址：https://coolbackgrounds.io/

紋理生成器3

地址：http://www.stripegenerator.com/

結(jié)論

本篇文章只是粗淺介紹了紋理貼圖和常用網(wǎng)絡(luò)材質(zhì)的使用方法，并順便引入了相機和光源。最后展示的貼圖效果還是很不錯的。如果你需要深入學(xué)習(xí)的話還是需要翻閱大量有關(guān)資料的。

參考資料

three.js journey

Three.js零基礎(chǔ)入門教程(郭隆邦)

blender 里面導(dǎo)出的貼圖好的模型，在 threejs 中加載會變暗，如何解決，首先簡單的介紹如何在 blender 中貼圖與導(dǎo)出

一、選擇材質(zhì)屬性

二、點擊 Base Color 旁邊的小圓點，會顯示一些菜單，選擇 Image Texture

三、點擊 Open 選擇圖片

四、修改渲染模式

五、導(dǎo)出 glb 格式模型

雙擊可以修改模型的名字，比如：改成 Cube-1

顏色深修改材質(zhì)類型 MeshStandMaterial 為 MeshBasicMaterial

hree.js和webGL

引用官方的說法：

three.js是使用WebGL來繪制三維效果的，three.js封裝了諸如場景、燈光、陰影、材質(zhì)、貼圖、空間運算等一系列功能，讓你不必要再從底層WebGL開始寫起。

所以學(xué)習(xí)three.js并不需要專門去學(xué)習(xí)webGL,當(dāng)然有基礎(chǔ)肯定是有幫助的。

官網(wǎng)說明

1.打開官網(wǎng)看到下圖，右邊是一些3d樣例，對初學(xué)沒什么用。

官網(wǎng)首頁

左邊r130代表的版本號，這邊建議大家去看的是文檔說明(documentation)和resources的第一個學(xué)習(xí)資源(Three.js Fundamentals),他們都有對應(yīng)的中文翻譯，講得比較基礎(chǔ)適合入門

three.js版本選擇

1） three.js版本更新得很快，今天你下載了一個新版本，明天可能又更新了。很多舊版的方法在新版中被刪除，一些方法的引用文件也有所改變，在網(wǎng)上搜索到的很多教程都是r6-r9版本，方法的使用看起來也是各異，學(xué)習(xí)起來挺混亂的。這里我使用r130版本（編寫這邊文章時候的最新版本）。各版本官方下載地址：https://github.com/mrdoob/three.js/tags 。

2）下載完之后解壓得到three.js-master文件夾。這邊將build里面的three.js拿出來，在自己項目做練習(xí)，examples里面有各種樣例的代碼包括了素材和對應(yīng)的js依賴，之后可以拿來做練習(xí)（畢竟3d素材自己不好弄）。

目錄結(jié)構(gòu)

開發(fā)工具

我使用的vscode ，安裝live Server插件，可以跑本地服務(wù)，解決了圖片等素材引用的跨域問題，當(dāng)然你也可以直接使用官方的腳手架來練習(xí)。官方腳手架需要node環(huán)境，如果不了解的建議使用vscode。

五.第一個3d程序

這里我使用官網(wǎng)上的例子。先上全代碼，附注釋。可以運行下看效果。

<html>
<head>
    <meta charset="utf-8">
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
            padding:0;
        }
    </style>
</head>

<body>
    <script src="js/three.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

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

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

         camera.position.z = 5;
            const animate = function () {
                requestAnimationFrame(animate);
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
                renderer.render(scene, camera);
            };
            animate();
      
    </script>
</body>
</html>

1.創(chuàng)建了一個場景，也就是3d模型等展示的舞臺。

const scene=new THREE.Scene();

2.創(chuàng)建一個相機，他拍到的地方就是我們看到的內(nèi)容，這里創(chuàng)建的是透視相

第一個參數(shù)：是角度表示看到的范圍，

第二個表示：長寬比，作用是展示的物體可以正常比例顯示

三四參數(shù)表示：近截面（near）和遠(yuǎn)截面（far），當(dāng)物體某些部分比攝像機的遠(yuǎn)截面遠(yuǎn)或者比近截面近的時候，該這些部分將不會被渲染到場景中。

const camera=new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)

3.創(chuàng)建一個渲染器，將場景和相機放入，渲染畫面，設(shè)置渲染范圍，并添加到頁面中

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

4.創(chuàng)建簡單的3d模型

  	     // 創(chuàng)建一個正方體
        const geometry = new THREE.BoxGeometry();
        // 創(chuàng)建網(wǎng)格基礎(chǔ)材質(zhì) 可以理解為外表樣子，材質(zhì)有很多種，詳細(xì)可以查文檔
        const material = new THREE.MeshBasicMaterial({
            color: 0x00ff00
        });
        // 創(chuàng)建網(wǎng)格 將他們加入網(wǎng)格中在添加到場景，網(wǎng)格包含一個幾何體以及作用在此幾何體上的材質(zhì)
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

5.渲染

// 這邊是將相機拉遠(yuǎn)了，便于觀察。如下圖所示
camera.position.z = 5;
// 添加動畫，渲染
const animate=function () {
	requestAnimationFrame( animate );
   cube.rotation.x +=0.01;
	cube.rotation.y +=0.01;
	renderer.render( scene, camera );
   };
	animate();

6.效果圖

在線咨詢

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商