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

àì夳堔傛蜴生んèń 2022-10-07 07:58 252阅读 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 条评论，252人围观）

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

相关阅读

相关【打造寒冬中的浪漫雪景——OpenCV-Python 雪花飘落特效】

【打造寒冬中的浪漫雪景——OpenCV-Python 雪花飘落特效】寒冬到来，想要为自己的网站或者APP增添一些浪漫雪景效果吗？那就别错过这篇OpenCV-Python实

深藏阁楼爱情的钟/ 2024年03月25日 22:02/ 0 赞/ 101 阅读

相关制作雪花飘落特效

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

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

相关【HTML】html5 canvas全屏烟花动画特效

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta

刺骨的言语ヽ痛彻心扉/ 2023年07月21日 08:36/ 0 赞/ 112 阅读

相关 js实现雪花飘落效果

js实现雪花飘落效果我们可以先看看效果点这里 [雪花][Link 1] ![雪花飘落][watermark_type_ZmFuZ3poZW5naGVpdGk_

比眉伴天荒/ 2023年02月13日 05:50/ 0 赞/ 64 阅读

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

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

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

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

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

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

相关 Query雪花飘落背景特效

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

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

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

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

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

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

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

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

相关 3d飘雪效果

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

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