來自：掘金，作者：KDDA_

鏈接：https://juejin.cn/post/7020571868314730532

來自：掘金，作者：KDDA_

鏈接：https://juejin.cn/post/7020571868314730532

前言：

大家好，我是xx傳媒嚴(yán)導(dǎo)（xx這兩個(gè)字請自行腦補(bǔ)） 。

該篇文章用到的主要技術(shù)：vue3、three.js

我們先看看成品效果：

高清大圖預(yù)覽（會有些慢）：

廢話不多說，直接進(jìn)入正題

Three.js的基礎(chǔ)知識

想象一下，在一個(gè)虛擬的3D世界中都需要什么？ 首先，要有一個(gè)立體的空間，其次是有光源，最重要的是要有一雙眼睛。下面我們就看看在three.js中如何創(chuàng)建一個(gè)3D世界吧！

創(chuàng)建一個(gè)場景

設(shè)置光源

創(chuàng)建相機(jī)，設(shè)置相機(jī)位置和相機(jī)鏡頭的朝向

創(chuàng)建3D渲染器，使用渲染器把創(chuàng)建的場景渲染出來

展開全文

此時(shí)，你就通過three.js創(chuàng)建出了一個(gè)可視化的3D頁面，很簡單是吧！

關(guān)于場景

你可以為場景添加背景顏色，或創(chuàng)建一個(gè)盒模型（球體、立方體），給盒模型的內(nèi)部貼上圖片，再把相機(jī)放在這個(gè)盒模型內(nèi)部以達(dá)到模擬場景的效果。盒模型的方式多用于360度全景，比如房屋vr展示

【登陸頁面】創(chuàng)建場景的例子：

constscene = newTHREE.Scene

// 在場景中添加霧的效果，F(xiàn)og參數(shù)分別代表‘霧的顏色’、‘開始霧化的視線距離’、剛好霧化至看不見的視線距離’

scene.fog = newTHREE.Fog( 0x000000, 0, 10000)

// 盒模型的深度

constdepth = 1400

// 在場景中添加一個(gè)圓球盒模型

// 1.創(chuàng)建一個(gè)立方體

constgeometry = newTHREE.BoxGeometry( 1000, 800, depth)

// 2.加載紋理

consttexture = newTHREE.TextureLoader.load( 'bg.png')

// 3.創(chuàng)建網(wǎng)格材質(zhì)（原料）

constmaterial = newTHREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide})

// 4.生成網(wǎng)格

constmesh = newTHREE.Mesh(geometry, material)

// 5.把網(wǎng)格放入場景中

scene.add(mesh)

復(fù)制代碼

關(guān)于光源

為場景設(shè)置光源的顏色、強(qiáng)度，同時(shí)還可以設(shè)置光源的類型（環(huán)境光、點(diǎn)光源、平行光等）、光源所在的位置

【登陸頁面】創(chuàng)建光源的例子：

// 1.創(chuàng)建環(huán)境光

constambientLight = newTHREE.AmbientLight( 0xffffff, 1)

// 2.創(chuàng)建點(diǎn)光源，位于場景右下角

constlight_rightBottom = newTHREE.PointLight( 0x0655fd, 5, 0)

light_rightBottom.position.set( 0, 100, -200)

// 3.把光源放入場景中

scene.add(light_rightBottom)

scene.add(ambientLight)

復(fù)制代碼

關(guān)于相機(jī)（重要）

很重要的一步，相機(jī)就是你的眼睛。 這里還會著重說明一下使用透視相機(jī)時(shí)可能會遇到的問題，我們最常用到的相機(jī)就是正交相機(jī)和透視相機(jī)了。

正交相機(jī)：無論物體距離相機(jī)距離遠(yuǎn)或者近，在最終渲染的圖片中物體的大小都保持不變。 用于渲染2D場景或者UI元素是非常有用的。如圖：

圖注解：

圖中紅色三角錐體是視野的大小

