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

3d引擎

position

1星 138 浏览量更新于2023-03-16 评论收藏 100KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

使用使用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
资源: 943

会员权益专享

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

评论1

会员权益专享

最新资源

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

评论1

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

基于HTML5 WebGL的3D星云动画特效

js 黑洞资源特效

threejs实现星空效果

web实现星空粒子效果

threejs 流星 拖尾

请编写一个js实现星空效果

threejs 天空盒

绚烂星空烟花+3D旋转相册

html星空粒子特效代码

小程序版纯css星空粒子背景

threejs 天空盒下载

cesiumjs 星空

js css 实现动画 背景星空 地球飘过

请编写一个html实现星空效果

写一段Python代码，实现星空效果

小程序 星空动画效果

可以用three.js实现类似游戏原神中的天空随时间变化的效果吗，比如随时间变化从早上到中午，增加阳光，到傍晚有夕阳，到晚上有星星

年会酷炫抽奖,绚丽3d照片墙效果,html抽奖功能,canvas星空 流星效果,抽奖功能完善,

html背景js星空背景

会员权益专享

最新资源

threejs 流星拖尾

js css 实现动画背景星空地球飘过

小程序星空动画效果

年会酷炫抽奖,绚丽3d照片墙效果,html抽奖功能,canvas星空流星效果,抽奖功能完善,