[[436426]]

作為整天和 UI 打交道的前端工程師，是否想在他(她)生日的時(shí)候用代碼送上一份驚喜呢?

不妨用 Three.js 做個(gè) 3D 的蛋糕送給 ta，既浪漫又能展現(xiàn)你技術(shù)的魅力。

這篇文章我們就來(lái)學(xué)習(xí)下如何用 Three.js 畫(huà)一個(gè)蛋糕。

代碼地址：https://github.com/QuarkGluonPlasma/threejs-exercize

Three.js 相關(guān)基礎(chǔ)

Three.js 是通過(guò)場(chǎng)景 Scene 來(lái)管理所有的物體的，加到 Scene 的物體還可以分個(gè)組：

const scene = new THREE.Scene(); 
 
scene.add(xxx); 
 
const group = new THREE.Group(); 
 
group.add(yyy); 
 
group.add(zzz); 
 
scene.add(group); 

想要把 Scene 中的所有物體渲染出來(lái)，需要指定一個(gè)相機(jī) camera，然后用 renderer 來(lái)渲染，如果有動(dòng)畫(huà)效果，要用 requestAnimationFrame 來(lái)一幀幀不斷渲染。

const renderer = new THREE.WebGLRenderer(); 
 
function render() { 
 
renderer.render(scene, camera); 
 
requestAnimationFrame(render); 
 
} 
 
render(); 

相機(jī) camera 分為從一個(gè)點(diǎn)去看的透視相機(jī) PerspectiveCamera，還有從一個(gè)面去投影的正交相機(jī) OrthographicCamera。

透視相機(jī)的特點(diǎn)是近大遠(yuǎn)小，而正交的則不是，就是一個(gè)平行投影，大小不變。

三維世界還需要指定一個(gè)光源，不然是全黑的，光源種類(lèi)很多，常用的有這些：

• 點(diǎn)光源：從一個(gè)點(diǎn)發(fā)射光線，就像燈泡一樣
• 平行光：平行的光線
• 環(huán)境光：均勻照射每個(gè)地方
• 聚光燈：舞臺(tái)聚光燈的光源

三維場(chǎng)景中的物體有很多種，比如永遠(yuǎn)面向相機(jī)的平面是 Sprite(我們做“漫天花雨”效果用的那個(gè))，還有由三角形構(gòu)成的物體叫做 Mesh。

Mesh 比較常用，它是由一個(gè)個(gè)三角形構(gòu)成的幾何體，還可以在每個(gè)面上貼圖。所以，參數(shù)有兩個(gè)，幾何體 Geometry 和材質(zhì) Material。

比如圓柱體就是一個(gè) Mesh，創(chuàng)建它的時(shí)候要指定圓柱幾何體 CylinderBufferGeometry 和每個(gè)面的材質(zhì) Material。

const 圓柱幾何體 = new THREE.CylinderBufferGeometry(上圓半徑, 下圓半徑, 高度, 側(cè)面分段數(shù)量); 
 
const 側(cè)面材質(zhì) = new THREE.MeshBasicMaterial({map: 紋理圖片}); 
const 上面材質(zhì) = new THREE.MeshBasicMaterial({color: 'red'}); 
const 下面材質(zhì) = new THREE.MeshBasicMaterial({color: 'red'}); 
 
const 圓柱 = new THREE.Mesh(圓柱幾何體, [側(cè)面材質(zhì), 上面材質(zhì), 下面材質(zhì)]); 

MeshBasicMaterial 是基礎(chǔ)的材質(zhì)，可以通過(guò) color 來(lái)指定顏色，也可以通過(guò) map 來(lái)指定紋理圖片 texture。

各種 Mesh 中比較特殊是文字，它用的是 TextGeometry，文字需要從一個(gè) xxx.typeface.json 中加載。

而這種 json 文件可以用字體文件 ttf 來(lái)轉(zhuǎn)換得到。用ttf 轉(zhuǎn) typeface.json 的這個(gè)網(wǎng)站來(lái)轉(zhuǎn)：

