WPF实现3D粒子波浪效果

本文实例为大家分享了WPF实现3D粒子波浪效果的具体代码,供大家参考,具体内容如下

实现效果如下:

步骤:

1、3D粒子类Particle.cs

public class Particle
 {
  public Point3D Position;//位置
  public double Size;//尺寸
  public int XIndex;//X位置标识
  public int YIndex;//Y位置标识
 }

2、粒子系统ParticleSystem类

public class ParticleSystem
 {
  private readonly List<Particle> _particleList;
  private readonly GeometryModel3D _particleModel;
  private readonly int SEPARATION = 100;

  public ParticleSystem(int amountX, int amountY, Color color, int Size)
  {
   XParticleCount = amountX;
   YParticleCount = amountY;

   _particleList = new List<Particle>();

   _particleModel = new GeometryModel3D { Geometry = new MeshGeometry3D() };

   var e = new Ellipse
   {
    Width = Size,
    Height = Size
   };
   var b = new RadialGradientBrush();
   b.GradientStops.Add(new GradientStop(Color.FromArgb(0xFF, color.R, color.G, color.B), 0.25));
   b.GradientStops.Add(new GradientStop(Color.FromArgb(0x00, color.R, color.G, color.B), 1.0));
   e.Fill = b;
   e.Measure(new Size(Size, Size));
   e.Arrange(new Rect(0, 0, Size, Size));

   Brush brush = null;
   var renderTarget = new RenderTargetBitmap(Size, Size, 96, 96, PixelFormats.Pbgra32);
   renderTarget.Render(e);
   renderTarget.Freeze();
   brush = new ImageBrush(renderTarget);

   var material = new DiffuseMaterial(brush);
   _particleModel.Material = material;
  }

  public int XParticleCount { get; set; }
  public int YParticleCount { get; set; }
  public Model3D ParticleModel => _particleModel;
  private double _count = 0;

  public void Update()
  {
   // 计算粒子位置及大小
   for (int ix = 0; ix < XParticleCount; ix++)
   {
    for (int iy = 0; iy < YParticleCount; iy++)
    {
     foreach (var p in _particleList)
     {
      if(p.XIndex == ix && p.YIndex == iy)
      {
       p.Position.Z = (Math.Sin((ix + _count) * 0.3) * 100) + (Math.Sin((iy + _count) * 0.5) * 100);
       p.Size = (Math.Sin((ix + _count) * 0.3) + 1) * 8 + (Math.Sin((iy + _count) * 0.5) + 1) * 8;
      }
     }
    }
   }
   _count += 0.1;

   UpdateGeometry();
  }

  private void UpdateGeometry()
  {
   var positions = new Point3DCollection();
   var indices = new Int32Collection();
   var texcoords = new PointCollection();

   for (var i = 0; i < _particleList.Count; ++i)
   {
    var positionIndex = i * 4;
    var indexIndex = i * 6;
    var p = _particleList[i];

    var p1 = new Point3D(p.Position.X, p.Position.Y, p.Position.Z);
    var p2 = new Point3D(p.Position.X, p.Position.Y + p.Size, p.Position.Z);
    var p3 = new Point3D(p.Position.X + p.Size, p.Position.Y + p.Size, p.Position.Z);
    var p4 = new Point3D(p.Position.X + p.Size, p.Position.Y, p.Position.Z);

    positions.Add(p1);
    positions.Add(p2);
    positions.Add(p3);
    positions.Add(p4);

    var t1 = new Point(0.0, 0.0);
    var t2 = new Point(0.0, 1.0);
    var t3 = new Point(1.0, 1.0);
    var t4 = new Point(1.0, 0.0);

    texcoords.Add(t1);
    texcoords.Add(t2);
    texcoords.Add(t3);
    texcoords.Add(t4);

    indices.Add(positionIndex);
    indices.Add(positionIndex + 2);
    indices.Add(positionIndex + 1);
    indices.Add(positionIndex);
    indices.Add(positionIndex + 3);
    indices.Add(positionIndex + 2);
   }

   ((MeshGeometry3D)_particleModel.Geometry).Positions = positions;
   ((MeshGeometry3D)_particleModel.Geometry).TriangleIndices = indices;
   ((MeshGeometry3D)_particleModel.Geometry).TextureCoordinates = texcoords;
  }

  public void SpawnParticle(double size)
  {
   // 初始化粒子位置和大小
   for (int ix = 0; ix < XParticleCount; ix++)
   {
    for (int iy = 0; iy < YParticleCount; iy++)
    {
     var p = new Particle
     {
      Position = new Point3D(ix * SEPARATION - ((XParticleCount * SEPARATION) / 2), iy * SEPARATION - ((YParticleCount * SEPARATION) / 2), 0),
      Size = size,
      XIndex = ix,
      YIndex = iy,
     };
     _particleList.Add(p);
    }
   }
  }
 }

3、Viewport布局

