背景

近期學(xué)習(xí)了?WebGL?和?Three.js?的一些基礎(chǔ)知識(shí)，于是想結(jié)合最近流行的酸性設(shè)計(jì)風(fēng)格，裝飾一下個(gè)人主頁(yè)，同時(shí)總結(jié)一些學(xué)到的知識(shí)。本文內(nèi)容主要介紹，通過(guò)使用?React + three.js?技術(shù)棧，加載?3D模型、添加?3D文字、增加動(dòng)畫、點(diǎn)擊交互等，配合樣式設(shè)計(jì)，實(shí)現(xiàn)充滿設(shè)計(jì)感的?🤢?酸性風(fēng)格頁(yè)面。

基礎(chǔ)知識(shí)

Three.js

Three.js?是一款基于原生?WebGL封裝運(yùn)行在瀏覽器中的?3D引擎，可以用它創(chuàng)建各種三維場(chǎng)景，包括了攝影機(jī)、光影、材質(zhì)等各種對(duì)象。是一款使用非常廣泛的三維引擎。可以在?three.js官方中文文檔?進(jìn)一步深入學(xué)習(xí)。

酸性設(shè)計(jì)

酸性設(shè)計(jì)?一詞翻譯自?Acid Graphics，起源于?上世紀(jì)90年代?的酸浩室音樂(lè)、電子舞曲以及嬉皮士文化。在設(shè)計(jì)領(lǐng)域，這種酸性美學(xué)承載一種?自由的主張，怪誕的圖形，大膽鮮明的配色，特殊的材料質(zhì)感，搭配多種字體，組成了獨(dú)特的酸性設(shè)計(jì)風(fēng)格。

總之，鮮艷高飽和度?的色彩組合；黑灰色打底高飽和?熒光色?點(diǎn)綴畫面的?五彩斑斕的黑；充滿未來(lái)感、炫酷、充滿科技感的液態(tài)金屬、玻璃、鋁箔塑料等材質(zhì)；隨機(jī)?的元素、圖形的布局；不斷?重復(fù)、裁切、組合?幾何圖形?等都是酸性設(shè)計(jì)風(fēng)格。酸性風(fēng)格在音樂(lè)專輯封面、視覺(jué)海報(bào)、書籍電影封面、網(wǎng)頁(yè)設(shè)計(jì)中也逐漸開始流行。

實(shí)現(xiàn)效果

在線預(yù)覽：https://tricell.fun

實(shí)現(xiàn)

3D模型

場(chǎng)景初始化

🌏?創(chuàng)建場(chǎng)景

scene = new THREE.Scene();

📷?初始化相機(jī)

透視相機(jī) PerspectiveCamera?的?4個(gè)?參數(shù)分別是指：視場(chǎng)、長(zhǎng)寬比、近面、遠(yuǎn)面。

camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000); // 設(shè)置相機(jī)位置 camera.position.set(600, 20, -200); // 相機(jī)聚焦到屏幕中央 camera.lookAt(new THREE.Vector3(0, 0, 0));

💡?初始化光源

添加?半球光源 HemisphereLight：創(chuàng)建室外效果更加自然的光源

light = new THREE.HemisphereLight(0xffffff, 0x444444); light.position.set(0, 20, 0); scene.add(light); light = new THREE.DirectionalLight(0xffffff); light.position.set(0, 20, 10); light.castShadow = true; scene.add(light);

添加?環(huán)境光 AmbientLight：

var ambiColor = '#0C0C0C'; var ambientLight = new THREE.AmbientLight(ambiColor); scene.add(ambientLight);

添加輔助工具（可選）

📦?添加輔助網(wǎng)格

GridHelper?可用于添加網(wǎng)格輔助線，也可用于裝飾，通過(guò)?GridHelper(size, divisions, colorCenterLine, colorGrid)?實(shí)現(xiàn)。

• size：網(wǎng)格寬度，默認(rèn)值為?10。
• divisions：等分?jǐn)?shù)，默認(rèn)值為?10。
• colorCenterLine：中心線顏色，默認(rèn)值為?0x444444。
• colorGrid： 網(wǎng)格線顏色，默認(rèn)值為?0x888888。

var grid = new THREE.GridHelper(1000, 100, 0x000000, 0x000000); grid.material.opacity = 0.1; grid.material.transparent = true; grid.position.set(0, -240, 0); scene.add(grid);

📦?添加相機(jī)控件

通過(guò)相機(jī)控件?OrbitControls?可以對(duì)三維場(chǎng)景進(jìn)行縮放、平移、旋轉(zhuǎn)操作，本質(zhì)上改變的并不是場(chǎng)景，而是相機(jī)的參數(shù)。開發(fā)時(shí)?OrbitControls.js?需要單獨(dú)引入。