之后就可以顯示文字了:

const fontLoader = new THREE.FontLoader(); 
 
fontLoader.load('./font/xxx.typeface.json', function (font) { 
    var textGeometry = new THREE.TextGeometry('文字', 參數(shù)); 
    const textMaterial = [ 
        new THREE.MeshBasicMaterial({color: '字體顏色'}), 
        new THREE.MeshBasicMaterial({color: '側(cè)面顏色'}), 
    ]; 
 
    const text = new THREE.Mesh(textGeometry, textMaterial); 
}); 

這些就是我們會(huì)用到的 Three.js 基礎(chǔ)，簡(jiǎn)單做個(gè)小結(jié)：

• Three.js 是通過(guò) Scene 來(lái)管理各種物體的，物體還可以分下組。
• 物體中常見(jiàn)的有 Mesh 和 Sprite 等，Sprite 是永遠(yuǎn)面向相機(jī)的一個(gè)平面，Mesh 是由三角形構(gòu)成的三維物體。Mesh 要指定幾何體Geometry 和材質(zhì) Material，常用的材質(zhì)可以是顏色或者紋理貼圖。其中文字 TextGeometry 比較特殊，需要一個(gè) typeface.json 的文件，這個(gè)可以由 ttf 轉(zhuǎn)換得到。
• 場(chǎng)景中的物體準(zhǔn)備好之后，還需要設(shè)置下光源 Light 和相機(jī) Camera，相機(jī)主要有從點(diǎn)去看的透視相機(jī)和從一個(gè)平面去投影的正交相機(jī)，之后就可以通過(guò)渲染器 Renderer 渲染出來(lái)了，結(jié)合 requestAnimationFrame 來(lái)一幀幀的渲染。

基礎(chǔ)學(xué)完之后，正式開(kāi)始畫(huà)蛋糕了。

畫(huà) 3D 蛋糕

蛋糕其實(shí)就是由 4 個(gè)圓柱體加上文字構(gòu)成的，每個(gè)圓柱體都設(shè)置了不同的位置，圓柱體的側(cè)面和上下面都貼上不同的貼圖，就是一個(gè)蛋糕。

我們先準(zhǔn)備蛋糕的貼圖：

使用紋理加載器 TextureLoader 去加載他們：

const cakeTexture1 = new THREE.TextureLoader().load('img/cake1.png'); 
 
const cakeTexture2 = new THREE.TextureLoader().load('img/cake2.png'); 
 
const cakeTexture3 = new THREE.TextureLoader().load(`img/cake3.png`); 
 
const cakeTexture4 = new THREE.TextureLoader().load('img/cake4.png'); 

然后構(gòu)成紋理貼圖的材質(zhì)：

const cakeMaterail1 = new THREE.MeshBasicMaterial({map: cakeTexture1}); 
 
const cakeMaterail2 = new THREE.MeshBasicMaterial({map: cakeTexture2}); 
 
const cakeMaterail3 = new THREE.MeshBasicMaterial({map: cakeTexture3}); 
 
const cakeMaterail4 = new THREE.MeshBasicMaterial({map: cakeTexture4}); 

除了紋理貼圖的材質(zhì)外，再準(zhǔn)備個(gè)顏色構(gòu)成的材質(zhì)：

const pinkMaterial = new THREE.MeshBasicMaterial({color: 'pink'}); 

然后創(chuàng)建 4 個(gè)圓柱體的物體(Mesh)，使用不同的貼圖材質(zhì)和顏色材質(zhì)：

const cakeGeometry1 = new THREE.CylinderBufferGeometry(100, 100, 70, 40); 
 
const cakePart1 = new THREE.Mesh(cakeGeometry1, [cakeMaterail1, pinkMaterial, pinkMaterial]); 

