一、前言
概述：基于WebGL的三維引擎，目前是國(guó)內(nèi)資料最多、使用最廣泛的三維引擎，可以制作一些3D可視化項(xiàng)目
目前隨著元宇宙概念的爆火，THREE技術(shù)已經(jīng)深入到了物聯(lián)網(wǎng)、VR、游戲、數(shù)據(jù)可視化等多個(gè)平臺(tái)。
最近一段時(shí)間主要對(duì)之前學(xué)習(xí)three.js的總結(jié)和記錄，記錄只對(duì)自己覺(jué)得重要的部分記錄，其他的可以參考別的平臺(tái)資源。
目前作品的相關(guān)展示平臺(tái)已上線：VR_Team作品展示平臺(tái)，歡迎大家查看。
項(xiàng)目開(kāi)源地址：web3d-product，下面為一部分的網(wǎng)頁(yè)的作品展示。
粒子特效
在線預(yù)覽：粒子平面墻
在線預(yù)覽：迷失太空
在線預(yù)覽：粒子海浪
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-778232.html
在線預(yù)覽：銀河系
二維漫畫(huà)
在線預(yù)覽：漫畫(huà)-蜘蛛俠
可視化
在線預(yù)覽：電腦主機(jī)拆解
后期處理
在線預(yù)覽：后期處理-虛幻花朵
二、項(xiàng)目使用流程
2.1 項(xiàng)目結(jié)構(gòu)
功能說(shuō)明
-
public文件夾：存放一些獨(dú)立的案例界面（html格式），不需要依賴，可以直接運(yùn)行在網(wǎng)頁(yè)-
assets存在依賴的資源 -
Basic：基礎(chǔ)界面 -
Comic：二維漫畫(huà) -
Particles：粒子效果 -
Processing：后期chuli -
Visualization：可視化
-
-
src-
views：功能主界面
-
2.2 基本使用
//安裝依賴
npm i
//運(yùn)行項(xiàng)目
npm run dev
2.3 項(xiàng)目模板
該模板集成最簡(jiǎn)單的一個(gè)three.js環(huán)境，在此基礎(chǔ)上可以自行搭建。
2.4 技術(shù)棧
前端：vue + three.js + js
三、基礎(chǔ)動(dòng)畫(huà)
概述：本質(zhì)就是在render()函數(shù)不斷渲染的過(guò)程中調(diào)用動(dòng)畫(huà)，每一幀不斷增加目標(biāo)體的位置，以此循環(huán)
體驗(yàn)地址：基礎(chǔ)動(dòng)畫(huà)
3.1 THREE.Clock
// 時(shí)間動(dòng)畫(huà)
let clockAnimate=()=>{
const elapsedTime=clock.getElapsedTime()
cube.position.x = Math.cos(elapsedTime)
cube.position.y=Math.sin(elapsedTime)
}
3.2 GASP
https://github.com/greensock/GSAP
// gasp動(dòng)畫(huà)
let gsapAnimate=()=>{
gsap.to(cube.position, { x: 5, duration: 3, delay:1})
}
四、照相機(jī)
8.1 正交相機(jī)
| 參數(shù)(屬性) | 含義 |
|---|---|
| left | 渲染空間的左邊界 |
| right | 渲染空間的右邊界 |
| top | 渲染空間的上邊界 |
| bottom | 渲染空間的下邊界 |
| near | near屬性表示的是從距離相機(jī)多遠(yuǎn)的位置開(kāi)始渲染，一般情況會(huì)設(shè)置一個(gè)很小的值。 默認(rèn)值0.1 |
| far | far屬性表示的是距離相機(jī)多遠(yuǎn)的位置截止渲染，如果設(shè)置的值偏小小，會(huì)有部分場(chǎng)景看不到。 默認(rèn)值1000 |
let width = window.innerWidth;
let height = window.innerHeight;
const camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, 1, 1000);
scene.add(camera);
camera.position.set(100, 200, 100);
8.2 透視相機(jī)
| 參數(shù) | 含義 | 默認(rèn)值 |
|---|---|---|
| fov | fov表示視場(chǎng)，所謂視場(chǎng)就是能夠看到的角度范圍，人的眼睛大約能夠看到180度的視場(chǎng)，視角大小設(shè)置要根據(jù)具體應(yīng)用，一般游戲會(huì)設(shè)置60~90度 | 45 |
| aspect | aspect表示渲染窗口的長(zhǎng)寬比，如果一個(gè)網(wǎng)頁(yè)上只有一個(gè)全屏的canvas畫(huà)布且畫(huà)布上只有一個(gè)窗口，那么aspect的值就是網(wǎng)頁(yè)窗口客戶區(qū)的寬高比 | window.innerWidth/window.innerHeight |
| near | near屬性表示的是從距離相機(jī)多遠(yuǎn)的位置開(kāi)始渲染，一般情況會(huì)設(shè)置一個(gè)很小的值。 | 0.1 |
| far | far屬性表示的是距離相機(jī)多遠(yuǎn)的位置截止渲染，如果設(shè)置的值偏小，會(huì)有部分場(chǎng)景看不到 | 1000 |
let width = window.innerWidth;
let height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.set(150, 100, 300);
camera.lookAt(scene.position);
注意
- 相機(jī)的
fov視口是上下的，不是左右 - 向左移動(dòng)相機(jī)，我們的場(chǎng)景會(huì)向右移動(dòng)
4.3 相機(jī)控制器
概述：通過(guò)鼠標(biāo)控制相機(jī)的移動(dòng)、旋轉(zhuǎn)、縮放以此實(shí)現(xiàn)場(chǎng)景物體的控制
導(dǎo)包
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
應(yīng)用
const controls = new OrbitControls(camera, renderer.domElement)
自旋轉(zhuǎn)
controls.autoRotate = true
必須在render函數(shù)調(diào)用update實(shí)時(shí)更新才奏效
五、畫(huà)布和全屏
像素比：將一個(gè)像素分成若干個(gè)n*n的像素，這樣的話顯示會(huì)更加清晰，一般來(lái)說(shuō)像素比為2就夠了
// 自適應(yīng)屏幕
let onWindowsResize = () => {
sizes.width = window.innerWidth
sizes.height = window.innerHeight
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(window.devicePixelRatio)
}
//雙擊全屏
let onWindowsScreen = () => {
let isFullScreen = document.fullscreenElement
if (!isFullScreen) {
renderer.domElement.requestFullscreen()
} else {
document.exitFullscreen()
}
}
let expandFunction = () => {
window.addEventListener('resize', onWindowsResize)
window.addEventListener('dblclick', onWindowsScreen)
}
六、幾何體
概述：幾何體由一個(gè)個(gè)頂點(diǎn)粒子構(gòu)成，每個(gè)粒子包含了位置、uv貼圖（3d=>2d坐標(biāo)對(duì)應(yīng)）等，三個(gè)頂點(diǎn)形成一個(gè)面，在three.js中。物體由一個(gè)個(gè)三角形面構(gòu)成。
BufferGeometry：是面片、線或點(diǎn)幾何體的有效表述。包括頂點(diǎn)位置，面片索引、法相量、顏色值、UV 坐標(biāo)和自定義緩存屬性值。使用 BufferGeometry 可以有效減少向 GPU 傳輸上述數(shù)據(jù)所需的開(kāi)銷。目前，three.js的物體都用上了Buffer，可以直接調(diào)用，一些頂點(diǎn)可以使用這個(gè)。
演示鏈接：三角形
let createBufferTriangle = () => {
const count = 50
for (let i = 0; i < count; i++) {
const pointsArray = new Float32Array(9)
for (let j = 0; j < 9; j++) {
pointsArray[j] = (Math.random() - 0.5) * 5
}
const geometry = new THREE.BufferGeometry()
const material = new THREE.MeshBasicMaterial({
color: new THREE.Color(
Math.random(),
Math.random(),
Math.random(),
),
opacity: Math.random(),
transparent: true,
// wireframe:true
})
geometry.setAttribute('position', new THREE.BufferAttribute(pointsArray, 3))
// geometry.attributes.position = new THREE.BufferAttribute(pointsArray, 3)
const triangle = new THREE.Mesh(geometry, material)
scene.add(triangle)
}
}
七、Debug UI
dat.gui：https://github.com/dataarts/dat.gui 樣式好看，動(dòng)畫(huà)有點(diǎn)不流暢
lil-gui：https://lil-gui.georgealways.com/ 動(dòng)畫(huà)流暢，官方案例用的多
八、紋理貼圖
8.1 mipmapping
mip映射(mipmapping)是一種技術(shù)，它包括一次又一次地創(chuàng)建半個(gè)較小版本的紋理，直到得到1x1紋理。
所有這些紋理變化都會(huì)發(fā)送到GPU，GPU將自動(dòng)選擇最合適的紋理版本。所有的這些都已經(jīng)由THREE.js和GPU處理，但是我們可以選擇不同的過(guò)濾算法
8.2 放大濾鏡
概述：原本的貼圖大小大于要渲染的大小，如縮放物體，應(yīng)用這個(gè)
8.3 縮小濾鏡
概述：原本的貼圖大小小于要渲染的大小，如縮放物體，應(yīng)用這個(gè)
當(dāng)紋理的minFilter屬性使用NearestFilter時(shí)，我們可以不需要再mip映射了，可以通過(guò)以下代碼為紋理停用mipmapping，使得GPU不再處理mip映射
//如果不在乎遠(yuǎn)處物品效果如失真之類的，紋理的minFilter屬性使用 NearestFilter時(shí)可以停用mipmapping以獲得更好性能，根據(jù)實(shí)際項(xiàng)目而定
colorTexture.generateMipmaps = false
參考鏈接：https://threejs.org/docs/index.html#api/zh/constants/Textures
參考鏈接：https://blog.csdn.net/weixin_43990650/article/details/121595334
8.3 UV貼圖
參考鏈接：https://www.bilibili.com/read/cv15999592
掘金：https://juejin.cn/post/7101209181822124069
資源推薦
- www.poliigon.com
- https://3dtextures.me/
- www.arroway-textures.ch/
紋理、材質(zhì)、燈光
這部分可以參考網(wǎng)上的資料，這里不做過(guò)多講解
https://blog.csdn.net/weixin_43990650/article/details/121595334
九、陰影
9.1 燈光陰影
四步走
燈光cast=>球體cast=>平面receive=>renderer設(shè)置
概述：燈光利用照相機(jī)渲染出shadow map貼到場(chǎng)景中，得到陰影
簡(jiǎn)單例子
//直射光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
scene.add(directionalLight)
directionalLight.position.set(2, 2, -1)
directionalLight.castShadow = true
directionalLight.shadow.mapSize.width = 1024
directionalLight.shadow.mapSize.height = 1024
directionalLight.shadow.camera.near = 1
directionalLight.shadow.camera.far = 6
directionalLight.shadow.camera.top = 2
directionalLight.shadow.camera.right = 2
directionalLight.shadow.camera.bottom = - 2
directionalLight.shadow.camera.left = - 2
directionalLight.shadow.radius = 10
//只是實(shí)體化的工具，參數(shù)修改上面的
const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
scene.add(directionalLightCameraHelper)
directionalLightCameraHelper.visible = false
注意：
- 只有平行光、點(diǎn)光源和聚光燈支持陰影
- 平行光是正交相機(jī)、其他的是透視相機(jī)，可以通過(guò)調(diào)節(jié)角度
9.2 烘焙陰影
概述：提前在blender渲染好陰影，這個(gè)不會(huì)變化，關(guān)閉渲染器陰影投射就行
9.3 陰影跟隨
概述：在小球下面放置具有陰影貼圖的平面，關(guān)閉渲染器陰影，跟隨小球運(yùn)動(dòng)改變透明度
renderer.shadowMap.enabled = false
十、粒子效果
概述：粒子可以被用來(lái)創(chuàng)建星星、煙霧、雨滴、灰塵、火焰等等。我們可以使用合理的幀速率來(lái)創(chuàng)建數(shù)千個(gè)粒子。每個(gè)粒子都是由始終面向攝影機(jī)的平面（倆個(gè)三角形）組成的
參考鏈接：https://blog.csdn.net/weixin_43990650/article/details/121736698
101801718.png" alt=“6” style=“zoom:50%;” />
概述：提前在blender渲染好陰影，這個(gè)不會(huì)變化，關(guān)閉渲染器陰影投射就行
9.3 陰影跟隨
概述：在小球下面放置具有陰影貼圖的平面，關(guān)閉渲染器陰影，跟隨小球運(yùn)動(dòng)改變透明度
renderer.shadowMap.enabled = false
十、粒子效果
概述：粒子可以被用來(lái)創(chuàng)建星星、煙霧、雨滴、灰塵、火焰等等。我們可以使用合理的幀速率來(lái)創(chuàng)建數(shù)千個(gè)粒子。每個(gè)粒子都是由始終面向攝影機(jī)的平面（倆個(gè)三角形）組成的
官網(wǎng)鏈接：數(shù)字孿生開(kāi)發(fā)平臺(tái)
本項(xiàng)目由`江蘇海洋大學(xué)計(jì)算機(jī)工程學(xué)院VR_Team106完成，歡迎加入!!!文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-778232.html
到了這里，關(guān)于【THREE.JS】網(wǎng)頁(yè)中的炫酷3D的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