controls = new THREE.OrbitControls(camera, renderer.domElement); controls.target.set(0, 0, 0); controls.update();

📦?添加性能查看插件

stats?是一個(gè)?Three.js?開發(fā)的輔助庫(kù)，主要用于檢測(cè)動(dòng)畫運(yùn)行時(shí)的幀數(shù)。stats.js?也需要單獨(dú)引入。

stats = new Stats(); container.appendChild(stats.dom);

加載模型

本文示例用到的?扔鐵餅的人?雕像?3D?模型來(lái)源于?threedscans.com，可?免費(fèi)😄?下載使用，本文末尾提供了多個(gè)免費(fèi)模型下載網(wǎng)站，有?200多頁(yè)?免費(fèi)模型，大家感興趣的話可以挑選自己喜歡的模型下載使用。當(dāng)然，有建模能力的同學(xué)，也可以使用?blender、3dmax?等專業(yè)建模軟件生成自己喜歡的模型。

加載?obj?或?fbx?模型

需要單獨(dú)引入?FBXLoader.js?或?OBJLoader.js，.fbx?和?.obj?格式的模型加載方法是一樣的。

// var loader = new THREE.FBXLoader(); var loader = new THREE.OBJLoader(); loader.load(model, function (object) {object.traverse(function (child) {if (child.isMesh) {child.castShadow = true;child.receiveShadow = true;}});object.rotation.y = Math.PI / 2;object.position.set(0, -200, 0);object.scale.set(0.32, 0.32, 0.32);model = object;scene.add(object); });

加載?gltf?模型

需要單獨(dú)引入?GLTFLoader.js，加載?.gltf?格式模型方法稍有不同，需要注意的是模型的遍歷對(duì)象和最終添加到場(chǎng)景中的是?object.scene?而不是?object。

var loader = new THREE.GLTFLoader(); loader.load(model, function (object) {object.scene.traverse(function (child) {if (child.isMesh) {child.castShadow = true;child.receiveShadow = true;}});object.scene.rotation.y = Math.PI / 2;object.scene.position.set(0, -240, 0);object.scene.scale.set(0.33, 0.33, 0.33);model = object.scene;scene.add(object.scene); });

添加網(wǎng)格、加載完成模型之后的效果如下圖所示。

添加轉(zhuǎn)盤動(dòng)畫

通過(guò)?requestAnimationFrame?刷新頁(yè)面的方法添加轉(zhuǎn)盤動(dòng)畫效果。window.requestAnimationFrame()?告訴瀏覽器希望執(zhí)行一個(gè)動(dòng)畫，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動(dòng)畫。該方法需要傳入一個(gè)回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會(huì)在瀏覽器下一次重繪之前執(zhí)行。

