全屏3D雪花飘落html代码,html5 ThreeCanvas.js全屏3D大雪花飘落动画特效

àì夳堔傛蜴生んèń 2022-10-07 07:58 176阅读 0赞

特效描述：html5 ThreeCanvas.js 全屏3D 大雪花飘落 动画特效。全屏逼真雪花飘落特效，可随鼠标移动。

代码结构

1. 引入JS

2. HTML代码

逼真的雪花飘落特效

body\{background-color:\#000044;background:url(images/bg.jpg) repeat-x;margin:0px;overflow:hidden;\}

a\{color:\#0078ff;\}

var SCREEN\_WIDTH = window.innerWidth;

var SCREEN\_HEIGHT = window.innerHeight;

var container;

var particle;

var camera;

var scene;

var renderer;

var mouseX = 0;

var mouseY = 0;

var windowHalfX = window.innerWidth / 2;

var windowHalfY = window.innerHeight / 2;

var particles = \[\];

var particleImage = new Image();//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );

particleImage.src = 'images/ParticleSmoke.png';

function init() \{

container = document.createElement('div');

document.body.appendChild(container);

camera = new THREE.PerspectiveCamera( 75, SCREEN\_WIDTH / SCREEN\_HEIGHT, 1, 10000 );

camera.position.z = 1000;

scene = new THREE.Scene();

scene.add(camera);

renderer = new THREE.CanvasRenderer();

renderer.setSize(SCREEN\_WIDTH, SCREEN\_HEIGHT);

var material = new THREE.ParticleBasicMaterial( \{ map: new THREE.Texture(particleImage) \} );

for (var i = 0; i < 500; i++) \{

particle = new Particle3D( material);

particle.position.x = Math.random() \* 2000 - 1000;

particle.position.y = Math.random() \* 2000 - 1000;

particle.position.z = Math.random() \* 2000 - 1000;

particle.scale.x = particle.scale.y = 1;

scene.add( particle );

particles.push(particle);

\}

container.appendChild( renderer.domElement );

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

document.addEventListener( 'touchstart', onDocumentTouchStart, false );

document.addEventListener( 'touchmove', onDocumentTouchMove, false );

setInterval( loop, 1000 / 60 );

\}

function onDocumentMouseMove( event ) \{

mouseX = event.clientX - windowHalfX;

mouseY = event.clientY - windowHalfY;

\}

function onDocumentTouchStart( event ) \{

if ( event.touches.length == 1 ) \{

event.preventDefault();

mouseX = event.touches\[ 0 \].pageX - windowHalfX;

mouseY = event.touches\[ 0 \].pageY - windowHalfY;

\}

\}

function onDocumentTouchMove( event ) \{

if ( event.touches.length == 1 ) \{

event.preventDefault();

mouseX = event.touches\[ 0 \].pageX - windowHalfX;

mouseY = event.touches\[ 0 \].pageY - windowHalfY;

\}

\}

//

function loop() \{

for(var i = 0; i

\{

var particle = particles\[i\];

particle.updatePhysics();

with(particle.position)

\{

if(y

if(x>1000) x-=2000;

else if(x

if(z>1000) z-=2000;

else if(z

\}

\}

camera.position.x += ( mouseX - camera.position.x ) \* 0.05;

camera.position.y += ( - mouseY - camera.position.y ) \* 0.05;

camera.lookAt(scene.position);

renderer.render( scene, camera );

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，176人围观）

还没有评论，来说两句吧...

相关阅读

相关制作雪花飘落特效

制作雪花飘落特效前言图形图像处理是计算机视觉的重要分支之一，也是很多其他领域的基础，如机器学习、人工智能等。OpenCV-Python 是一个基于 Python 的开源

迈不过友情╰/ 2024年03月17日 17:35/ 0 赞/ 50 阅读

相关 js实现漂亮的雪花飘落效果

js实现漂亮的雪花飘落效果效果如下：雪花飘落四个按钮控制雪花的生成与停止关键代码：这个代码还有许多不足，希望大佬指正 var W =

Bertha 。/ 2022年12月25日 00:47/ 0 赞/ 159 阅读

相关全屏3D雪花飘落html代码,html5 ThreeCanvas.js全屏3D大雪花飘落动画特效

特效描述：html5 ThreeCanvas.js 全屏3D 大雪花飘落动画特效。全屏逼真雪花飘落特效，可随鼠标移动。代码结构 1. 引入JS 2. HTML代码

àì夳堔傛蜴生んèń/ 2022年10月07日 07:58/ 0 赞/ 177 阅读

相关用纯CSS3的animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜

雪花飘落： //雪花飘落 .snowDown { animation: snowDown 3s linear infinite normal; -webkit-ani

淡淡的烟草味﹌/ 2022年09月26日 15:55/ 0 赞/ 202 阅读

相关 Query雪花飘落背景特效

[下载地址![icon-default.png?t=L892][icon-default.png_t_L892]/images/20220828/5ae7a8091ab54da

雨点打透心脏的1/2处/ 2022年09月11日 03:29/ 0 赞/ 152 阅读

相关 CSS3 HTML5下雪特效雪花飘飘

<!doctype html> <html lang="en"> <head> <meta charset=utf-8 /> <titl

阳光穿透心脏的1/2处/ 2022年08月13日 14:46/ 0 赞/ 223 阅读

相关简单说 JavaScript实现雪花飘落效果

说明这次实现的雪花飘落的效果很简单，主要是为了练习练习JavaScript中的定时器，setTimeout 和 setInterval。效果图 ![这里写图片

深藏阁楼爱情的钟/ 2022年06月05日 11:05/ 0 赞/ 660 阅读

相关 3d飘雪效果

演示需要：4张雪花图（snow.1 - 4.png）和1张背景图 image.src = './images/' + 'snow' + randomInteger(1

朴灿烈づ我的快乐病毒、/ 2022年05月30日 02:39/ 0 赞/ 198 阅读

相关 HTML5--浏览器全屏操作、退出全屏、是否全屏

[HTML5--浏览器全屏操作、退出全屏、是否全屏][HTML5--] <!DOCTYPE html> <html lang="en"> <he

爱被打了一巴掌/ 2021年10月23日 14:12/ 0 赞/ 717 阅读

相关 HTML5 video 进入全屏和退出全屏

当我们使用video标签的时候，有时候因为更多的需要，我们要自己自定义控制栏，而进入和退出全屏也是其中的一部分不同的浏览器有不同的实现方法 // Webki

àì夳堔傛蜴生んèń/ 2021年09月18日 15:38/ 0 赞/ 614 阅读