<Viewport3D Name="World">
   <Viewport3D.Camera>
    <PerspectiveCamera Position="0,50,1000" LookDirection="0,2,-1" UpDirection="0,-1,-1" FieldOfView="10000" NearPlaneDistance="10" FarPlaneDistance="8000"/>
   </Viewport3D.Camera>
   <Viewport3D.Children>
    <ModelVisual3D>
     <ModelVisual3D.Content>
      <Model3DGroup x:Name="WorldModels">
       <AmbientLight Color="#FFFFFFFF" />
      </Model3DGroup>
     </ModelVisual3D.Content>
    </ModelVisual3D>
   </Viewport3D.Children>
</Viewport3D>

4、交互逻辑

private readonly ParticleSystem _ps;
private DispatcherTimer _frameTimer;

  public MainWindow()
  {
   InitializeComponent();

   _frameTimer = new DispatcherTimer();
   _frameTimer.Tick += OnFrame;
   _frameTimer.Interval = TimeSpan.FromSeconds(1.0 / 60.0);
   _frameTimer.Start();

   _ps = new ParticleSystem(50, 50, Colors.White, 30);

   WorldModels.Children.Add(_ps.ParticleModel);

   _ps.SpawnParticle(30);

   KeyDown += Window_KeyDown;
   Cursor = Cursors.None;
  }

  private void Window_KeyDown(object sender, KeyEventArgs e)
  {
   if (e.Key == Key.Escape)
    Close();
  }

  private void OnFrame(object sender, EventArgs e)
  {
   _ps.Update();
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • WPF实现3D立方体波浪墙效果

    本文实例为大家分享了WPF实现3D立方体波浪墙效果的具体代码,供大家参考,具体内容如下 实现效果如下: 思路:仿照3D粒子系统,将粒子颗粒的Geometry改造为立方体,鼠标移动时将鼠标位置转为3D场景中的坐标. 步骤: 1.粒子类Particle.cs public Point3D Position;//位置 public double Width;//长方体底面宽 public double Height;//长方体侧面高 2.粒子系统ParticleSystem.cs private re

  • WPF实现3D粒子波浪效果

    本文实例为大家分享了WPF实现3D粒子波浪效果的具体代码,供大家参考,具体内容如下 实现效果如下: 步骤: 1.3D粒子类Particle.cs public class Particle { public Point3D Position;//位置 public double Size;//尺寸 public int XIndex;//X位置标识 public int YIndex;//Y位置标识 } 2.粒子系统ParticleSystem类 public class ParticleSys

  • 使用3D引擎threeJS实现星空粒子移动效果

    three.js是JavaScript编写的WebGL第三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象. 下载地址: http://threejs.org/ 首先创建一个HTML文件,引入three.js引擎包. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <titl

  • WPF实现文字粒子闪烁动画效果

    本文实例为大家分享了WPF实现文字粒子闪烁动画的具体代码,供大家参考,具体内容如下 实现效果如下: 思路:首先根据显示文本创建文本路径Geometry,然后在路径内随机生成圆形粒子并添加动画. 步骤: 1.粒子类Particle.cs public class Particle { /// <summary> /// 形状 /// </summary> public Ellipse Shape; /// <summary> /// 坐标 /// </summary

  • 利用JavaScript实现3D可旋转粒子矩阵效果

    目录 演示 技术栈 dat.gui.min.js 源码 js部分 演示 技术栈 本次使用了dat.gui.min.js这个新库(就是在我文章里没有出现过的那么他们的功能有哪些呢?——可以百度搜搜)不想搜的话就听我简单絮叨两句吧. dat.gui.min.js 就是能调节数据的功能框 使用起来也很简单例如建立一个对象 gui = { lightY:30, //灯光y轴的位置 sphereX:0, //球的x轴的位置 sphereZ:0, //球的z轴的位置 cubeX:25, //立方体的x轴位置

  • 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

  • 基于three.js实现的3D粒子动效实例代码

    一.背景 粒子特效是为模拟现实中的水.火.雾.气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器.脚本来控制其整体或单个的运动,模拟出现真实的效果.three.js是用JavaScript编写的WebGL的第三方库,three.js提供了丰富的API帮助我们去实现3D动效,本文主要介绍如何使用three.js实现粒子过渡效果,以及基本的鼠标交互操作. (注:本文使用的关于three.js的API都是基于版本r98的.) 二.实现步骤 1. 创建渲染场景

  • WPF实现3D翻牌式倒计时特效

    本文实例为大家分享了WPF实现3D翻牌式倒计时的具体代码,供大家参考,具体内容如下 实现效果如下: 思路:使用自定义控件,设置一个背板 MyCardControlBottom,一个卡牌翻动的前部 MyCardControlFront,一个卡牌翻动后的背部 MyCardControlBack,另外实现卡牌翻动的MyCardControl:在主窗体中设置一计时器,根据卡牌上的数字和计时器时间启动翻牌动作. 主要代码: 1.自定义控件MyCardControlBottom <UserControl x

  • js实现3D粒子酷炫动态旋转特效

    js实现3D粒子酷炫动态旋转特效(效果比较酷炫,中途不仅有形态的变换,还有颜色的变化,希望大家能够喜欢) 代码实现过程中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTEN

  • jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】

    本文实例讲述了jQuery插件FusionCharts绘制的3D双柱状图效果.分享给大家供大家参考,具体如下: 1.3D双柱状图页面源码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Con

随机推荐