8 changed files with 34 additions and 649 deletions
@ -1,339 +0,0 @@ |
|||||
<!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> |
|
||||
@ -1,80 +0,0 @@ |
|||||
{{template "header" .}} |
|
||||
<title>博客 - 码农随笔</title> |
|
||||
</head> |
|
||||
<body style="background-color: #f9f9f9"> |
|
||||
<div class="root-container"> |
|
||||
{{template "nav" .}} |
|
||||
{{template "memenu" .}} |
|
||||
|
|
||||
<div class="me-blog-root"> |
|
||||
<div class="me-blog-list"> |
|
||||
<div class="breadcrumb-container"> |
|
||||
<span class="layui-breadcrumb"> |
|
||||
<a href="/">首页</a> |
|
||||
<a href="">个人中心</a> |
|
||||
<a href="/me/like">我的收藏</a> |
|
||||
<a><cite>收藏列表</cite></a> |
|
||||
</span> |
|
||||
</div> |
|
||||
{{range .Page.List}} |
|
||||
<div> |
|
||||
<p><a href="/blog/{{.BlogId}}">{{.Blog.Title}}</a></p> |
|
||||
<div> |
|
||||
<em>收藏时间：{{.Ltime.Format "2006/01/02"}}</em> |
|
||||
<em>浏览量：{{.Blog.Browses}}</em> |
|
||||
<span style="width: 35px;margin-left: 30px;"><a href="javascript:void(0)" style="color: #F84822" |
|
||||
onclick="del(this,{{.BlogId}})">删除</a></span> |
|
||||
</div> |
|
||||
<hr style="height:1px;border:none;border-top:1px solid #EEE;margin: 6px;"/> |
|
||||
</div> |
|
||||
{{end}} |
|
||||
<div style="text-align: center"> |
|
||||
<nav> |
|
||||
<div class="pagination pagination-lg"> |
|
||||
<ul> |
|
||||
{{if .Page.FirstPage}} |
|
||||
{{else}} |
|
||||
<li class="prev"> |
|
||||
<a href="/me/blog?num={{ .Page.PageNo | NAdd -1}}&flag={{.Flag}}">«</a> |
|
||||
</li> |
|
||||
{{end}} |
|
||||
<li class="active"><a href="javascript:void(0)">{{.Page.PageNo}}</a></li> |
|
||||
{{if .Page.LastPage}} |
|
||||
{{else}} |
|
||||
<li class="next"> |
|
||||
<a href="/me/blog?num={{ .Page.PageNo | NAdd +1}}&flag={{.Flag}}">»</a> |
|
||||
</li> |
|
||||
{{end}} |
|
||||
</ul> |
|
||||
</div> |
|
||||
</nav> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</body> |
|
||||
<script> |
|
||||
function del(obj, id) { |
|
||||
layer.confirm('删除后将无法恢复', { |
|
||||
btn: ['确认', '手滑了'] //按钮 |
|
||||
}, function () { |
|
||||
$.get('/api/unlike/' + id, |
|
||||
function (data) { |
|
||||
if (data.Status == 0) { |
|
||||
$(obj).parent().parent().parent().remove() |
|
||||
layer.msg("删除成功", {icon: 6}); |
|
||||
} else if (data.Status == 401) { |
|
||||
window.location.href = "/login" |
|
||||
} else if (data.Status == 403) { |
|
||||
layer.msg("暂无权限", {icon: 5}); |
|
||||
} else { |
|
||||
layer.msg("服务器异常", {icon: 5}); |
|
||||
} |
|
||||
}, 'json') |
|
||||
}, function () { |
|
||||
|
|
||||
}); |
|
||||
} |
|
||||
</script> |
|
||||
</html> |
|
||||
@ -1,117 +0,0 @@ |
|||||
{{template "header" .}} |
|
||||
<title>博客 - 码农随笔</title> |
|
||||
</head> |
|
||||
<body style="background-color: #f9f9f9"> |
|
||||
<div class="root-container"> |
|
||||
{{template "nav" .}} |
|
||||
{{template "memenu" .}} |
|
||||
|
|
||||
<div class="me-blog-root"> |
|
||||
<div class="me-blog-list"> |
|
||||
<div class="breadcrumb-container"> |
|
||||
<span class="layui-breadcrumb"> |
|
||||
<a href="/">首页</a> |
|
||||
<a href="">个人中心</a> |
|
||||
<a href="/me/note">我的收藏</a> |
|
||||
<a><cite>管理文件夹</cite></a> |
|
||||
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" style="margin-left: 30px" id="newBtn">新增</button> |
|
||||
</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
{{range .Note}} |
|
||||
<div class="me-blog-list"> |
|
||||
<div style="display: flex"> |
|
||||
<p style="flex:1">{{.Title}}<span class="badge" style="margin-left: 3px">{{.Count}}</span></p> |
|
||||
<span style="width: 35px;"><a href="javascript:void(0)" style="color: #F84822" |
|
||||
onclick="del(this,{{.Id}})">删除</a></span> |
|
||||
<span style="width: 42px;margin-left: 10px;"><a href="javascript:void(0)" style="color: #F84822" |
|
||||
onclick="rename(this,{{.Id}},{{.Title}})">重命名</a></span> |
|
||||
</div> |
|
||||
<hr style="height:1px;border:none;border-top:1px solid #EEE;margin: 6px;"/> |
|
||||
</div> |
|
||||
|
|
||||
{{end}} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</body> |
|
||||
<script> |
|
||||
function rename(obj, id, name) { |
|
||||
layer.prompt({title: '请输入文件夹名称',value: name}, function (val, index) { |
|
||||
if (val.trim().length < 3) { |
|
||||
layer.msg('文件夹名称最低三个字哦', function () { |
|
||||
}); |
|
||||
layer.close(index); |
|
||||
return |
|
||||
} |
|
||||
$.post('/api/notecoll/edit', { |
|
||||
title: val.trim(), |
|
||||
id: id |
|
||||
}, |
|
||||
function (data) { |
|
||||
if (data.Status == 0) { |
|
||||
layer.close(index); |
|
||||
layer.msg("修改成功", {icon: 6}); |
|
||||
window.location.href=window.location.href |
|
||||
} else if (data.Status == 401) { |
|
||||
window.location.href = "/login" |
|
||||
} else if (data.Status == 403) { |
|
||||
layer.msg("暂无权限", {icon: 5}); |
|
||||
} else { |
|
||||
layer.msg("服务器异常", {icon: 5}); |
|
||||
} |
|
||||
}, 'json') |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
function del(obj, id) { |
|
||||
layer.confirm('文件夹下的所有笔记都将会删除', { |
|
||||
btn: ['确认', '手滑了'] //按钮 |
|
||||
}, function () { |
|
||||
$.post('/api/notecol/del/' + id, |
|
||||
function (data) { |
|
||||
if (data.Status == 0) { |
|
||||
$(obj).parent().parent().remove() |
|
||||
layer.msg("删除成功", {icon: 6}); |
|
||||
} else if (data.Status == 401) { |
|
||||
window.location.href = "/login" |
|
||||
} else if (data.Status == 403) { |
|
||||
layer.msg("暂无权限", {icon: 5}); |
|
||||
} else { |
|
||||
layer.msg("服务器异常", {icon: 5}); |
|
||||
} |
|
||||
}, 'json') |
|
||||
}, function () { |
|
||||
|
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
$(function () { |
|
||||
if ({{.Note|len}} == 0){ |
|
||||
layer.msg('请先添加文件夹', function () { |
|
||||
}); |
|
||||
} |
|
||||
$("#newBtn").click(function () { |
|
||||
layer.prompt({title: '请输入文件夹名称'}, function (val, index) { |
|
||||
if (val.trim().length < 3) { |
|
||||
layer.msg('文件夹名称最低三个字哦', function () { |
|
||||
}); |
|
||||
layer.close(index); |
|
||||
return |
|
||||
} |
|
||||
$.post('/api/notecoll/save', { |
|
||||
title: val.trim() |
|
||||
}, |
|
||||
function (data) { |
|
||||
if (data.Status == 0) { |
|
||||
layer.close(index); |
|
||||
parent.layer.msg("保存成功", {icon: 6}); |
|
||||
window.location.href=window.location.href |
|
||||
} |
|
||||
}, 'json') |
|
||||
}); |
|
||||
}) |
|
||||
}) |
|
||||
</script> |
|
||||
</html> |
|
||||
Loading…
Reference in new issue