紅色錐體連著的第一個(gè)面是攝像機(jī)能看到的最近位置

從該面通過白色輔助線延伸過去的面是攝像機(jī)能看到的最遠(yuǎn)的位置

透視相機(jī)：被用來模擬人眼所看到的景象。 它是3D場景的渲染中使用得最普遍的投影模式。如圖：

我們在使用透視相機(jī)時(shí)，可能會遇到這種情況：邊緣處的物體會產(chǎn)生一定程度上的形變，原因是： 透視相機(jī)是魚眼效果，如果視域越大，邊緣變形越大。為了避免邊緣變形，可以將fov角度設(shè)置小一些，距離拉遠(yuǎn)一些

關(guān)于透視相機(jī)的幾個(gè)參數(shù)， new THREE.PerspectiveCamera(fov, width / height, near, far)

fov（field of view） — 攝像機(jī)視錐體垂直視野角度

aspect（width / height） — 攝像機(jī)視錐體長寬比

near — 攝像機(jī)視錐體近端面

far — 攝像機(jī)視錐體遠(yuǎn)端面

fov（field of view） — 攝像機(jī)視錐體垂直視野角度

aspect（width / height） — 攝像機(jī)視錐體長寬比

near — 攝像機(jī)視錐體近端面

far — 攝像機(jī)視錐體遠(yuǎn)端面

* 為了避免邊緣變形，這里將fov角度設(shè)置小一些，距離拉遠(yuǎn)一些

* 固定視域角度，求需要多少距離才能滿足完整的視野畫面

* 15度等于(Math.PI / 12)

*/

constcontainer = document.getElementById( 'login-three-container')

constwidth = container.clientWidth

constheight = container.clientHeight

constfov = 15

constdistance = width / 2/ Math.tan( Math.PI / 12)

constzAxisNumber = Math.floor(distance - depth / 2)

constcamera = newTHREE.PerspectiveCamera(fov, width / height, 1, 30000)

camera.position.set( 0, 0, zAxisNumber)

constcameraTarget = newTHREE.Vector3( 0, 0, 0)

camera.lookAt(cameraTarget)

復(fù)制代碼

關(guān)于渲染器

用 WebGL[1] 渲染出你精心制作的場景。它會創(chuàng)建一個(gè)canvas進(jìn)行渲染

【登陸頁面】創(chuàng)建渲染器的例子：

// 獲取容器dom

constcontainer = document.getElementById( 'login-three-container')

// 創(chuàng)建webgl渲染器實(shí)例

constrenderer = newTHREE.WebGLRenderer({ antialias: true, alpha: true})

// 設(shè)置渲染器畫布的大小

renderer.setSize(width, height)

// 把畫布實(shí)例（canvas）放入容器中

container.(renderer.domElement)

// 渲染器渲染場景

renderer.render(scene, camera)

復(fù)制代碼

需要注意，這樣創(chuàng)建出來的場景并沒有動效，原因是這次渲染的僅僅只是這一幀的畫面。為了讓場景中的物體能動起來，我們需要使用requestAnimationFrame，所以我們可以寫一個(gè)loop函數(shù)

//動畫刷新

constloopAnimate = = {

requestAnimationFrame(loopAnimate)

scene.rotateY( 0.001)

renderer.render(scene, camera)

}

loopAnimate

復(fù)制代碼

完善效果創(chuàng)建一個(gè)左上角的地球// 加載紋理

consttexture = THREE.TextureLoader.load( 'earth_bg.png')

// 創(chuàng)建網(wǎng)格材質(zhì)

constmaterial = newTHREE.MeshPhongMaterial({ map: texture, blendDstAlpha: 1})

// 創(chuàng)建幾何球體

constsphereGeometry = newTHREE.SphereGeometry( 50, 64, 32)

// 生成網(wǎng)格

constsphere = newTHREE.Mesh(sphereGeometry, material)

// 為了單獨(dú)操作球體的運(yùn)動效果，我們把球體放到一個(gè)組中

