理貼圖(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;
不同的人穿同樣的衣服顯然是不合適的,好比一個140kg的胖子穿s碼的T恤,那肯定是穿不下的!紋理貼圖也是一樣的道理,它并不是適合每種「材質(zhì)對象(Material)」。材質(zhì)對象按大類分可分為五種。如下
「網(wǎng)絡(luò)(Mesh)材質(zhì)」顧名思義,網(wǎng)格類模型才會使用的材質(zhì)對象。那現(xiàn)在就來看看它帶來的貼圖效果吧。
網(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
網(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可以讓每個小平面更加的平坦突出
由一個材質(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貼圖屬性
使用這種材質(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這是一種暗淡的非光澤表面的材質(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和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)站主要是關(guān)于「貼圖推薦」和「紋理貼圖工具」。好的「貼圖」可以讓我們的物體更加的惟妙惟肖。所以推薦一下,希望對大家有幫助!
本篇文章只是粗淺介紹了紋理貼圖和常用網(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
引用官方的說法:
three.js是使用WebGL來繪制三維效果的,three.js封裝了諸如場景、燈光、陰影、材質(zhì)、貼圖、空間運算等一系列功能,讓你不必要再從底層WebGL開始寫起。
所以學(xué)習(xí)three.js并不需要專門去學(xué)習(xí)webGL,當(dāng)然有基礎(chǔ)肯定是有幫助的。
1.打開官網(wǎng)看到下圖,右邊是一些3d樣例,對初學(xué)沒什么用。
官網(wǎng)首頁
左邊r130代表的版本號,這邊建議大家去看的是文檔說明(documentation)和resources的第一個學(xué)習(xí)資源(Three.js Fundamentals),他們都有對應(yīng)的中文翻譯,講得比較基礎(chǔ)適合入門
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)
我使用的vscode ,安裝live Server插件,可以跑本地服務(wù),解決了圖片等素材引用的跨域問題,當(dāng)然你也可以直接使用官方的腳手架來練習(xí)。官方腳手架需要node環(huán)境,如果不了解的建議使用vscode。
這里我使用官網(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)系。