ThreeJS 粒子系统实现雪花飘落动画

最新推荐文章于 2024-06-28 16:11:32 发布

青木_sp

最新推荐文章于 2024-06-28 16:11:32 发布

阅读量5.8k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： three.js 雪花动画飘雪动画 js动画

本文链接：https://blog.youkuaiyun.com/liu_lin_sp/article/details/87008714

在这里插入图片描述
ThreeJS 粒子系统中，THREE.Points是用来创建点的类，也用来批量管理粒子，基于几何体的顶点来渲染每个粒子。这个类的构造函数有两个参数，geometry(几何体)和material(材质)，几何体参数用来设置粒子的位置坐标，而材质参数用来设置粒子的外观。下面利用ThreeJS的粒子系统来实现雪花飘落动画。

1. 寻找素材

1) 背景图片

选择一张雪景图片作为背景图

snow_bg.jpg

2) 雪花图片

为了让动画效果更好，使用两种不同形状的雪花实现雪花飘落效果。

在这里插入图片描述

snowflake.png

2. HTML部分

网页中添加canvas画布所在的元素

<div id="snowBackground"></div>

3. JS部分

1) 初始化渲染器、场景、摄像机

var width = 550; // 画布的宽度
var height = 366; // 画布的高度

// 渲染器
var renderer = new THREE.WebGLRenderer({
   
   antialias:true});
renderer.setSize(width, height);
// 将canvas添加到指定元素
var element = document.getElementById('snowBackground');
element.appendChild(renderer.domElement);

// 场景
var scene = new THREE.Scene();
// 正交投影摄像机
var camera = new THREE.PerspectiveCamera(45, width/height, 2, 500);
camera.position.set(0, 0, 40); // 摄像机位置
// 照相机默认沿z轴负方向观察，通过设置lookAt的位置可以改变观察的方向
camera.lookAt(new THREE.Vector3