function animate () {requestAnimationFrame(animate);// 隨著頁(yè)面重繪不斷改變場(chǎng)景的rotation.y來(lái)實(shí)現(xiàn)旋轉(zhuǎn)scene.rotation.y -= 0.015;renderer.render(scene, camera); }

添加點(diǎn)擊交互

在?Three.js?場(chǎng)景中我們要點(diǎn)擊某個(gè)模型獲取它的信息、或者做一些其他操作，要用到?Raycaster（光線投射），原理就是在你鼠標(biāo)點(diǎn)擊的位置發(fā)射一束射線，被射線中的物體都被記錄下來(lái)。基本語(yǔ)法是?Raycaster(origin, direction, near, far)，其中：

• origin：射線的起點(diǎn)向量。
• direction：射線的方向向量。
• near：所有返回的結(jié)果應(yīng)該比?near?遠(yuǎn)。值不能為負(fù)，默認(rèn)值為?0。
• far：所有返回的結(jié)果應(yīng)該比?far?近。不能小于?near，默認(rèn)值為?無(wú)窮大。

代碼實(shí)現(xiàn)的基本步驟是：獲取鼠標(biāo)在屏幕的坐標(biāo)?→?屏幕坐標(biāo)轉(zhuǎn)標(biāo)準(zhǔn)設(shè)備坐標(biāo)?→?標(biāo)準(zhǔn)設(shè)備坐標(biāo)轉(zhuǎn)世界坐標(biāo)?→?拿到鼠標(biāo)在場(chǎng)景的世界坐標(biāo)?→?根據(jù)世界坐標(biāo)和相機(jī)生成射線投射方向單位向量?→?根據(jù)射線投射方向單位向量創(chuàng)建射線投射器對(duì)象。

//聲明raycaster和mouse變量 var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); onMouseClick = event => {// 將鼠標(biāo)點(diǎn)擊位置的屏幕坐標(biāo)轉(zhuǎn)成threejs中的標(biāo)準(zhǔn)坐標(biāo)，以屏幕中心為原點(diǎn)，值的范圍為-1到1.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;// 通過(guò)鼠標(biāo)點(diǎn)的位置和當(dāng)前相機(jī)的矩陣計(jì)算出raycasterraycaster.setFromCamera(mouse, camera);// 獲取raycaster直線和所有模型相交的數(shù)組集合let intersects = raycaster.intersectObjects(scene.children);if (intersects.length > 0) {alert('HELLO WORLD')// 可以通過(guò)遍歷實(shí)現(xiàn)點(diǎn)擊不同mesh觸發(fā)不同交互，如：let selectedObj = intersects[0].object;if (selectedObj.name === 'car') {alert('汽車🚗')}} } window.addEventListener('click', onMouseClick, false);

添加3D文字

使用?TextGeometry(text : String, parameters : Object)?添加?3D文字，以下是可設(shè)置屬性的說(shuō)明：

• size：字號(hào)大小，一般為大寫字母的高度。
• height：文字的厚度。
• weight：值為?normal?或?bold，表示是否加粗。
• font：字體，默認(rèn)是?helvetiker，需對(duì)應(yīng)引用的字體文件。
• style：值為?normal?或?italics，表示是否斜體
• bevelThickness：倒角厚度。
• bevelSize：倒角寬度。
• curveSegments：弧線分段數(shù)，使得文字的曲線更加光滑。
• bevelEnabled：布爾值，是否使用倒角，意為在邊緣處斜切。

var loader = new THREE.FontLoader(); loader.load('gentilis_regular.typeface.json', function (font) {var textGeo = new THREE.TextGeometry('HELLO WORLD', {font: font,size: .8,height: .8,curveSegments: .05,bevelThickness: .05,bevelSize: .05,bevelEnabled: true});var textMaterial = new THREE.MeshPhongMaterial({ color: 0x03c03c });var mesh = new THREE.Mesh(textGeo, textMaterial);mesh.position.set(0, 3.8, 0);scene.add(mesh); });

優(yōu)化

現(xiàn)在模型加載已經(jīng)基本完成了，但是?3D?模型的體積一般比較大，部署之后我發(fā)現(xiàn)網(wǎng)頁(yè)加載非常慢，影響用戶體驗(yàn)，減小模型體積是十分必要的，在網(wǎng)上找了很久壓縮工具，發(fā)現(xiàn)在不需要安裝大型?3D建模軟件?的情況下，使用?obj2gltf可以將體積較大的?OBJ?格式模型轉(zhuǎn)化為?gltf?模型，有效優(yōu)化模型體積，提升網(wǎng)頁(yè)加載速度。

安裝

npm install obj2gltf --save

將obj模型復(fù)制到以下目錄中

node_modules\obj2gltf\bin

執(zhí)行轉(zhuǎn)碼指令

node obj2gltf.js -i demo.obj -o demo.gltf

如圖出現(xiàn)類似上述內(nèi)容，轉(zhuǎn)碼完成，對(duì)比轉(zhuǎn)化前后的文件體積，本例中?kas.obj?初始文件大小為?9.7M?轉(zhuǎn)化后的文件?kas.gltf?只有?4.6M，體積縮小一半，此時(shí)將轉(zhuǎn)化后的模型加載到頁(yè)面上，肉眼幾乎看不出模型效果的變化，同時(shí)頁(yè)面加載速度得到明顯提升。

obj2gltf?也可以作為庫(kù)使用，通過(guò)?node服務(wù)?實(shí)時(shí)轉(zhuǎn)化模型，感興趣的同學(xué)可以通過(guò)文章末尾鏈接深入學(xué)習(xí)。
也可以是使用?3D?建模軟件如?blender?等手動(dòng)通過(guò)減少模型?面數(shù)?和?縮小體積?等途徑對(duì)模型壓縮優(yōu)化，這種優(yōu)化效果更明顯。

完整代碼

var model = require('@/assets/models/kas.gltf'); var container, stats, controls; var camera, scene, renderer, light, model; class Kas extends React.Component {render () {return (<div id="kas"></div>)}componentDidMount () {this.initThree();}initThree () {init();animate();function init () {container = document.getElementById('kas');scene = new THREE.Scene();scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);// 透視相機(jī)：視場(chǎng)、長(zhǎng)寬比、近面、遠(yuǎn)面camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(600, 20, -200);camera.lookAt(new THREE.Vector3(0, 0, 0));// 半球光源：創(chuàng)建室外效果更加自然的光源light = new THREE.HemisphereLight(0xffffff, 0x444444);light.position.set(0, 20, 0);scene.add(light);light = new THREE.DirectionalLight(0xffffff);light.position.set(0, 20, 10);light.castShadow = true;scene.add(light);// 環(huán)境光var ambiColor = '#0C0C0C';var ambientLight = new THREE.AmbientLight(ambiColor);scene.add(ambientLight);// 網(wǎng)格var grid = new THREE.GridHelper(1000, 100, 0x000000, 0x000000);grid.material.opacity = 0.1;grid.material.transparent = true;grid.position.set(0, -240, 0);scene.add(grid);// 加載gltf模型var loader = new THREE.GLTFLoader();loader.load(model, function (object) {object.scene.traverse(function (child) {if (child.isMesh) {child.castShadow = true;child.receiveShadow = true;}});object.scene.rotation.y = Math.PI / 2;object.scene.position.set(0, -240, 0);object.scene.scale.set(0.33, 0.33, 0.33);model = object.scene;scene.add(object.scene);});renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearAlpha(0);renderer.shadowMap.enabled = true;container.appendChild(renderer.domElement);window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}, false);stats = new Stats();container.appendChild(stats.dom);}function animate () {var clock = new THREE.Clock()requestAnimationFrame(animate);var delta = clock.getDelta();scene.rotation.y -= 0.015;renderer.render(scene, camera);stats.update();}// 增加點(diǎn)擊事件//聲明raycaster和mouse變量var raycaster = new THREE.Raycaster();var mouse = new THREE.Vector2();function onMouseClick(event) {// 通過(guò)鼠標(biāo)點(diǎn)擊位置計(jì)算出raycaster所需要點(diǎn)的位置，以屏幕中心為原點(diǎn)，值的范圍為-1到1.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;// 通過(guò)鼠標(biāo)點(diǎn)的位置和當(dāng)前相機(jī)的矩陣計(jì)算出raycasterraycaster.setFromCamera(mouse, camera);// 獲取raycaster直線和所有模型相交的數(shù)組集合var intersects = raycaster.intersectObjects(scene.children);if (intersects.length > 0) {alert('HELLO WORLD')}}window.addEventListener('click', onMouseClick, false);} }

其他設(shè)計(jì)元素

本文主要介紹?3D元素?的加載，由于文章篇幅以及時(shí)間有限（博主太懶😂）其他元素的實(shí)現(xiàn)不做詳細(xì)講解（可能后續(xù)有時(shí)間會(huì)總結(jié)整理?maybe）感興趣的同學(xué)可以擴(kuò)展閱讀以下其他大神優(yōu)秀的文章。

流體背景

靜態(tài)?液態(tài)背景圖可以通過(guò)?SVG filter?實(shí)現(xiàn)，可以閱讀《Creating Patterns With SVG Filters》，實(shí)現(xiàn)?動(dòng)態(tài)?流體背景，可以使用Three.js 結(jié)合原生GLSL實(shí)現(xiàn)，可參考《CodePen Shader Template》示例來(lái)實(shí)現(xiàn)。

金屬、霓虹、故障效果等酸性效果字體可以閱讀我的另一篇文章《僅用CSS幾步實(shí)現(xiàn)賽博朋克2077風(fēng)格視覺(jué)效果》，也可以使用設(shè)計(jì)生成，由于時(shí)間關(guān)系，本文項(xiàng)目中的金屬效果文字以及本文banner頭圖中的文字都是使用在線藝術(shù)字體生成網(wǎng)站生成的，感興趣的同學(xué)可以自行嘗試設(shè)計(jì)。

未來(lái)進(jìn)一步優(yōu)化

• #todo?酸性風(fēng)格液態(tài)背景實(shí)現(xiàn)。
• #todo?3D模型液態(tài)金屬效果。

three.js?優(yōu)秀案例推薦

最后給大家推薦幾個(gè)非常驚艷的?three.js?項(xiàng)目來(lái)一起體驗(yàn)和學(xué)習(xí)，無(wú)論是頁(yè)面交互、視覺(jué)設(shè)計(jì)還是性能優(yōu)化都做到了極致，可以從中學(xué)到很多。

• github首頁(yè)：3D地球?實(shí)時(shí)顯示全球熱門倉(cāng)庫(kù)。
• kodeclubs：低面數(shù)?3D城市?第三人稱小游戲。
• 球鞋展示：720度?球鞋動(dòng)態(tài)展示。
• 沙雕dance：沙雕動(dòng)物舞者。
• Zenly軟件：Zenly App?中文主頁(yè)。

總結(jié)

以上是生活随笔為你收集整理的使用three.js实现炫酷的酸性风格3D页面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。