首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onSeptember 13, 2020

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] 方法。

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

其他投影方式

在 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

苏若年

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
BootStrap Table对前台页面表格的支持实例讲解
Dec 22 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
一文读懂vue动态属性数据绑定（v-bind指令）
Jul 20 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
小程序实现文字循环滚动动画
Jun 14 Javascript
vue.js项目打包上线的图文教程
Nov 16 #Javascript
Three.js基础学习教程
Nov 16 #Javascript
three.js实现3D视野缩放效果
Nov 16 #Javascript
three.js中3D视野的缩放实现代码
Nov 16 #Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 #Javascript
React/Redux应用使用Async/Await的方法
Nov 16 #Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 #Javascript
保证书(97) 活动总结(790) 主持词(345) 决心书(42) 感谢信(72) 倡议书(159) 评语(336) 请假条(31) 责任书(145) 建议书(203)
You might like
基于PHP中的常用函数回顾
2013/07/11 PHP
PHP中鲜为人知的10个函数
2014/02/28 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
Bootstrap源码解读媒体对象、列表组和面板（10）
2016/12/26 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python实现获取汉字偏旁部首的方法示例【测试可用】
2018/12/18 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
LivingSocial英国：英国本地优惠
2019/02/22 全球购物
捷克多品牌在线时尚商店：ANSWEAR.cz
2020/10/03 全球购物
师范生自我鉴定
2014/03/20 职场文书
减负增效提质方案
2014/05/23 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
感恩老师主题班会
2015/08/12 职场文书
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python