圓柱體的幾何體 CylinderBufferGeometry 的參數(shù)分別是上面圓的半徑，下面圓的半徑，高度，側(cè)面的分割次數(shù)。

上面圓半徑保持一致，這樣才是圓柱體。側(cè)面分割次數(shù)設(shè)置為 40，這樣比較圓滑。

之后還設(shè)置下位移，然后就可以加到蛋糕分組里了。

我們用同樣的方式創(chuàng)建四個(gè)圓柱體，設(shè)置不同的大小和位置，貼不同的圖：

const cakeGeometry1 = new THREE.CylinderBufferGeometry(100, 100, 70, 40); 
const cakePart1 = new THREE.Mesh(cakeGeometry1, [cakeMaterail1, pinkMaterial, pinkMaterial]); 
cakePart1.translateY(45) 
 
const cakeGeometry2 = new THREE.CylinderBufferGeometry(120, 120, 70, 40); 
const cakePart2 = new THREE.Mesh(cakeGeometry2,[cakeMaterail3, pinkMaterial, pinkMaterial]); 
cakePart2.translateY(-25) 
 
const cakeGeometry3 = new THREE.CylinderBufferGeometry(140, 140, 60, 40); 
const cakePart3 = new THREE.Mesh(cakeGeometry3, [cakeMaterail2, pinkMaterial, pinkMaterial]); 
cakePart3.translateY(-90) 
 
const cakeGeometry4 = new THREE.CylinderBufferGeometry(160, 160, 10, 40); 
const cakePart4 = new THREE.Mesh(cakeGeometry4, [cakeMaterail4, cakeMaterail4, cakeMaterail4]); 
cakePart4.translateY(-120) 
 
cake.add(cakePart1) 
cake.add(cakePart2) 
cake.add(cakePart3) 
cake.add(cakePart4) 

如果對(duì)坐標(biāo)位置拿不準(zhǔn)，可以在 Scene 中加上一個(gè)坐標(biāo)的輔助工具 AxisHelper。參數(shù)是坐標(biāo)軸長(zhǎng)度。

const axisHelper = new THREE.AxisHelper(2500); 
 
scene.add(axisHelper); 

然后是文字的部分，這個(gè)要先通過(guò)字體文件 ttf 轉(zhuǎn)成 typeface.json 的文件，然后用 fontLoader 來(lái)加載，之后創(chuàng)建相應(yīng)的 Mesh：

fontLoader.load('./font/guang.typeface.json', function (font) { 
    var textGeometry = new THREE.TextGeometry('光光', { 
        font: font, 
        size: 30, 
        height: 5, 
        bevelEnabled: true, 
        bevelSize: 10, 
    }); 
    const textMaterial = ['white', 'red'].map(color => new THREE.MeshBasicMaterial({color})); 
 
    const text = new THREE.Mesh(textGeometry, textMaterial); 
    text.translateY(90) 
    text.translateX(-45) 
 
    cake.add(text);  
}); 

TextGeometry 需要設(shè)置的參數(shù)有字體大小 size，厚度 height，以及邊緣是否是曲面 bevelEnabled，和曲面的大小 bevelSize。

我們這里的效果是需要開(kāi)啟曲面的。

4 個(gè)圓柱體畫(huà)完了，文字也畫(huà)完了，那蛋糕就算是畫(huà)完了，之后設(shè)置下光源、相機(jī)，就可以用 Renderer 渲染了。

光源使用環(huán)境光，因?yàn)橐鶆虻恼丈洌?/p>

const light = new THREE.AmbientLight(0xCCCCCC); 
 
scene.add(light); 

相機(jī)使用正交相機(jī)，因?yàn)椴恍枰筮h(yuǎn)小的透視效果：

const width = window.innerWidth; 
const height = window.innerHeight; 
//窗口寬高比 
const k = width / height; 
//三維場(chǎng)景顯示范圍的高度 
const s = 200; 
 
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); 
 
