使用3D引擎threeJS实现星空粒子移动效果
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。
下载地址: http://threejs.org/
首先创建一个HTML文件,引入three.js引擎包.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Three.js实现3D空间粒子效果</title>
<style type="text/css">
body{
background-color:#000000;
margin:0px;
overflow:hidden;
}
</style>
<script src="scripts/three.js"></script>
</head>
<body >
</body>
</html>
声明全局变量
//定义应用所需的组件:相机,场景,渲染器 var camera, scene, renderer; //跟踪鼠标的位置 var mouseX = 0, mouseY = 0; //定义存储粒子的数组 var particles = [];
相机:
OpenGL（WebGL）中、三维空间中的物体投影到二维空间的方式中，存在透视投影和正投影两种相机。
透视投影就是、从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。
正投影就是不管物体和视点距离，都按照统一的大小进行绘制、在建筑和设计等领域需要从各个角度来绘制物体，因此这种投影被广泛应用。
在 Three.js 也能够指定透视投影和正投影两种方式的相机。
场景:
场景就是一个三维空间。 用 [Scene] 类声明一个叫 [scene] 的对象。
渲染器:
三维空间里的物体映射到二维平面的过程被称为三维渲染。 一般来说我们都把进行渲染的操作叫做渲染器。
数据初始化
//数据初始化
function init(){
//相机参数：
//四个参数值分别代表:视野角：fov 纵横比：aspect 相机离视体最近的距离：near 相机离视体最远的距离：far
camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 4000 );
//设置相机位置,默认位置为:0,0,0.
camera.position.z = 1000;
//声明场景
scene = new THREE.Scene();
//将相机装加载到场景
scene.add(camera);
//生成渲染器的对象
renderer = new THREE.CanvasRenderer();
//设置渲染器的大小
renderer.setSize( window.innerWidth, window.innerHeight );
//追加元素
document.body.appendChild(renderer.domElement);
//调用自定义的生成粒子的方法
makeParticles();
//添加鼠标移动监听
document.addEventListener('mousemove',onMouseMove,false);
//设置间隔调用update函数,间隔次数为每秒30次
setInterval(update,1000/30);
}
相机初始化说明:
实例中使用的是透视投影. var camera = new THREE.PerspectiveCamera( fov , aspect , near , far );
透视投影中，会把称为视体积领域中的物体作成投影图。 视体积是通过以下4个参数来指定。
视野角：fov
纵横比：aspect
相机离视体积最近的距离：near
相机离视体积最远的距离：far
设置相机的位置:
相机的位置坐标和视野的中心坐标，按
//设置相机的位置坐标 camera.position.x = 100; camera.position.y = 20; camera.position.z = 50;
方式进行设置。 和该方式一样，下面这样的方法也可以
camera.position.set(100,20,50);
此外还可以设置相机的上方向,视野中心等,
设置相机的上方向为正方向:
camera.up.x = 0; camera.up.y = 0; camera.up.z = 1;
设置相机的视野中心
利用[lookAt]方法来设置相机的视野中心。 「lookAt()」的参数是一个属性包含中心坐标「x」「y」「z」的对象。
「lookAt()」方法不仅是用来设置视点的中心坐标、 在此之前设置的相机属性要发生实际作用，也需要调用 [lookAt] 方法。
其他投影方式
在 Three.js 中、有各种各样的类，用来来实现透视投影、正投影或者复合投影（透视投影和正投影）这样的相机。
var camera = THREE.OrthographicCamera = function ( left, right, top, bottom, near, far ) //正投影 var camera = THREE.CombinedCamera = function ( width, height, fov, near, far, orthonear, orthofar ) //複合投影
渲染器
创建CanvasRenderer对象.这是一个普通的2D画布对象,实例中我们添加到body标签中. 否则我们就不会看到它。我们想让它充满整个浏览器窗口，所以我们设置其大小为window.innerwidth和window.innerheight。
鼠标监听
使用自定义函数makeParticles()创建粒子,并为其添加mousemove侦听器来跟踪鼠标的位置,最后我们建立一个间隔调用update函数一秒30次。
update函数中的定义如下:
function update() {
updateParticles();
renderer.render( scene, camera );
}
产生粒子的函数
//定义粒子生成的方法
function makeParticles(){
var particle,material;
//粒子从Z轴产生区间在-1000到1000
for(var zpos=-1000;zpos<1000;zpos+=20){
//we make a particle material and pass through the colour and custom particle render function we defined.
material = new THREE.ParticleCanvasMaterial( { color: 0xffffff, program: particleRender } );
//生成粒子
particle = new THREE.Particle(material);
//随即产生x轴,y轴,区间值为-500-500
particle.position.x = Math.random()*1000-500;
particle.position.y = Math.random()*1000-500;
//设置z轴
particle.position.z = zpos;
//scale it up a bit
particle.scale.x = particle.scale.y = 10;
//将产生的粒子添加到场景,否则我们将不会看到它
scene.add(particle);
//将粒子位置的值保存到数组
particles.push(particle);
}
}
math . random()返回一个浮点数在0和1之间,我们乘以1000,给了我们一个0到1000之间的数字。然后我们减去500,这给了我们一个号码在-500和500之间.我们也可以这样定义一个生成范围区间内随机值的函数
function randomRange(min, max) {
return Math.random()*(max-min) + min;
}
绘制粒子的函数
//定义粒子绘制函数
function particleRender( context ) {
//获取canvas上下文的引用
context.beginPath();
// and we just have to draw our shape at 0,0 - in this
// case an arc from 0 to 2Pi radians or 360º - a full circle!
context.arc( 0, 0, 1, 0, Math.PI * 2, true );
//设置原型填充
context.fill();
}
定义粒子移动的函数,这里设置成移动速度随着鼠标距离Y轴0点的值越大,粒子移动越快,
//移动粒子的函数
function updateParticles(){
//遍历每个粒子
for(var i=0; i<particles.length; i++){
particle = particles[i];
//设置粒子向前移动的速度依赖于鼠标在平面Y轴上的距离
particle.position.z += mouseY * 0.1;
//如果粒子Z轴位置到1000,将z轴位置设置到-1000,即移动到原点,这样就会出现无穷尽的星域效果.
if(particle.position.z>1000){
particle.position.z-=2000;
}
}
}
鼠标移动时函数监听
//鼠标移动时调用
function onMouseMove(event){
mouseX = event.clientX;
mouseY = event.clientY;
}
至此,空间粒子简单效果学习完毕.
整合代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Three.js实现3D空间粒子效果</title>
<style type="text/css">
body{
background-color:#000000;
margin:0px;
overflow:hidden;
}
</style>
<script src="scripts/three.js"></script>
<script>
//定义应用所需的组件:相机,场景,渲染器
var camera, scene, renderer;
//跟踪鼠标的位置
var mouseX = 0, mouseY = 0;
//定义存储粒子的数组
var particles = [];
//数据初始化
function init(){
//相机参数：
//四个参数值分别代表:视野角：fov 纵横比：aspect 相机离视体最近的距离：near 相机离视体最远的距离：far
camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 4000 );
//设置相机位置,默认位置为:0,0,0.
camera.position.z = 1000;
//声明场景
scene = new THREE.Scene();
//将相机装加载到场景
scene.add(camera);
//生成渲染器的对象
renderer = new THREE.CanvasRenderer();
//设置渲染器的大小
renderer.setSize( window.innerWidth, window.innerHeight );
//追加元素
document.body.appendChild(renderer.domElement);
//调用自定义的生成粒子的方法
makeParticles();
//添加鼠标移动监听
document.addEventListener('mousemove',onMouseMove,false);
//设置间隔调用update函数,间隔次数为每秒30次
setInterval(update,1000/30);
}
function update() {
//调用移动粒子的函数
updateParticles();
//重新渲染
renderer.render( scene, camera );
}
//定义粒子生成的方法
function makeParticles(){
var particle,material;
//粒子从Z轴产生区间在-1000到1000
for(var zpos=-1000;zpos<1000;zpos+=20){
//we make a particle material and pass through the colour and custom particle render function we defined.
material = new THREE.ParticleCanvasMaterial( { color: 0xffffff, program: particleRender } );
//生成粒子
particle = new THREE.Particle(material);
//随即产生x轴,y轴,区间值为-500-500
particle.position.x = Math.random()*1000-500; //math . random()返回一个浮点数在0和1之间
particle.position.y = Math.random()*1000-500;
//设置z轴
particle.position.z = zpos;
//scale it up a bit
particle.scale.x = particle.scale.y = 10;
//将产生的粒子添加到场景
scene.add(particle);
//将粒子位置的值保存到数组
particles.push(particle);
}
}
//定义粒子渲染器
function particleRender( context ) {
//获取canvas上下文的引用
context.beginPath();
// and we just have to draw our shape at 0,0 - in this
// case an arc from 0 to 2Pi radians or 360º - a full circle!
context.arc( 0, 0, 1, 0, Math.PI * 2, true );
//设置原型填充
context.fill();
}
//移动粒子的函数
function updateParticles(){
//遍历每个粒子
for(var i=0; i<particles.length; i++){
particle = particles[i];
//设置粒子向前移动的速度依赖于鼠标在平面Y轴上的距离
particle.position.z += mouseY * 0.1;
//如果粒子Z轴位置到1000,将z轴位置设置到-1000
if(particle.position.z>1000){
particle.position.z-=2000;
}
}
}
//鼠标移动时调用
function onMouseMove(event){
mouseX = event.clientX;
mouseY = event.clientY;
}
</script>
</head>
<body onload="init()">
</body>
</html>
演示地址：http://creativejs.com/uploads/tutorials/three/Part1_particles/ThreeParticles.html
参考资料：http://creativejs.com/tutorials/three-js-part-1-make-a-star-field/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js星空效果代码
星空效果_www.jb51.net ABCD [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
使用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实现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
-
利用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轴位置
-
Python利用3D引擎做一个太阳系行星模拟器
这次,我们再来用Ursina引擎来做一个太阳系行星模拟器吧! 想要了解Ursina 3D引擎的基本使用方法的话,查看我的另一篇文章:详解Python 3D引擎Ursina如何绘制立体图形 这一次,我们要实现的效果如下 首先,送上本次需要用到的资源 Earth.jpg Jupiter.jpg Mars.jpg Mercury.jpg Neptune.jpg Saturn.jpg Sun.jpg Uranus.jpg Venus.jpg 现在,就开始写代码吧! 首先,导入我们需要的模块,导入3D引擎
-
详解Python 3D引擎Ursina如何绘制立体图形
目录 编写第一个程序 绘制实体长方体 对实体进行同样比例的放大和缩小 对实体进行任意放大 绘制球体 为你的实体上色 Python有一个不错的3D引擎——Ursina Ursina官网:www.ursinaengine.org 打开cmd,控制台输入pip install ursina以安装ursina 编写第一个程序 首先导入ursina from ursina import * 然后创建app app=Ursina() 运行app app.run() 最终代码: from ursina imp
-
Python利用3D引擎写一个Pong游戏
目录 前言 实现方法 完整代码 前言 之前,我们用pygame做了一个2D的Pong游戏,今天我们做一个3D的,游戏画面如下: 用ad和←→操作,双人对战 实现该效果我们使用Python强大的3D引擎Ursina,基础的使用方法见这篇文章:详解Python 3D引擎Ursina如何绘制立体图形 接下来开始写代码吧! 实现方法 首先,导入ursina和随机库 from ursina import * import random as rd 定义两个玩家的分数 scorea=scoreb=0 然后,
-
Android实现粒子爆炸效果的方法
本文实例讲述了Android实现粒子爆炸效果的方法.分享给大家供大家参考.具体如下: 1. Explosion.java文件: package net.obviam.particles.model; import android.graphics.Canvas; import android.graphics.Rect; import android.util.Log; public class Explosion { private static final String TAG = Expl
-
canvas实现粒子时钟效果
前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 通过遍历数字点阵的二维数组,当该位置的值为1时,则绘制一个粒子,否则不绘制 将绘制数字的函数命名为renderDigit().在该函数中,将粒子绘制为一个小圆.小圆的半径为R,小圆所占据的矩形宽(高)为2(R+1).由于数字点阵是10*7的二维数组,所以一个数字的宽度为14(R+1),高度为20(
-
Android实现粒子雨效果
本文实例介绍了Android实现粒子雨效果的实现过程,分享给大家供大家参考,具体内容如下 先看看效果图: 具体实现方法: 1.baseview主要是设定雨滴要实现的动作,只是先设定,也就是抽象方法,在子类中实现其方法 2.Rainitems封装雨滴类 3.Rainitems对雨滴集合创建到面板中,显示出来,具体实现就是在这个类中 一.baseview封装类,子类继承后实现方法即可 public abstract class BaseView extends View { private cont
-
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
本文实例讲述了原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=gbk> <title>www.jb51.net 粒子效果演示</title> <meta name="description" content="HTML5/canva