3d之移动的星空

左手的ㄟ右手 2022-05-28 01:21 190阅读 0赞

<!DOCTYPE html>
    <html><head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Particle Web</title>
        <style> * { margin: 0; padding: 0; } </style>
    </head>
    <body>
    <canvas height="620" width="1360" id="canvas" style="position: absolute; height: 100%;"></canvas>
    
    <script src="index.js" charset="utf-8"></script>
    
    </body></html>

(function () { var canvasEl = document.getElementById('canvas'); var ctx = canvasEl.getContext('2d'); var mousePos = [0, 0]; var easingFactor = 5.0; var backgroundColor = '#409EFF' + '' + '' + '' + '' + ''; var nodeColor = '#fff'; var edgeColor = '#fff'; var nodes = []; var edges = []; function constructNodes() { for (var i = 0; i < 100; i++) { var node = { drivenByMouse: i == 0, x: Math.random() * canvasEl.width, y: Math.random() * canvasEl.height, vx: Math.random() * 1 - 0.5, vy: Math.random() * 1 - 0.5, radius: Math.random() > 0.9 ? 3 + Math.random() * 3 : 1 + Math.random() * 3 }; nodes.push(node); } nodes.forEach(function (e) { nodes.forEach(function (e2) { if (e == e2) { return; } var edge = { from: e, to: e2 } addEdge(edge); }); }); } function addEdge(edge) { var ignore = false; edges.forEach(function (e) { if (e.from == edge.from && e.to == edge.to) { ignore = true; } if (e.to == edge.from && e.from == edge.to) { ignore = true; } }); if (!ignore) { edges.push(edge); } } function step() { nodes.forEach(function (e) { if (e.drivenByMouse) { return; } e.x += e.vx; e.y += e.vy; function clamp(min, max, value) { if (value > max) { return max; } else if (value < min) { return min; } else { return value; } } if (e.x <= 0 || e.x >= canvasEl.width) { e.vx *= -1; e.x = clamp(0, canvasEl.width, e.x) } if (e.y <= 0 || e.y >= canvasEl.height) { e.vy *= -1; e.y = clamp(0, canvasEl.height, e.y) } }); adjustNodeDrivenByMouse(); render(); window.requestAnimationFrame(step); } function adjustNodeDrivenByMouse() { nodes[0].x += (mousePos[0] - nodes[0].x) / easingFactor; nodes[0].y += (mousePos[1] - nodes[0].y) / easingFactor; } function lengthOfEdge(edge) { return Math.sqrt(Math.pow((edge.from.x - edge.to.x), 2) + Math.pow((edge.from.y - edge.to.y), 2)); } function render() { ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, canvasEl.width, canvasEl.height); edges.forEach(function (e) { var l = lengthOfEdge(e); var threshold = canvasEl.width / 8; if (l > threshold) { return; } ctx.strokeStyle = edgeColor; ctx.lineWidth = (1.0 - l / threshold) * 2.5; ctx.globalAlpha = 1.0 - l / threshold; ctx.beginPath(); ctx.moveTo(e.from.x, e.from.y); ctx.lineTo(e.to.x, e.to.y); ctx.stroke(); }); ctx.globalAlpha = 1.0; nodes.forEach(function (e) { if (e.drivenByMouse) { return; } ctx.fillStyle = nodeColor; ctx.beginPath(); ctx.arc(e.x, e.y, e.radius, 0, 2 * Math.PI); ctx.fill(); }); } window.onresize = function () { canvasEl.width = document.body.clientWidth; canvasEl.height = canvasEl.clientHeight; if (nodes.length == 0) { constructNodes(); } render(); }; window.onmousemove = function (e) { mousePos[0] = e.clientX; mousePos[1] = e.clientY; } window.onresize(); // trigger the event manually. window.requestAnimationFrame(step); }).call(this);

[https://juejin.im/entry/5721b79639b057006ac8b810][https_juejin.im_entry_5721b79639b057006ac8b810]

[https_juejin.im_entry_5721b79639b057006ac8b810]: https://juejin.im/entry/5721b79639b057006ac8b810

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关 3D移动translate3d（CSS3）

3D移动translate3d（CSS3） <!DOCTYPE html> <html lang="en"> <head>

叁歲伎倆/ 2023年10月03日 13:39/ 0 赞/ 46 阅读

相关 unity3D人物移动的实现(二)

运行之前的项目，小人可以自由移动，但是移动过程中，会有停止按键后滑动一段距离的效果，这是因为脚本中的GetAxis函数，他得到的值随着按键的过程而变化，所以每一次松开的时候，该

红太狼/ 2023年07月24日 05:53/ 0 赞/ 16 阅读

相关 unity3D人物移动的实现(一)

人物的移动，首先要考虑人物与地面的碰撞，碰撞发生的条件是，两者必须都为碰撞体，且至少有一方为刚体，为了方便，我们就给人物加上刚体属性和碰撞体。 1首先是碰撞体属性，人形使用

淡淡的烟草味﹌/ 2023年07月21日 06:23/ 0 赞/ 4 阅读

相关 Unity3D移动平台内存优化

最近网友通过网站搜索Unity3D在手机及其他平台下占用内存太大. 这里写下关于Unity3D对于内存的管理与优化. Unity3D 里有两种动态加载机制：一个是Resour

﹏ヽ暗。殇╰゛Y/ 2022年08月25日 09:15/ 0 赞/ 249 阅读

相关 Cocos2d-x 3移动游戏编程

[![Center][]][Center 1] [Cocos2d-x 3移动游戏编程][Center 1] 无论你是初次学习使用Cocos2d-x编写移动游戏

妖狐艹你老母/ 2022年08月07日 04:54/ 0 赞/ 213 阅读

相关 3d之移动的星空

<!DOCTYPE html> <html><head> <meta http-equiv="content-type" content="te

左手的ㄟ右手/ 2022年05月28日 01:21/ 0 赞/ 191 阅读

相关 cesium----添加3D Ttiles并且移动位置

添加3D模型的两种方式 entities方式添加该方法创建一个实体，实体要有关联的几何图形，并且实体必须要设置位置，否则场景中显示不出来通过指定 m

怼烎@/ 2022年03月15日 01:28/ 0 赞/ 2090 阅读

相关 unity3d 控制鼠标的移动范围

在一些论坛上看到有人问在unity里面控制鼠标的移动范围，有二种方法，一个是调用windows 系统的 user32.dll的ClipCursor函数再一种就是通过Cu

电玩女神/ 2022年03月12日 02:45/ 0 赞/ 620 阅读

相关 Unity3D 示例——人物移动

一个是通过W、A、S、D来移动人物（示例一），另个是按屏幕上的按钮来移动人物（示例二）。很简单，只改了几行代码。下面是“Assets”文件夹里面的资源。 ![waterm

约定不等于承诺〃/ 2021年11月09日 00:30/ 0 赞/ 411 阅读

相关 unity3d——角色移动控制

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

落日映苍穹つ/ 2021年07月25日 21:35/ 0 赞/ 439 阅读