diff --git a/content/posts/_index.md b/content/posts/_index.md
index ce49bf8..2c65741 100644
--- a/content/posts/_index.md
+++ b/content/posts/_index.md
@@ -13,5 +13,6 @@ lang = "en"
3
Next
+
diff --git a/themes/spectral/assets/js/main.js b/themes/spectral/assets/js/main.js
index 4159b66..8fc0f36 100644
--- a/themes/spectral/assets/js/main.js
+++ b/themes/spectral/assets/js/main.js
@@ -3,9 +3,91 @@
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
+import * as THREE from "https://cdn.skypack.dev/three@0.129.0/build/three.module.js";
+// To allow for the camera to move around the scene
+import { OrbitControls } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js";
+// To allow for importing the .gltf file
+import { GLTFLoader } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js";
-(function($) {
+//Create a Three.JS Scene
+const scene = new THREE.Scene();
+//create a new camera with positions and angles
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+
+//Keep the 3D object on a global variable so we can access it later
+let object;
+
+//OrbitControls allow the camera to move around the scene
+let controls;
+
+//Set which object to render
+let objToRender = 'TeamFaabs23';
+
+//Instantiate a loader for the .gltf file
+const loader = new GLTFLoader();
+
+//Load the file
+loader.load(
+ `models/${objToRender}/scene.gltf`,
+ function (gltf) {
+ //If the file is loaded, add it to the scene
+ object = gltf.scene;
+ scene.add(object);
+ },
+ function (xhr) {
+ //While it is loading, log the progress
+ console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+ },
+ function (error) {
+ //If there is an error, log it
+ console.error(error);
+ }
+);
+
+//Instantiate a new renderer and set its size
+const renderer = new THREE.WebGLRenderer({ alpha: true }); //Alpha: true allows for the transparent background
+renderer.setSize(window.innerWidth, window.innerHeight);
+
+//Add the renderer to the DOM
+document.getElementById("container3D").appendChild(renderer.domElement);
+
+//Set how far the camera will be from the 3D model
+camera.position.z = objToRender === "dino" ? 25 : 500;
+
+//Add lights to the scene, so we can actually see the 3D model
+const topLight = new THREE.DirectionalLight(0xffffff, 1); // (color, intensity)
+topLight.position.set(500, 500, 500) //top-left-ish
+topLight.castShadow = true;
+scene.add(topLight);
+const ambientLight = new THREE.AmbientLight(0x333333, objToRender === "dino" ? 5 : 1);
+scene.add(ambientLight);
+
+//This adds controls to the camera, so we can rotate / zoom it with the mouse
+if (objToRender === "TeamFaabs23") {
+ controls = new OrbitControls(camera, renderer.domElement);
+}
+
+//Render the scene
+function animate() {
+ requestAnimationFrame(animate);
+ //Here we could add some code to update the scene, adding some automatic movement
+
+ renderer.render(scene, camera);
+}
+
+//Add a listener to the window, so we can resize the window and the camera
+window.addEventListener("resize", function () {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+});
+
+//Start the 3D rendering
+animate();
+
+(function($) {
+
var $window = $(window),
$body = $('body'),
$wrapper = $('#page-wrapper'),
@@ -86,4 +168,5 @@ window.onbeforeunload = () => {
for(const form of document.getElementsByTagName('form')) {
form.reset();
}
+
}
diff --git a/themes/spectral/layouts/partials/header.html b/themes/spectral/layouts/partials/header.html
index 3cd5140..17baa06 100644
--- a/themes/spectral/layouts/partials/header.html
+++ b/themes/spectral/layouts/partials/header.html
@@ -50,3 +50,8 @@
+
+
+
+
+