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

目录
  • 背景
  • Three.js工作原理
    • 场景(Scene)
    • 相机(Camera)
    • 渲染器(renderer)
    • 网格对象(mesh)
  • react-three-fiber
    • 画布(Canvas)
  • 3D粒子模型构建
  • 实现思路
    • 定义buffer几何体,并填充数据
    • 将buffer几何体包裹在点模型中,并为每个点引入材质
    • 加入旋转动画
    • 最后呈现结果

背景

初学者怎么用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 );
 }

react-three-fiber

react-three-fiber在它的github的readme.md上声明了三点前提:

  • 在 Threejs 中可以实现的都可以在react-three-fiber实现。
  • react-three-fiber没有额外的开销,并且由于 Reacts 调度能力,它在规模上优于 Threejs。
  • react-three-fiber可以跟上three.js的频繁功能更新,three.js版本添加、删除或更改功能,无需依赖此库的更新。

react-three-fiber的生态系统

画布(Canvas)

Canvas 组件在幕后做了一些重要的设置工作:

  • 它设置了SceneCamera,这是渲染所需的基本构建块
  • 它每帧渲染我们的场景,不需要传统的渲染循环
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 响应适应父节点,因此可以通过更改父节点的宽度和高度来控制它的大小,在本例中为 #canvas-container

上面的three.js demo 代码用react-three-fiber实现如下:

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粒子模型构建

首先看一段非常简单的粒子模型的three.js实现

// 创建一个球体几何对象
 var geometry = new THREE.SphereGeometry(100, 25, 25);
// 创建一个点材质对象
var material = new THREE.PointsMaterial({
    color: 0x0000ff, //颜色
    size: 3, //点渲染尺寸
});
// 点模型对象 参数:几何体 点材质
let point = new THREE.Points(geometry, material);
// 网格模型添加到场景中
 scene.add(point); 

THREE.Points - 用来创造点的类,也用来批量管理粒子,这个类的构造函数可以接受两个参数,一个几何体和一个材质,几何体参数用来定义粒子的位置坐标,而材质参数用来格式化粒子.

  • 在threejs的粒子系统中,每个粒子其实是一张图片或者一个canvas而不是3D的物体。
  • 当粒子量级非常大时,可以用BufferGeometry来代替Geometry的顶点,因为它可以将数据存储在缓冲区中,减少数据传递到GPU的成本,同时因为在缓冲区,所以更适合静态的物体。

实现思路

  • 定义buffer几何体,并填充数据

创建buffer几何体

<bufferGeometry attach="geometry"></bufferGeometry>

几何体定义好之后需要往里填充数据。假设我们的星系是由70000颗星星组成,星系的背景零零散散的有9000颗星星环绕。我们需要确定各个点的位置和颜色。背景的星星统一由蓝色的点,我们在之后的材质里定义颜色,星系的星星使用颜色矩阵。

//背景
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>
  • 将buffer几何体包裹在点模型中,并为每个点引入材质

引入点材质

const textureLoader = new THREE.TextureLoader();
const shape = textureLoader.load('1.png');

为每个点,加载材质。

// 背景
<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这个钩子允许你在每个渲染的帧上执行代码,比如运行效果、更新控件等等。你会收到状态和时钟增量。您的回调函数将在渲染帧之前被调用。当组件卸载时,它会自动从渲染循环中取消订阅。

最后呈现结果

