nelson
/
beeblog
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

下雪背静

layui
mail_yanpeng@163.com 6 years ago
parent
b6f0496fee
commit
72708b225a
2 changed files with 339 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      static/img/snow.png
  2. 339
      views/snow.html

BIN
static/img/snow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

339
views/snow.html
View File

@ -0,0 +1,339 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
background-size: cover;
background-position: center center;
overflow: hidden;
}
</style>
</head>
<body onload="draw();" style="background-image: url(https://jllsly.com/wallpapers/snow-night-wallpapers-high-quality-resolution-Is-Cool-Wallpapers-1.jpg);">
</body>
<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js"></script>
<script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js"></script>
<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/gsap/latest/TweenMax.min.js"></script>
<script>
//https://www.overdriveonline.com/wp-content/uploads/sites/8/2013/01/Truck-at-night-in-snow.jpg
//https://ateachinglifedotcom.files.wordpress.com/2016/12/snow-at-night.jpg
//https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/H0MA-uKSipsekm5s/magical-winter-night-in-the-snow-covered-pine-forest-realistic-3d-animation_bcgk90me1g_thumbnail-full01.png
//https://i.pinimg.com/originals/18/03/c9/1803c9683d2a6acb5f827114015a51c8.jpg
//https://travelingorion.files.wordpress.com/2017/02/img_6666.jpg
//https://jllsly.com/wallpapers/snow-night-wallpaper-desktop-Is-Cool-Wallpapers-1.jpg
//https://juegosrev.com/wp-content/uploads/2017/06/Winter-Night-Wallpapers-Gallery-88-Plus-PIC-WPW504471.jpg
//https://jllsly.com/wallpapers/snow-night-wallpapers-high-quality-resolution-Is-Cool-Wallpapers-1.jpg
setInterval(function(){
if (location.hash.length > 2) {
document.body.style.backgroundImage = "url("+ location.hash.substr(1) + ")";
}
}, 1000)
var renderer, camera;
var swidth,sheight, swidth_2;
var rotateRatio = 0.04;
var wind = {x:0, z:0, y:0, ratio:0.45};
let windChangeStep = function(key){
TweenMax.to(
wind,
_.random(1.6, 2.5, true),
{
[key]:_.random(-1, 1, true) * wind.ratio,
ease: Power2.easeInOut,
onComplete:function(){
windChangeStep(key)
}
}
)
}
windChangeStep("x");
windChangeStep("z");
windChangeStep("y");
var getVelocity = function(){
return {
y:_.random(-0.2, -0.05, true) * 1.4,
x:_.random(-0.1, 0.2, true) * 0.01,
z:_.random(-0.1, 0.2, true) * 0.01,
angle:_.random(-Math.PI/2, Math.PI/2, true)
}
}
function clacSize(){
swidth = window.innerWidth * 0.05;
sheight = window.innerHeight * 0.05;
swidth_2 = swidth * swidth;
}
$(window).on("resize", e=>{
_.throttle(e=>{
clacSize();
}, 300)
});
clacSize();
$(document).on("mousemove", e=>{
let {screenX, screenY} = e;
// wind.x = (screenX - innerWidth * 0.5)/innerWidth/2 * 1.2;
// wind.z = (screenY - innerHeight * 0.5)/innerHeight/2 * 1.2;
});
function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true, alpha:true});
// renderer.setClearColor(new THREE.Color(0x222222)); //设置背景颜色
renderer.setClearColor(0x000000, 0.2); //设置背景颜色
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 12, swidth * 2);
camera.position.set(0, 0, swidth * 0.75);
camera.lookAt(new THREE.Vector3(0, 30, 0));
}
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);
}
function initModel() {
//轴辅助 （每一个轴的长度）
var object = new THREE.AxesHelper(500);
// scene.add(object);
}
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement);
// controls = new THREE.TrackballControls(camera, renderer.domElement);
// 如果使用animate方法时，将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enableDamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
controls.enableZoom = true;
//是否自动旋转
controls.autoRotate = false;
//设置相机距离原点的最远距离
controls.minDistance = 20;
//设置相机距离原点的最远距离
controls.maxDistance = 10000;
//是否开启右键拖拽
controls.enablePan = true;
}
//生成gui设置配置项
var gui;
var cloud;
function initGui() {
//声明一个保存需求修改的相关数据的对象
gui = {
"size": 0.9,
"transparent": true,
"opacity": 1,
"vertexColors": true,
"color": 0xffffff,
"sizeAttenuation": true,
"rotateSystem": false,
redraw: function () {
if (cloud) {
scene.remove(cloud);
}
createParticles(gui.size, gui.transparent, gui.opacity, gui.vertexColors, gui.sizeAttenuation, gui.color);
//设置是否自动旋转
controls.autoRotate = gui.rotateSystem;
}
};
// var datGui = new dat.GUI();
// //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）gui.add(controls, 'size', 0, 10).onChange(controls.redraw);
// datGui.add(gui, 'size', 0.1, 10).onChange(gui.redraw);
// datGui.add(gui, 'transparent').onChange(gui.redraw);
// datGui.add(gui, 'opacity', 0, 1).onChange(gui.redraw);
// datGui.add(gui, 'vertexColors').onChange(gui.redraw);
// datGui.addColor(gui, 'color').onChange(gui.redraw);
// datGui.add(gui, 'sizeAttenuation').onChange(gui.redraw);
// datGui.add(gui, 'rotateSystem').onChange(gui.redraw);
gui.redraw();
}
//生成粒子的方法
function createParticles(size, transparent, opacity, vertexColors, sizeAttenuation, color) {
var texture = new THREE.TextureLoader().load("/static/img/snow.png");
//存放粒子数据的网格
var geom = new THREE.Geometry();
//样式化粒子的THREE.PointCloudMaterial材质
var material = new THREE.PointsMaterial({
size,
transparent,
opacity,
vertexColors,
sizeAttenuation,
color,
depthTest: false, //设置解决透明度有问题的情况
map: texture,
});
for (var i = 0; i < 16000; i++) {
//添加顶点的坐标
var particle = new THREE.Vector3(0,0,0);
resetParticle(particle);
var v = getVelocity();
particle.velocityY = v.y;
particle.velocityX = v.x;
particle.velocityZ = v.z;
particle.ang = v.angle;
geom.vertices.push(particle);
var color = new THREE.Color(0xffffff);
//.setHSL ( h, s, l ) h — 色调值在0.0和1.0之间 s — 饱和值在0.0和1.0之间 l — 亮度值在0.0和1.0之间。 使用HSL设置颜色。
//随机当前每个粒子的亮度
//color.setHSL(color.getHSL().h, color.getHSL().s, Math.random() * color.getHSL().l);
geom.colors.push(color);
}
//生成模型，添加到场景当中
cloud = new THREE.Points(geom, material);
cloud.verticesNeedUpdate = true;
scene.add(cloud);
}
function resetParticle(particle){
particle.y = _.random(-sheight, sheight, true);
particle.x = _.random(-swidth, swidth , true);
particle.z = _.random(-swidth, swidth , true);
}
function render() {
//产生雨滴动画效果
var vertices = cloud.geometry.vertices;
vertices.forEach(function (v, i) {
v.ang+=0.05;
let a = Math.atan(v.z/v.x);
if(v.x<0){
a = a + Math.PI;
}
let r = Math.pow(v.x*v.x + v.z*v.z, 0.5);
a = a + rotateRatio * Math.pow(1 - r/swidth, 3);
//漩涡
v.x = Math.cos(a) * r;
v.z = Math.sin(a) * r;
//速度
v.y = v.y + v.velocityY;
v.x = v.x + v.velocityX + Math.cos(v.ang) * 0.09 ;
v.z = v.z + v.velocityZ + Math.sin(v.ang) * 0.09 ;
//风
v.y = v.y + wind.y * 0.5;
v.x = v.x + wind.x;
v.z = v.z + wind.z;
if (v.y <= -sheight){
v.y = sheight;
}else if (v.x < -swidth) {
v.x = swidth
}else if (v.x > swidth) {
v.x = -swidth;
}else if (v.z < -swidth) {
v.z = swidth
}else if (v.z > swidth) {
v.z = -swidth;
}
});
//设置实时更新网格的顶点信息
cloud.geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
}
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
//更新控制器
controls.update();
render();
//更新性能插件
stats.update();
requestAnimationFrame(animate);
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
initGui();
animate();
window.onresize = onWindowResize;
}
</script>
</html>
Write Preview
Loading…
Cancel
Save