<!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>