constSphere_Group = newTHREE.Group

constSphere_Group.add(sphere)

// 設(shè)置該組（球體）在空間坐標(biāo)中的位置

constSphere_Group.position.x = -400

constSphere_Group.position.y = 200

constSphere_Group.position.z = -200

// 加入場景

scene.add(Sphere_Group)

// 使球能夠自轉(zhuǎn)，需要在loopAnimate中加上

Sphere_Group.rotateY( 0.001)

復(fù)制代碼

使地球自轉(zhuǎn)// 渲染星球的自轉(zhuǎn)

constrenderSphereRotate = = {

if(sphere) {

Sphere_Group.rotateY( 0.001)

}

}

// 使球能夠自轉(zhuǎn)，需要在loopAnimate中加上

constloopAnimate = = {

requestAnimationFrame(loopAnimate)

renderSphereRotate

renderer.render(scene, camera)

}

復(fù)制代碼

創(chuàng)建星星// 初始化星星

constinitSceneStar = (initZposition: number): any= {

constgeometry = newTHREE.BufferGeometry

constvertices: number[] = []

constpointsGeometry: any[] = []

consttextureLoader = newTHREE.TextureLoader

constsprite1 = textureLoader.load( 'starflake1.png')

constsprite2 = textureLoader.load( 'starflake2.png')

parameters = [

[[ 0.6, 100, 0.75], sprite1, 50],

[[ 0, 0, 1], sprite2, 20]

]

// 初始化500個(gè)節(jié)點(diǎn)

for( leti = 0; i 500; i++) {

/**

* const x: number = Math.random * 2 * width - width

* 等價(jià)

* THREE.MathUtils.randFloatSpread(width)

* _.random使用的是lodash庫中的生成隨機(jī)數(shù)

*/

constx: number = THREE.MathUtils.randFloatSpread(width)

consty: number = _.random( 0, height / 2)

constz: number = _.random(-depth / 2, zAxisNumber)

vertices.push(x, y, z)

}

geometry.setAttribute( 'position', newTHREE.Float32BufferAttribute(vertices, 3))

// 創(chuàng)建2種不同的材質(zhì)的節(jié)點(diǎn)（500 * 2）

for( leti = 0; i parameters.length; i++) {

constcolor = parameters[i][ 0]

constsprite = parameters[i][ 1]

constsize = parameters[i][ 2]

materials[i] = newTHREE.PointsMaterial({

size,

map: sprite,

blending: THREE.AdditiveBlending,

depthTest: true,

transparent: true

})

materials[i].color.setHSL(color[ 0], color[ 1], color[ 2])

constparticles = newTHREE.Points(geometry, materials[i])

particles.rotation.x = Math.random * 0.2- 0.15

particles.rotation.z = Math.random * 0.2- 0.15

particles.rotation.y = Math.random * 0.2- 0.15

particles.position.setZ(initZposition)

pointsGeometry.push(particles)

scene.add(particles)

}

returnpointsGeometry

}

constparticles_init_position = -zAxisNumber - depth / 2

letzprogress = particles_init_position

letzprogress_second = particles_init_position * 2

constparticles_first = initSceneStar(particles_init_position)

constparticles_second = initSceneStar(zprogress_second)

復(fù)制代碼

使星星運(yùn)動// 渲染星星的運(yùn)動

constrenderStarMove = = {

consttime = Date.now * 0.00005

zprogress += 1

zprogress_second += 1

if(zprogress = zAxisNumber + depth / 2) {

zprogress = particles_init_position

} else{

particles_first.forEach( ( item) = {

item.position.setZ(zprogress)

})

}

if(zprogress_second = zAxisNumber + depth / 2) {

zprogress_second = particles_init_position

} else{

particles_second.forEach( ( item) = {

item.position.setZ(zprogress_second)

})

}

for( leti = 0; i materials.length; i++) {

constcolor = parameters[i][ 0]

consth = (( 360* (color[ 0] + time)) % 360) / 360

materials[i].color.setHSL(color[ 0], color[ 1], parseFloat(h.toFixed( 2)))

}

}

