Initial commit

2025-01-18 04:33:13 -08:00 · 2020-06-28 21:12:40 -04:00 · 2020-06-28 21:12:40 -04:00 · 779ca25dc6
commit 779ca25dc6
parent 6d38b020c3
12 changed files with 65506 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,5 @@
+.DS_Store
+
 # Logs
 logs
 *.log
--- a/gulpfile.js
+++ b/gulpfile.js
@ -0,0 +1,17 @@
+const gulp = require('gulp')
+const bs = require('browser-sync').create()
+
+gulp.task('browser-sync', function() {
+    bs.init({
+        server: {
+            baseDir: "./"
+        }
+    })
+})
+
+gulp.task('watch', ['browser-sync'], function () {
+  gulp.watch("css/*.css").on('change', bs.reload)
+  gulp.watch("js/*.js").on('change', bs.reload)
+  gulp.watch("*.html").on('change', bs.reload)
+})
+
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>3D GitHub Contributions</title>
+		<style>
+      body { margin: 0; }
+			canvas { display: block; }
+		</style>
+	</head>
+	<body>
+    <script type="module" src="js/contributions.js"></script>
+	</body>
+</html>
--- a/js/GLTFLoader.js
+++ b/js/GLTFLoader.js
--- a/js/OrbitControls.js
+++ b/js/OrbitControls.js
--- a/js/contributions.js
+++ b/js/contributions.js
@ -0,0 +1,162 @@
+import * as THREE from "./three.module.js";
+import { GLTFLoader } from './GLTFLoader.js';
+import { OrbitControls } from './OrbitControls.js';
+import { GUI } from './dat.gui.module.js';
+
+const BASE_LENGTH = 0.834
+const BASE_WIDTH = 0.167
+const BASE_HEIGHT = 0.05
+const CUBE_SIZE = 0.0143
+const MAX_HEIGHT = 0.14
+
+let username = "jasonlong"
+let year = "2018"
+let json = {}
+
+let camera, scene, renderer
+
+var urlParams = new URLSearchParams(window.location.search);
+
+if (urlParams.has('username')) {
+  username = urlParams.get('username')
+}
+
+if (urlParams.has('year')) {
+  year = urlParams.get('year')
+}
+
+// Import JSON data
+async function loadJSON(username, year) {
+  let url = `https://json-contributions.vercel.app/api/user?username=${username}&year=${year}`
+  let response = await fetch(url)
+  if (response.ok) {
+    json = await response.json()
+    init()
+    render()
+  } else {
+    alert("HTTP-Error: " + response.status)
+  }
+}
+
+loadJSON(username, year)
+
+const init = () => {
+  // SCENE
+  scene = new THREE.Scene()
+
+  // CAMERA
+  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
+
+  // RENDERER
+  renderer = new THREE.WebGLRenderer({ antialias: true })
+  renderer.setPixelRatio( window.devicePixelRatio )
+  renderer.setSize( window.innerWidth, window.innerHeight )
+  renderer.outputEncoding = THREE.sRGBEncoding
+  renderer.setClearColor(0xffffff, 1)
+  document.body.appendChild(renderer.domElement)
+
+  // MATERIALS
+  let phongMaterial = new THREE.MeshPhongMaterial( { color: 0x40c463, transparent: true, opacity: 0.2, side: THREE.DoubleSide } )
+  let bronzeMaterial = new THREE.MeshPhysicalMaterial( { color: 0x645f61, metalness: 1, clearcoat: 0.5, clearcoatRoughness: 0.5, side: THREE.DoubleSide } )
+
+  // LIGHTS
+  const dLight1 = new THREE.DirectionalLight(0xebeb8c, 0.8)
+  dLight1.position.set(-2, -5, 5);
+  dLight1.target.position.set(0, 0, 0);
+  const dLight2 = new THREE.DirectionalLight(0xebeb8c, 0.8)
+  dLight2.position.set(2, -5, 5);
+  dLight2.target.position.set(0, 0, 0);
+
+  scene.add(dLight1)
+  scene.add(dLight2)
+
+  // LOAD REFERENCE MODEL
+  let loader = new GLTFLoader().setPath('../models/')
+  loader.load('ashtom-orig.glb', function (gltf) {
+    gltf.scene.traverse(function (child) {
+      if (child.isMesh) {
+        child.material = phongMaterial
+        child.material.depthWrite = !child.material.transparent
+      }
+    })
+
+    gltf.scene.rotation.x = Math.PI/2
+    gltf.scene.rotation.y = -Math.PI
+    
+    // let worldAxis = new THREE.AxesHelper(2);
+    // scene.add(worldAxis)
+    render()
+  })
+
+  // BASE GEOMETRY
+  let baseLoader = new GLTFLoader().setPath('../models/')
+  baseLoader.load('base.glb', function (base) {
+    base.scene.traverse(function (child) {
+      if (child.isMesh) {
+        child.material = bronzeMaterial
+        child.material.depthWrite = !child.material.transparent
+      }
+    })
+
+    base.scene.rotation.x = -Math.PI/2
+    base.scene.rotation.z = -Math.PI
+    scene.add(base.scene)
+  })
+
+  // CONTRIBUTION BARS
+  let barGroup = new THREE.Group()
+  let maxCount = json.max
+  let x = 0
+  let y = 0
+  json.contributions.forEach(week => {
+    y = (CUBE_SIZE * 7) 
+    week.days.forEach(day => {
+      console.log(day.date)
+      console.log(day.count)
+      y -= CUBE_SIZE
+      let height = (MAX_HEIGHT / maxCount * day.count).toFixed(4)
+      // console.log(height)
+      let geometry = new THREE.BoxGeometry(CUBE_SIZE, CUBE_SIZE, height)
+      let cube = new THREE.Mesh(geometry, bronzeMaterial)
+      cube.position.x = x
+      cube.position.y = y
+      cube.position.z = BASE_HEIGHT / 2 + height / 2
+      barGroup.add(cube)
+    })
+    x += CUBE_SIZE
+  })
+  const groupBox = new THREE.Box3().setFromObject(barGroup)
+  const groupCenter = groupBox.getCenter(new THREE.Vector3())
+  barGroup.position.x -= groupCenter.x
+  barGroup.position.y -= groupCenter.y 
+  scene.add(barGroup)
+
+  const box = new THREE.Box3().setFromObject(scene)
+  const center = box.getCenter(new THREE.Vector3())
+  camera.lookAt(center)
+  camera.position.y = -0.4
+  camera.position.z = 0.3
+
+  let controls = new OrbitControls(camera, renderer.domElement)
+  controls.autoRotate = false
+  controls.screenSpacePanning = true
+  controls.addEventListener('change', render);
+}
+
+const render = () => {
+  renderer.render(scene, camera)
+}
+
+//
+// Event listeners
+//
+const onWindowResize = () => {
+  let canvasWidth = window.innerWidth;
+  let canvasHeight = window.innerHeight;
+  renderer.setSize( canvasWidth, canvasHeight );
+  camera.aspect = canvasWidth / canvasHeight;
+  camera.updateProjectionMatrix();
+  render()
+}
+
+window.addEventListener('resize', onWindowResize, false)
--- a/js/dat.gui.module.js
+++ b/js/dat.gui.module.js
--- a/js/three.module.js
+++ b/js/three.module.js
--- a/models/ashtom-orig.glb
+++ b/models/ashtom-orig.glb
--- a/models/base.glb
+++ b/models/base.glb
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,11 @@
+{
+  "name": "3d-contributions",
+  "devDependencies": {
+    "browser-sync": "^2.18.2",
+    "gulp": "^3.9.1",
+    "gulp-watch": "^4.3.11"
+  },
+  "dependencies": {
+    "three": "^0.118.1"
+  }
+}