camera.position.set(0, 100, 500) 
camera.lookAt(scene.position); 

正交相機(jī)的參數(shù)分別是左右上下遠(yuǎn)近的三維視野范圍，我們指定高度為 200，然后根據(jù)窗口的寬高比算出寬度。遠(yuǎn)近可以設(shè)置一個(gè)比較大的范圍。

之后就可以用 Renderer 來(lái)渲染了。把渲染出的 canvas 的 dom 掛載到 body 上。

const renderer = new THREE.WebGLRenderer(); 
 
renderer.setSize(width, height); 
//設(shè)置背景顏色 
renderer.setClearColor(0xFFFFFF, 1); 
document.body.appendChild(renderer.domElement); 
 
function render() {         
    renderer.render(scene, camera); 
 
    cake.rotation.y += 0.005; 
 
    requestAnimationFrame(render) 
} 
render() 

在每幀 render 之前，還做了個(gè)圍繞 y 軸的自動(dòng)旋轉(zhuǎn)。

還要支持手動(dòng)的旋轉(zhuǎn)，這個(gè)直接使用 Three.js 的軌道控制器 OrbitControls 就行。

const controls = new THREE.OrbitControls(camera); 

參數(shù)是相機(jī)，因?yàn)檫@種視野的改變就是通過(guò)改變相機(jī)位置和朝向來(lái)實(shí)現(xiàn)的。

創(chuàng)建了 Scene 中的蛋糕的每一部分，設(shè)置好了光源、相機(jī)，用渲染器做了一幀幀的渲染，并且添加了用鼠標(biāo)來(lái)改變視角的軌道控制器之后，就完成了 3D 蛋糕的制作。

我們來(lái)看下效果：

代碼地址：https://github.com/QuarkGluonPlasma/threejs-exercize

全部代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>生日蛋糕</title> 
    <style> 
        body { 
            margin: 0; 
            overflow: hidden; 
        } 
    </style> 
    <script src="./js/three.js"></script> 
    <script src="./js/OrbitControls.js"></script> 
