唯美雪景雪花飘落代码，附效果演示

唯美雪景雪花飘落代码，

效果演示;

包括一个index.html代码+两个js代码+图片文件夹

简单的来说不是很难，主要就是以理解为主，修改index里面的文字内容，以及图片的替换，js 的代码不需要改动

index代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>唯美雪景雪花飘落效果代码</title>

</head>
<body onLoad="init()">

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<particles.length; i++)
{

var particle = particles[i];
particle.updatePhysics();

with(particle.position)
{
if(y<-1000) y+=2000;
if(x>1000) x-=2000;
else if(x<-1000) x+=2000;
if(z>1000) z-=2000;
else if(z<-1000) z+=2000;
}
}

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

}
</script>
<div style="text-align:center;">
<p>来源：源码之家</p>
</div>
</body>
</html>

还有两个js代码，这里就不过多写了，可以点击下面的下载整个源码https://yunpan.cn/cBL3PbIdfSRxX

访问密码 fdb4

唯美雪景雪花飘落代码，附效果演示相关推荐

个人网站html5雪花飘落代码JS特效下载
如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...
Photoshop把漂亮湖景照片调成唯美雪景效果
Photoshop把漂亮湖景照片调成唯美雪景效果感兴趣的小伙伴可加群:741090028,暗号:小螺号常看到有高手用改过的相机或者用红外线滤镜长曝出超梦幻雪景,感觉就像是进入了另一个世界,太美了. ...
第24章让唯美的雪花飘扬——三维粒子系统的实现
章节导读本章我们将一起探讨三维游戏中粒子系统的方方面面, 首先对粒子系统的基本概念特性做一个全面的认知,然后依旧是把粒子系统封装在一个C++类中,模拟了三维游戏中唯美的雪花飞扬的景象, 让我们之前实 ...
页面加密代码，附效果演示
页面加密代码,附效果演示效果演示: <!doctype html><html> <head> <body>&l ...
python带你体验唯美雪景，愿这个冬天的你，不缺暖阳
前言嗨喽,大家好呀~这里是爱看美女的茜茜呐又到了学Python时刻~ 大雪已至,冬天无恙,愿这个冬天的你,不缺暖阳,好日常在一.画一朵小雪花 import turtle import time ...
5种Python雪花飘落代码（建议收藏）
前言本文章向大家介绍用 Python 实现雪花飘落效果,运行以下代码,你将会看到一个美丽的雪花效果.你可以根据自己的需求,调整代码中的参数值以及其他细节. 第一种普通雪花代码: import tu ...
java实现下雪雪花飘落并堆积效果
在一个800*600的画布上实现雪花飘落并在下方堆积的一个效果.实现方案是画两层雪花,一层是飘落的,一层是在下方不动并堆积的. 演示效果(黄色的是月亮): 代码: import java.awt.Co ...
雪花飘落代码java_JS实现的雪花飘落特效示例
本文实例讲述了JS实现的雪花飘落特效.分享给大家供大家参考,具体如下: 首先我们要创建一个HTML文件,将其命名为index.html Canvas - 雪花特效 *{ margin:0px; pad ...
利用python绘制雪景图_彩铅 · 教程 | 教你画一张唯美雪景小图
准备画材 ★ 彩铅:辉柏嘉48色水溶性彩铅 ★ 纸张:荷兰白卡A5大小 ★ 超级nice的心情详细步骤 ▶step1:线稿.为了留出好看的白边,先用纸胶带框出画面范围.线稿很简单,整个画 ...

唯美雪景雪花飘落代码，附效果演示

唯美雪景雪花飘落代码，附效果演示相关推荐

最新文章

热门文章