復(fù)制代碼

星星的運(yùn)動效果，實(shí)際就是沿著z軸從遠(yuǎn)處不斷朝著相機(jī)位置移動，直到移出相機(jī)的位置時(shí)回到起點(diǎn)，不斷重復(fù)這個(gè)操作。我們使用上帝視角，從x軸的左側(cè)看去。

創(chuàng)建云以及運(yùn)動軌跡// 創(chuàng)建曲線路徑

constroute = [

newTHREE.Vector3(-width / 10, 0, -depth / 2),

newTHREE.Vector3(-width / 4, height / 8, 0),

newTHREE.Vector3(-width / 4, 0, zAxisNumber)

]

constcurve = newTHREE.CatmullRomCurve3(route, false)

consttubeGeometry = newTHREE.TubeGeometry(curve, 100, 2, 50, false)

consttubeMaterial = newTHREE.MeshBasicMaterial({

opacity: 0,

transparent: true

})

consttube = newTHREE.Mesh(tubeGeometry, tubeMaterial)

// 把創(chuàng)建好的路徑加入場景中

scene.add(tube)

// 創(chuàng)建平面幾何

constclondGeometry = newTHREE.PlaneGeometry( 500, 200)

consttextureLoader = newTHREE.TextureLoader

constcloudTexture = textureLoader.load( 'cloud.png')

constclondMaterial = newTHREE.MeshBasicMaterial({

map: cloudTexture,

blending: THREE.AdditiveBlending,

depthTest: false,

transparent: true

})

constcloud = newTHREE.Mesh(clondGeometry, clondMaterial)

// 將云加入場景中

scene.add(cloud)

復(fù)制代碼

現(xiàn)在有了云和曲線路徑，我們需要將二者結(jié)合，讓云按著路徑進(jìn)行運(yùn)動

使云運(yùn)動letcloudProgress = 0

letscaleSpeed = 0.0006

letmaxScale = 1

letstartScale = 0

// 初始化云的運(yùn)動函數(shù)

constcloudMove = = {

if(startScale maxScale) {

startScale += scaleSpeed

cloud.scale.setScalar(startScale)

}

if(cloudProgress 1) {

cloudProgress = 0

startScale = 0

} else{

cloudProgress += speed

if(cloudParameter.curve) {

constpoint = curve.getPoint(cloudProgress)

if(point point.x) {

cloud.position.set(point.x, point.y, point.z)

}

}

}

}

復(fù)制代碼

完成three.js有關(guān)效果

最后，把cloudMove函數(shù)放入loopAnimate函數(shù)中即可實(shí)現(xiàn)云的運(yùn)動。至此，該登錄頁所有與three.js有關(guān)的部分都介紹完了。剩下的月球地面、登錄框、宇航員都是通過定位和層級設(shè)置以及css3動畫實(shí)現(xiàn)的，這里就不進(jìn)行深入的討論了。

上面的每個(gè)部分的代碼在連貫性并不完整，并且同登錄頁的完整代碼也有些許出入。上面更多是為了介紹每個(gè)部分的實(shí)現(xiàn)方式。完整代碼，我放在github上了，每行注釋幾乎都打上了，希望能給你入坑three.js帶來一些幫助，地址： https://github.com/Yanzengyong/threejs-login-view

結(jié)語

之前用react+three.js寫過一個(gè)3D可視化的知識圖譜，如果這篇對大家有幫助并且反響好的話，后續(xù)我會寫一篇如何使用three.js創(chuàng)建一個(gè)3D知識圖譜。

最后，我認(rèn)為3D可視化的精髓其實(shí)在于設(shè)計(jì)，有好的素材、好的建模，能讓你的頁面效果瞬間提升N倍

three.js官網(wǎng)[3]

--- EOF ---

推薦↓↓↓