到此这篇关于react-three-fiber实现炫酷3D粒子效果首页的文章就介绍到这了,更多相关react 3D粒子内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Three.js+React制作3D梦中海岛效果

    目录 背景 效果 实现 素材准备 资源引入 页面结构 场景初始化 海 天空 虹 岛 鸟 交互点 动画 总结 背景 深居内陆的人们,大概每个人都有过大海之梦吧.夏日傍晚在沙滩漫步奔跑:或是在海上冲浪游泳:或是在海岛游玩探险:亦或静待日出日落……本文使用 React + Three.js 技术栈,实现 3D 海洋和岛屿,主要包含知识点包括:Tone Mapping.Water 类.Sky 类.Shader 着色.ShaderMaterial 着色器材质.Raycaster 检测遮挡以及 Three.

  • Three.js+React实现3D开放世界小游戏

    目录 背景 效果 设计 实现 加载资源 页面结构 数据初始化 场景初始化 创建世界 创建星空 创建地形 加载进度管理 创建基地模型 创建阿狸模型 控制阿狸运动 动画更新 页面缩放适配 添加游戏逻辑 毛玻璃效果 总结 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民必须穿戴基地发放的防辐射服才能生存.阿狸驾驶星际飞行器降临此地,快帮它在限定时间内使用轮盘移动找到基地获取防辐射服吧! 本文使用 Three.js + React + CANNON 技术栈,实现通过滑动屏

  • Three.js+React使二维图片呈现3D效果

    目录 背景 效果 实现 素材制作 资源引入 场景初始化 创建漫画主体 创建Boom背景 镜头控制.缩放适配.动画 总结 背景 逛 sketchfab 网站的时候我看到有很多二维平面转 3D 的模型例子,于是仿照他们的例子,使用 Three.js + React 技术栈,将二维漫画图片转化为三维视觉效果.本文包含的内容主要包括:THREE.Group 层级模型.MeshPhongMaterial 高光网格材质.正弦余弦函数 创建模型移动轨迹等. 效果 实现效果如下图所示:页面主要有背景图.漫画图片

  • Three.js+React实现3D文字悬浮效果

    目录 背景 效果 实现 资源引入 DOM结构 设置状态 网格背景 场景初始化 创建材质 创建文字模型 创建几何体模型 鼠标事件监听 背景色切换 后期渲染 动画 缩放适配 双击全屏 总结 背景 在 Three.js Journey 课程示例中,提供了一个使用 Three.js 内置方法实现的 3D 文字悬浮效果的例子,本文使用 React + Three.js 技术栈,参照示例实现类似的效果.本文中涉及到的知识点主要包括:CSS 网格背景.MeshNormalMaterial 法向材质.FontL

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

    目录 背景 Three.js工作原理 场景(Scene) 相机(Camera) 渲染器(renderer) 网格对象(mesh) react-three-fiber 画布(Canvas) 3D粒子模型构建 实现思路 定义buffer几何体,并填充数据 将buffer几何体包裹在点模型中,并为每个点引入材质 加入旋转动画 最后呈现结果 背景 初学者怎么用react-three-fiber实现一个炫酷粒子效果的首页 Three.js工作原理 场景(Scene).相机(Camera)和渲染器(Rend

  • JS+CSS3制作炫酷的弹窗效果

    昨天在家看电视时,退出的时候发现了一个弹窗效果,整个背景模糊,觉得这样的效果好炫,要比纯色加透明度高大上好多,连续试了几个界面,最终确定效果由css实现的,于是今天一大早来到公司便赶紧搜索了一下,虽然兼容性奇差,但是一个css属性就可以搞定.瞬间感觉自己知道的真是太少了~~ 首先回忆一下弹窗的实现,一般我们分为两层,弹出窗口层(popus)和遮罩层(mask),通常情况下我习惯就这两元素全部设成fixed定位,具体和absolute区别一试便知.对于mask层自不用多少,我们如下给他设置属性,让

  • Android打造炫酷进度条效果

    本文实例为大家分享了Android炫酷进度条效果的具体代码,供大家参考,具体内容如下 学习:视频地址 HorizontalProgressbarWithProgress的代码 import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.os.Build; imp

  • Unity中 ShaderGraph 实现超级炫酷的溶解效果入门级教程

    目录 前言 一,效果展示 二,原理介绍 三,实现效果 四,使用示例 五,完整图示 前言 若你的工程还没有进行基础配置,请查看我的博文Unity 之 ShaderGraph入门使用详解,按照步骤操作完成配置即可,还能顺便学习一下基础操作流程哦~ 本文手把手教你制作超级炫酷的溶解效果,入门级教程,还不快动手试试?有经验的童鞋可以直接跳到最后一步,按照图示搭建即可. 一,效果展示 老规矩,直接上效果图:(最高端的效果只需要最简单的模型呈现) 没学习Shader Graph之前:我靠

  • js实现炫酷的烟花效果

    本文实例为大家分享了js实现炫酷的烟花效果的具体代码,供大家参考,具体内容如下 我们要理清整个流程的思路. 首先建立一块画布,用于展示烟花的效果,然后就要去思考烟花燃放的流程,我们都知道烟花通常都是先有一份飞上天,然后再分散成很多个小烟花,并且每一个小烟花都有不同的样式以及运动方式. 所有整体思路就是先建立一个div作为我们的大烟花,当大烟花运动到我们鼠标点击的位置的时候,大烟花就会消失,然后就会产生更多的小烟花,并且这些小烟花的运动轨迹样式各不相同. 1.建立一块画布(div)用于展示烟花的效

  • Android实现炫酷的CheckBox效果

    首先贴出实现的效果图: gif的效果可能有点过快,在真机上运行的效果会更好一些.我们主要的思路就是利用属性动画来动态地画出选中状态以及对勾的绘制过程.看到上面的效果图,相信大家都迫不及待地要跃跃欲试了,那就让我们开始吧. 自定义View的第一步:自定义属性. <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="SmoothChe

  • JS实现炫酷雪花飘落效果

    用js实现漂亮的雪花飘过效果: 步骤: 页面基本样式,雪花旋转动画效果 body{ width: 100vw; height: 100vh; background-color: #000; overflow: hidden; user-select: none; -webkit-user-select: none; } .snowAnimation { animation: snow 5s infinite linear; -webkit-animation: snow 5s infinite

  • Flutter 实现酷炫的3D效果示例代码

    此文讲解3个酷炫的3D动画效果. 下面是要实现的效果: Flutter 中3D效果是通过 Transform 组件实现的,没有变换效果的实现: class TransformDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('3D 变换Demo'), ), body: Container( alignm

  • Android使用Circular Reveal动画让页面跳转更炫酷

    Android 5.0中引入了很多炫酷的动画效果,Circular Reveal便是其中一种.使用起来很简单,但效果却是意想不到的炫酷,让你的app更有逼格. 一.效果 废话不说,下面的gif图中使用Circular Reveal动画实现跳转到搜索页的效果.gif图压缩宽高比失真了,不过效果还在.源码在最下面,可以下载体验下. 二.Circular Reveal介绍 当您显示或隐藏一组 UI 元素时,揭露动画可为用户提供视觉连续性. ViewAnimationUtils.createCircul

  • vue中使用animate.css实现炫酷动画效果

    目录 1.安装(在vscode终端中,使用npm安装) 2.引入 3.代码实现 animate.css 是一个来自国外的 CSS3 动画库,它提供了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果.这些效果在大多数支持CSS3的浏览器上都能保持一致.简单来说,我们使用它,只需要写很少的代码,就可以实现非常炫酷的动画效果. 官

随机推荐