mail_yanpeng@163.com
6 years ago
2 changed files with 339 additions and 0 deletions
|
After Width: | Height: | Size: 109 KiB |
@ -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> |
||||
Loading…
Reference in new issue