</head> 
<body> 
<script> 
    const width = window.innerWidth; 
    const height = window.innerHeight; 
    //窗口寬高比 
    const k = width / height; 
    //三維場(chǎng)景顯示范圍的寬度 
    const s = 200; 
 
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); 
 
    const fontLoader = new THREE.FontLoader(); 
 
    const scene = new THREE.Scene(); 
 
    const cake = new THREE.Group(); 
 
    const renderer = new THREE.WebGLRenderer(); 
 
 
    function create() { 
        renderer.setSize(width, height); 
        //設(shè)置背景顏色 
        renderer.setClearColor(0xFFFFFF, 1); 
        document.body.appendChild(renderer.domElement); 
 
        camera.position.set(0, 100, 500) 
        camera.lookAt(scene.position); 
 
        const light = new THREE.AmbientLight(0xCCCCCC); 
        scene.add(light); 
 
        const axisHelper = new THREE.AxisHelper(2500); 
        scene.add(axisHelper); 
 
        const cakeTexture1 = new THREE.TextureLoader().load('img/cake1.png'); 
        const cakeTexture2 = new THREE.TextureLoader().load('img/cake2.png'); 
        const cakeTexture3 = new THREE.TextureLoader().load(`img/cake3.png`); 
        const cakeTexture4 = new THREE.TextureLoader().load('img/cake4.png'); 
 
        const cakeMaterail1 = new THREE.MeshBasicMaterial({map: cakeTexture1}); 
        const cakeMaterail2 = new THREE.MeshBasicMaterial({map: cakeTexture2}); 
        const cakeMaterail3 = new THREE.MeshBasicMaterial({map: cakeTexture3}); 
        const cakeMaterail4 = new THREE.MeshBasicMaterial({map: cakeTexture4});  
 
        const pinkMaterial = new THREE.MeshBasicMaterial({color: 'pink'}); 
 
        const cakeGeometry1 = new THREE.CylinderBufferGeometry(100, 100, 70, 40); 
        const cakePart1 = new THREE.Mesh(cakeGeometry1, [cakeMaterail1, pinkMaterial, pinkMaterial]); 
        cakePart1.translateY(45) 
  
        const cakeGeometry2 = new THREE.CylinderBufferGeometry(120, 120, 70, 40); 
        const cakePart2 = new THREE.Mesh(cakeGeometry2,[cakeMaterail3, pinkMaterial, pinkMaterial]); 
        cakePart2.translateY(-25) 
 
        const cakeGeometry3 = new THREE.CylinderBufferGeometry(140, 140, 60, 40); 
        const cakePart3 = new THREE.Mesh(cakeGeometry3, [cakeMaterail2, pinkMaterial, pinkMaterial]); 
        cakePart3.translateY(-90) 
 
        const cakeGeometry4 = new THREE.CylinderBufferGeometry(160, 160, 10, 40); 
        const cakePart4 = new THREE.Mesh(cakeGeometry4, [cakeMaterail4, cakeMaterail4, cakeMaterail4]); 
        cakePart4.translateY(-120) 
 
        cake.add(cakePart1) 
        cake.add(cakePart2) 
        cake.add(cakePart3) 
        cake.add(cakePart4) 
 
        fontLoader.load('./font/guang.typeface.json', function (font) { 
            var textGeometry = new THREE.TextGeometry('光光', { 
                font: font, 
                size: 30, 
                height: 5, 
                bevelEnabled: true, 
                bevelSize: 10, 
            }); 
            const textMaterial = ['white', 'red'].map(color => new THREE.MeshBasicMaterial({color})); 
 
            const text = new THREE.Mesh(textGeometry, textMaterial); 
            text.translateY(90) 
            text.translateX(-45) 
            cake.add(text);  
        }); 
 
        scene.add(cake); 
    } 
 
 
    function render() {         
        renderer.render(scene, camera); 
 
        cake.rotation.y += 0.005; 
 
        requestAnimationFrame(render) 
    } 
 
    create() 
    render() 
 
    const controls = new THREE.OrbitControls(camera); 
</script> 
</body> 
</html> 

總結(jié)

本文我們用 Three.js 來(lái)實(shí)現(xiàn)了 3D 蛋糕的效果。

首先我們學(xué)習(xí)了下 Three.js 的基礎(chǔ)：通過(guò) Scene 來(lái)管理物體，物體可以分組，物體包括 Mesh、Sprite 等，Mesh 是三角形構(gòu)成的 3D 物體，要分別指定幾何體 Geometry 和材質(zhì) Material。材質(zhì)可以是紋理(Texture)貼圖、也可以是顏色。其中文字的 Mesh 需要做 ttf 到 typeface.json 的轉(zhuǎn)換，加載這個(gè) json 才能顯示文字。

物體創(chuàng)建完了之后，還要設(shè)置相機(jī)、燈光等，然后通過(guò)渲染器來(lái)一幀幀的渲染。

調(diào)試的時(shí)候還可以添加 AxisHelper 坐標(biāo)系輔助工具來(lái)輔助開(kāi)發(fā)。

然后我們實(shí)現(xiàn)了 3D 蛋糕：

通過(guò) 4 個(gè)圓柱體 + 文字來(lái)畫(huà)的，圓柱體用了不同的紋理貼圖材質(zhì)，設(shè)置了不同的位置，然后組成蛋糕的 group。

設(shè)置了環(huán)境光，使用了正交相機(jī)，還啟用了軌道控制器 OrbitControls，來(lái)實(shí)現(xiàn)鼠標(biāo)拖拽改變相機(jī)位置，進(jìn)而改變視野角度的效果。 

下個(gè)他(她)的生日，不妨試試用 Three.js 畫(huà)個(gè)蛋糕送給他(她)，或許會(huì)有不一樣的收獲哦。