三维的Github Contribution（加入Nodejs关键词） Nodejs 三维的Github Contribution如何展示

三维的Github Contribution（加入Nodejs关键词）
Nodejs 三维的Github Contribution如何展示

屏幕快照 2014-12-20 上午1.13.20.png github:https://github.com/SatanWoo/3D-Github-Contribution 第一次写Node.js，想法不是自创的，是来源这个Chrome插件isometric-contributions的想法。 Demo地址：https://github-3d-contribution.herokuapp.com/

第一次写，轻喷哈～谢谢大家啦。


4 回复

三维的Github Contribution（加入Node.js关键词）

Node.js 三维的Github Contribution如何展示

在本篇博文中，我们将探讨如何使用Node.js来创建一个三维的GitHub贡献图。这个项目灵感来源于一个Chrome插件isometric-contributions，它以一种新颖的方式展示了用户的GitHub贡献。

GitHub Repository: 3D-Github-Contribution

Demo: 3D GitHub Contribution

首先，我们需要安装一些必要的依赖包。这里我们使用axios来获取GitHub API的数据，以及three.js来构建三维图形。

npm install axios three express

接下来，我们创建一个简单的Express服务器来处理HTTP请求，并使用Three.js库来渲染三维模型。

// server.js
const express = require('express');
const app = express();
const axios = require('axios');

app.use(express.static('public'));

app.get('/api/contributions', async (req, res) => {
    const username = req.query.username;
    if (!username) {
        return res.status(400).send('Username is required.');
    }
    
    try {
        const response = await axios.get(`https://api.github.com/users/${username}/events/public`);
        const contributions = processContributions(response.data);
        res.json(contributions);
    } catch (error) {
        console.error(error);
        res.status(500).send('Failed to fetch contributions.');
    }
});

function processContributions(events) {
    // 这里可以添加逻辑来解析GitHub事件并生成贡献数据
    return events; // 示例返回所有事件
}

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

在客户端，我们可以使用Three.js来渲染这些贡献数据。这里是一个简单的示例：

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D GitHub Contributions</title>
    <style>
        body { margin: 0; overflow: hidden; }
    </style>
</head>
<body>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        let scene, camera, renderer;
        init();
        animate();

        function init() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            // 添加其他Three.js初始化代码
        }

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
    </script>
</body>
</html>

以上代码提供了一个基本的框架，你可以在此基础上进一步扩展和完善。例如，你可以在Three.js中创建一个网格来表示每一天的贡献，通过颜色或高度来区分不同的贡献等级。此外，还可以增加交互功能，如鼠标悬停时显示详细信息等。

希望这个示例能帮助你开始你的三维GitHub贡献图项目！如果你有任何问题或建议，欢迎随时反馈。


哈哈，挺有意思。

效果看起来很赞呐

这个项目主要是将传统的二维GitHub贡献图转化为三维模型来展示。这个项目是用Node.js编写的，并且使用了Express框架来创建Web服务。

示例代码

1. 安装依赖包

首先需要安装express、three.js等依赖包：

npm install express three --save

2. 创建基本服务器

// app.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send(`
    <html>
      <head>
        <title>3D GitHub Contributions</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
      </head>
      <body>
        <div id="container"></div>
        <script>
          const container = document.getElementById('container');

          const scene = new THREE.Scene();
          const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
          const renderer = new THREE.WebGLRenderer();
          renderer.setSize(window.innerWidth, window.innerHeight);
          container.appendChild(renderer.domElement);

          // 这里添加你的贡献数据和渲染逻辑

          camera.position.z = 5;
          function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
          }
          animate();

          window.addEventListener('resize', () => {
            renderer.setSize(window.innerWidth, window.innerHeight);
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
          });
        </script>
      </body>
    </html>
  `);
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

3. 添加贡献数据和渲染逻辑

这部分涉及到从GitHub获取贡献数据，然后将其转换为三维模型并进行渲染。这里可以使用axios或node-fetch来获取GitHub API的数据。

// app.js
const axios = require('axios');

app.get('/contributions', async (req, res) => {
  try {
    const response = await axios.get('https://api.github.com/users/<username>/events/public');
    const contributions = response.data.filter(event => event.type === 'PushEvent').map(event => {
      return {
        date: new Date(event.created_at),
        count: event.payload.commits.length,
      };
    });

    res.json(contributions);
  } catch (error) {
    console.error(error);
    res.status(500).send('Error fetching contributions');
  }
});

然后在前端使用这些数据来构建三维模型。

解释

  1. 服务器设置：我们使用Express创建一个简单的HTTP服务器，并提供一个HTML页面，其中包含Three.js的脚本。
  2. 数据获取：通过GitHub API获取用户的贡献数据。
  3. 渲染：在前端使用Three.js库来创建和渲染三维模型。

这样就实现了一个简单的三维GitHub贡献图展示。你可以根据需要进一步优化和扩展这个项目。

回到顶部