react-three-fiber实现炫酷3D粒子效果首页

2023-04-26 原文

背景

初学者怎么用react-three-fiber实现一个炫酷粒子效果的首页

Three.js工作原理

场景(Scene)、相机(Camera)和渲染器(Renderer)构成了web端展示3D模型的基本脚手架，HTML<canvas>元素则可以让我们在页面中看到3D模型。

场景(Scene)

场景是3D模型的载体，可以将场景视为所有 3D 对象都存在于其中的“小宇宙”。

import { Scene } from 'three';
const scene = new Scene();

场景拥有一个3D 笛卡尔坐标系也是俗称的右手坐标系，它是我们在three.js 中处理可见对象时的主要参考框架。

场景的中心是点(0,0,0)，也称为坐标原点。每当我们创建一个新对象并放入场景中时，默认是放置在原点。

相机(Camera)

在场景搭建好之后，我们需要将3D场景转化为人眼2D视角可见的东西，就需要引入相机，进行这种转换有很多种相机模式。对我们来说，最重要的相机是透视相机(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 的基本脚手架。但是我们无法在页面上看到脚手架的存在。

网格对象(mesh)

网格是 3D 计算机图形学中最常见的一种可见对象，用于显示各种 3D 对象。还有其他种类的可见对象，例如线条、形状、精灵和粒子等等。

网格一般包含几何模型和材质，在创建网格之前，需要创建几何模型和材质。

import { Mesh } from 'three';
const mesh = new Mesh(geometry, material);

几何模型形状定义了网格的形状，而材质定义了网格的表面外观。

基于以上介绍可以写一个简单的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 );
 }