使用3D引擎threeJS实现星空粒子移动效果_threejs实现星空资源-CSDN文库

3d引擎

position

1星 170 浏览量 2020-11-30 01:09:23 上传评论收藏 100KB PDF 举报

资源推荐

资源详情

资源评论

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

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你

可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。

下载地址: http://threejs.org/

首先创建一个HTML文件,引入three.js引擎包.

<!DOCTYPE HTML>

<html>

<head>

<title>Three.js实现3D空间粒子效果</title>

body{

background-color:#000000;

margin:0px;

overflow:hidden;

}

</style>

</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);

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

评论收藏

内容反馈

LClichuang

2021-04-12

差评1111111111111

weixin_38691453

粉丝: 4
资源: 944

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

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

基于three.js的炫酷Canvas 3D线条动画特效

threeJS 3D效果实例

基于threejs的交互例子动画特效

Threejs城市道路管道流光效果

threejs 局部泛光、局部发光使用

threejs写的一些特效

Threejs中3D模型使用透明发光材质并加线框

js原生 动态粒子星空特效

粒子星空代码大全，threejs粒子动画素材收藏

星空天空盒子-六张图-three.js-普清图·

3d效果动态无限星空粒子宇宙图

30多套threeJS 天空盒素材

vue和three.js版炫酷的登录页

纯css3绘制可爱的发光流星动画特效

threeproton是一个使用threejs库实现的神奇3D粒子引擎

js实现漫天星空，一闪一闪亮晶晶效果，一份特别浪漫的源代码

js实现宇宙星空背景效果的方法

星空彩带粒子流星般划过动画鼠标移动带视差效果js特效插件.zip

unity 星空 粒子特效

星空粒子特效 particles.rar

three.js-线上运动的光效

threeGalaxyGenerator:Three.js银河生成器

基于three.js的超酷线条动画特效

使用three.js 画渐变的直线

three.js仿人行走的动画效果

最新资源

js原生动态粒子星空特效

unity 星空粒子特效