react-three-fiber實現(xiàn)炫酷3D粒子效果首頁
背景
初學(xué)者怎么用react-three-fiber實現(xiàn)一個炫酷粒子效果的首頁
Three.js工作原理
場景(Scene)、相機(Camera)和渲染器(Renderer)構(gòu)成了web端展示3D模型的基本腳手架，HTML<canvas>元素則可以讓我們在頁面中看到3D模型。
場景(Scene)
場景是3D模型的載體，可以將場景視為所有 3D 對象都存在于其中的“小宇宙”。
import { Scene } from 'three';
const scene = new Scene();場景擁有一個3D 笛卡爾坐標(biāo)系也是俗稱的右手坐標(biāo)系，它是我們在three.js 中處理可見對象時的主要參考框架。
場景的中心是點(0,0,0)，也稱為坐標(biāo)原點。每當(dāng)我們創(chuàng)建一個新對象并放入場景中時，默認是放置在原點。
相機(Camera)
在場景搭建好之后，我們需要將3D場景轉(zhuǎn)化為人眼2D視角可見的東西，就需要引入相機，進行這種轉(zhuǎn)換有很多種相機模式。對我們來說，最重要的相機是透視相機(PerspectiveCamera)，它是模擬人眼視角，從一個點到物體的視角成像，遵循近大遠小的原理。
import { PerspectiveCamera } from 'three';
const fov = 75; // 攝像機視錐體垂直視野角度
const aspect = container.clientWidth / container.clientHeight; //攝像機視錐體長寬比
const near = 0.1; // 攝像機視錐體近端面
const far = 100; // 攝像機視錐體遠端面
const camera = new PerspectiveCamera(fov, aspect, near, far);渲染器(renderer)
渲染器通過相機觀察3D場景，并將看到的東西繪制到<canvas>上，我們把這個過程叫做渲染。
import { WebGLRenderer } from 'three';
const renderer = new WebGLRenderer();雖然場景、相機和渲染器一起為我們提供了 three.js 的基本腳手架。但是我們無法在頁面上看到腳手架的存在。
網(wǎng)格對象(mesh)
網(wǎng)格是 3D 計算機圖形學(xué)中最常見的一種可見對象，用于顯示各種 3D 對象。還有其他種類的可見對象，例如線條、形狀、精靈和粒子等等。
網(wǎng)格一般包含幾何模型和材質(zhì)，在創(chuàng)建網(wǎng)格之前，需要創(chuàng)建幾何模型和材質(zhì)。
import { Mesh } from 'three';
const mesh = new Mesh(geometry, material);幾何模型形狀定義了網(wǎng)格的形狀，而材質(zhì)定義了網(wǎng)格的表面外觀。
基于以上介紹可以寫一個簡單的three.js demo。
// 場景
const scene = new THREE.Scene();
// 相機
const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
// 模型
const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );
function animation( time ) {
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
renderer.render( scene, camera );
}
react-three-fiber
react-three-fiber在它的github的readme.md上聲明了三點前提:
- 在 Threejs 中可以實現(xiàn)的都可以在react-three-fiber實現(xiàn)。
- react-three-fiber沒有額外的開銷，并且由于 Reacts 調(diào)度能力，它在規(guī)模上優(yōu)于 Threejs。
- react-three-fiber可以跟上three.js的頻繁功能更新，three.js版本添加、刪除或更改功能，無需依賴此庫的更新。
react-three-fiber的生態(tài)系統(tǒng)
畫布(Canvas)
Canvas 組件在幕后做了一些重要的設(shè)置工作：
- 它設(shè)置了Scene和Camera，這是渲染所需的基本構(gòu)建塊
- 它每幀渲染我們的場景，不需要傳統(tǒng)的渲染循環(huán)
import ReactDOM from 'react-dom'
import { Canvas } from '@react-three/fiber'
function App() {
return (
<div id="canvas-container">
<Canvas />
</div>)
}
ReactDOM.render(<App />, document.getElementById('root'))Canvas 響應(yīng)適應(yīng)父節(jié)點，因此可以通過更改父節(jié)點的寬度和高度來控制它的大小，在本例中為 #canvas-container。
上面的three.js demo 代碼用react-three-fiber實現(xiàn)如下：
import React from "react";
import { Canvas } from "react-three-fiber";
import "./styles.css";
export default function App() {
return (
<div className="App">
<Canvas>
<mesh>
<boxBufferGeometry />
<meshPhongMaterial />
</mesh>
<ambientLight args={[0xff0000]} intensity={0.1} />
<directionalLight position={[0, 0, 5]} intensity={0.5} />
</Canvas>
</div>
);
}3D粒子模型構(gòu)建
首先看一段非常簡單的粒子模型的three.js實現(xiàn)
// 創(chuàng)建一個球體幾何對象
var geometry = new THREE.SphereGeometry(100, 25, 25);
// 創(chuàng)建一個點材質(zhì)對象
var material = new THREE.PointsMaterial({
color: 0x0000ff, //顏色
size: 3, //點渲染尺寸
});
// 點模型對象 參數(shù)：幾何體 點材質(zhì)
let point = new THREE.Points(geometry, material);
// 網(wǎng)格模型添加到場景中
scene.add(point); 
THREE.Points - 用來創(chuàng)造點的類，也用來批量管理粒子，這個類的構(gòu)造函數(shù)可以接受兩個參數(shù)，一個幾何體和一個材質(zhì)，幾何體參數(shù)用來定義粒子的位置坐標(biāo)，而材質(zhì)參數(shù)用來格式化粒子.
- 在threejs的粒子系統(tǒng)中，每個粒子其實是一張圖片或者一個canvas而不是3D的物體。
- 當(dāng)粒子量級非常大時，可以用BufferGeometry來代替Geometry的頂點，因為它可以將數(shù)據(jù)存儲在緩沖區(qū)中，減少數(shù)據(jù)傳遞到GPU的成本，同時因為在緩沖區(qū)，所以更適合靜態(tài)的物體。
實現(xiàn)思路
創(chuàng)建buffer幾何體
<bufferGeometry attach="geometry"></bufferGeometry>
幾何體定義好之后需要往里填充數(shù)據(jù)。假設(shè)我們的星系是由70000顆星星組成，星系的背景零零散散的有9000顆星星環(huán)繞。我們需要確定各個點的位置和顏色。背景的星星統(tǒng)一由藍色的點，我們在之后的材質(zhì)里定義顏色，星系的星星使用顏色矩陣。
//背景
const bgStarsPositions = useMemo(() => {
const bgStarsPositions = new Float32Array(parameters.stars * 3);
// 背景星星的位置
for (let j = 0; j < parameters.stars; j++) {
bgStarsPositions[j * 3 + 0] = (Math.random() - 0.5) * 20;
bgStarsPositions[j * 3 + 1] = (Math.random() - 0.5) * 20;
bgStarsPositions[j * 3 + 2] = (Math.random() - 0.5) * 20;
}
return bgStarsPositions;
}, []);// 星系
const [positions, colors] = useMemo(() => {
const positions = new Float32Array(parameters.count * 3);
const colors = new Float32Array(parameters.count * 3);
const colorInside = new THREE.Color(parameters.insideColor);
const colorOutside = new THREE.Color(parameters.outsideColor);
for (let i = 0; i < parameters.count; i++) {
// 位置
const x = Math.random() * parameters.radius;
const branchAngle = ((i % parameters.branches) / parameters.branches) * 2 * Math.PI;
const spinAngle = x * parameters.spin;
const randomX = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : -1);
const randomY = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : -1);
const randomZ = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : -1);
positions[i * 3] = Math.sin(branchAngle + spinAngle) * x + randomX;
positions[i * 3 + 1] = randomY;
positions[i * 3 + 2] = Math.cos(branchAngle + spinAngle) * x + randomZ;
//顏色
const mixedColor = colorInside.clone();
mixedColor.lerp(colorOutside, x / parameters.radius);
colors[i * 3 + 0] = mixedColor.r;
colors[i * 3 + 1] = mixedColor.g;
colors[i * 3 + 2] = mixedColor.b;
}
return [positions, colors];
}, []);將位置和顏色賦值到buffer幾何體的attribute里
//星系
<bufferGeometry attach="geometry">
<bufferAttribute
attachObject={['attributes', 'position']}
count={70000}
array={positions}
itemSize={3}></bufferAttribute>
<bufferAttribute
attachObject={['attributes', 'color']}
count={70000}
array={colors}
itemSize={3}></bufferAttribute>
</bufferGeometry>
//背景
<bufferGeometry attach="geometry">
<bufferAttribute
attachObject={['attributes', 'position']}
count={parameters.stars}
array={bgStarsPositions}
itemSize={3}></bufferAttribute>
</bufferGeometry>引入點材質(zhì)
const textureLoader = new THREE.TextureLoader();
const shape = textureLoader.load('1.png');為每個點，加載材質(zhì)。
// 背景
<points ref={bgstart}>
<bufferGeometry attach="geometry">
<bufferAttribute
attachObject={['attributes', 'position']}
count={parameters.stars}
array={bgStarsPositions}
itemSize={3}></bufferAttribute>
</bufferGeometry>
<pointsMaterial
attach="material"
size={0.01}
depthWrite={false}
sizeAttenuation={true}
blending={AdditiveBlending}
color={'#1b3984'}
transparent={true}
alphaMap={shape}></pointsMaterial>
</points>// 星系
<points ref={points}>
<bufferGeometry attach="geometry">
<bufferAttribute
attachObject={['attributes', 'position']}
count={parameters.count}
array={positions}
itemSize={3}></bufferAttribute>
<bufferAttribute
attachObject={['attributes', 'color']}
count={parameters.count}
array={colors}
itemSize={3}></bufferAttribute>
</bufferGeometry>
<pointsMaterial
attach="material"
size={0.01}
depthWrite={false}
sizeAttenuation={true}
blending={AdditiveBlending}
vertexColors={true}
transparent={true}
alphaMap={shape}></pointsMaterial>
</points>//背景
const bgstart = useRef<any>();
useFrame(state => {
const elapsedTime = state.clock.elapsedTime;
bgstart.current.rotation.y = -elapsedTime * 0.05;
});//星系
const points = useRef<any>();
useFrame(state => {
const elapsedTime = state.clock.elapsedTime;
points.current.rotation.y = elapsedTime * 0.3;
});小知識點：useFrame這個鉤子允許你在每個渲染的幀上執(zhí)行代碼，比如運行效果、更新控件等等。你會收到狀態(tài)和時鐘增量。您的回調(diào)函數(shù)將在渲染幀之前被調(diào)用。當(dāng)組件卸載時，它會自動從渲染循環(huán)中取消訂閱。
最后呈現(xiàn)結(jié)果
到此這篇關(guān)于react-three-fiber實現(xiàn)炫酷3D粒子效果首頁的文章就介紹到這了,更多相關(guān)react 3D粒子內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react事件綁定時。this并不會指向當(dāng)前DOM元素。往往使用bind來改變this指向，今天通過本文給大家介紹React事件綁定的方式，感興趣的朋友2021-07-07
React useMemo與useCallabck有什么區(qū)別
useCallback和useMemo是一樣的東西，只是入?yún)⒂兴煌?，useCallback緩存的是回調(diào)函數(shù)，如果依賴項沒有更新，就會使用緩存的回調(diào)函數(shù)；useMemo緩存的是回調(diào)函數(shù)的return，如果依賴項沒有更新，就會使用緩存的return2022-12-12
這篇文章主要為大家介紹了ahooks?useInfiniteScroll源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要給大家介紹了關(guān)于react項目中@路徑簡單配置的相關(guān)資料,文中還介紹了React配置@路徑別名的方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
使用React Native創(chuàng)建以太坊錢包實現(xiàn)轉(zhuǎn)賬等功能
這篇文章主要介紹了使用React Native創(chuàng)建以太坊錢包，實現(xiàn)轉(zhuǎn)賬等功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
React組件中監(jiān)聽函數(shù)獲取不到最新的state問題
這篇文章主要介紹了React組件中監(jiān)聽函數(shù)獲取不到最新的state問題問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
React實現(xiàn)基于Antd密碼強度校驗組件示例詳解
這篇文章主要為大家介紹了React實現(xiàn)基于Antd密碼強度校驗組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
React中實現(xiàn)編輯框自動獲取焦點與失焦更新功能
在React應(yīng)用中,編輯框的焦點控制和數(shù)據(jù)回填是一個常見需求,本文將介紹如何使用useRef和useEffect鉤子,在組件中實現(xiàn)輸入框自動獲取焦點及失焦后更新數(shù)據(jù)的功能,文中通過代碼示例給大家講解的非常詳細,需要的朋友可以參考下2024-01-01
react中useState使用:如何實現(xiàn)在當(dāng)前表格直接更改數(shù)據(jù)
這篇文章主要介紹了react中useState的使用:如何實現(xiàn)在當(dāng)前表格直接更改數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
解決React報錯Property?'value'?does?not?exist?on?
這篇文章主要為大家介紹了React報錯Property?'value'?does?not?exist?on?type?EventTarget的解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12