Added 3D background, updated langing & artworks

raws/artworks/2020.md

@@ -6,8 +6,6 @@ yearonly: true
 url: 2020.html
 ---
 
-Ordre de création décroissant
-
 ![crown](/img/artworks/crown.webp)
 ![full2](/img/artworks/full2.webp)
 ![full1](/img/artworks/full1.webp)

raws/artworks/2021.md

@@ -6,8 +6,7 @@ yearonly: true
 url: 2021.html
 ---
 
-Ordre de création décroissant
+![LP_planet](/img/artworks/LP_planet.webp)
-
 ![LP_island](/img/artworks/LP_island.webp)
 ![LP_barrels](/img/artworks/LP_barrels.webp)
 ![roomOrangeChair](/img/artworks/roomOrangeChair2.webp)

resources/css/style.css

@@ -3,12 +3,10 @@ html, body {
     font-size: 17px;
     font-family: sans-serif;
     color:#444;
-    background-color: #EEEEEE;
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
-    background-image: url(/img/background.jpg);
 }
 
 /** custom landing **/
@@ -40,6 +38,14 @@ html, body {
     height: 100%;
 }
 
+.background {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -100;
+}
+
 /** website **/
 
 .avatar {

resources/js/main.js

@@ -0,0 +1,129 @@
+import * as THREE from 'https://cdn.skypack.dev/three@0.135.0';
+import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.135.0/examples/jsm/loaders/GLTFLoader.js';
+
+// Global vars
+const container = document.getElementById("background");
+let scene;
+let camera;
+let renderer;
+
+let modelMoon;
+let modelPlanet;
+
+// Animations global vars
+let incrementer = 0.01;
+let reverse = false;
+const rotationSpeed = 0.001;
+const orbitRadius = 1;
+
+// Helper
+function setupContainer (container) {
+    const width = container.offsetWidth;
+    const height = container.offsetHeight;
+    const aspect = width / height;
+    camera.aspect = aspect;
+    camera.updateProjectionMatrix();
+    renderer.setSize(width, height);
+};
+
+async function loadModel(path) {
+    return new Promise((resolve) => new GLTFLoader().load(path, resolve));
+}
+
+// Init 
+function initScene() {
+    // Scene
+    renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.shadowMap.enabled = true;
+    container.appendChild(renderer.domElement);
+
+    scene = new THREE.Scene();
+    scene.background = new THREE.Color(0xdfc465);
+    scene.fog = new THREE.Fog(0x56bac9, 5, 25);
+
+    // Camera
+    camera = new THREE.PerspectiveCamera(40, 1, 1, 100);
+    camera.position.set(1, 1, 11);
+
+    // Listeners
+    setupContainer(container);
+    window.addEventListener("resize", () => setupContainer(container), false);
+}
+
+function initLights() {
+    // Global Light
+    const hemiLight = new THREE.HemisphereLight(0xeab044, 0x444444);
+    hemiLight.position.set(4, 0, 2);
+    scene.add(hemiLight);
+
+    const dirLight = new THREE.DirectionalLight(0xffffff);
+    dirLight.position.set(3, 10, 10);
+    dirLight.castShadow = true;
+    dirLight.shadow.camera.top = 2;
+    dirLight.shadow.camera.bottom = -2;
+    dirLight.shadow.camera.left = -2;
+    dirLight.shadow.camera.right = 2;
+    dirLight.shadow.camera.near = 0.1;
+    dirLight.shadow.camera.far = 40;
+    scene.add(dirLight);
+}
+
+async function initModels() {
+    // Load Models
+
+    modelPlanet = (await loadModel('models/LP_planet_only.glb')).scene;
+    modelMoon = (await loadModel('models/LP_planet_moon.glb')).scene;
+    
+    
+    modelPlanet.position.set(1, 1, 0);
+    modelPlanet.castShadow = true;
+    modelPlanet.receiveShadow = true;
+    scene.add(modelPlanet);
+
+    modelMoon.position.set(1, 1, 0);
+    modelMoon.castShadow = true;
+    modelMoon.receiveShadow = true;
+    scene.add(modelMoon);
+
+    animateScene();
+}
+
+// Animation
+function easeInOut() {
+    if (reverse) {
+      incrementer -= 0.005;
+    } else {
+      incrementer += 0.005;
+    }
+  
+    if (incrementer >= 1 || incrementer <= 0) {
+      reverse = !reverse;
+    }
+  
+    return incrementer < 0.5
+      ? 2 * incrementer * incrementer
+      : 1 - Math.pow(-2 * incrementer + 2, 2) / 2;
+};
+
+function animateScene() {
+    requestAnimationFrame(animateScene);
+
+    modelPlanet.position.set(1, easeInOut() / 4 + 0.5, 0);
+    modelPlanet.rotation.y += rotationSpeed;
+
+    // const x = Math.cos(incrementer) * orbitRadius;
+    // const z = Math.sin(incrementer) * orbitRadius;
+    modelMoon.position.set(0, 1 - easeInOut() - 2, 0);
+    modelMoon.rotation.y -= rotationSpeed + 0.01;
+
+    renderer.render(scene, camera);
+}
+
+// Main
+export function init() {
+    initScene();
+    initLights();
+    initModels();
+}
+
+init();

templates/background.hbs

@@ -0,0 +1 @@
+<div id="background" class="background"></div>

templates/base.hbs

@@ -7,5 +7,7 @@
       {{> submenu}}
       {{> article}}
     </div>
+    <div id="background" class="background"></div>
   </body>
+  <script src="/js/main.js" type="module"></script>
 </html>

templates/base_section.hbs

@@ -6,5 +6,7 @@
       {{> menu}}
       {{> submenu}}
     </div>
+    <div id="background" class="background"></div>
   </body>
+  <script src="/js/main.js" type="module"></script>
 </html>

templates/menu.hbs

@@ -5,7 +5,8 @@
     <li><a href="https://gltronic.ovh/blog/index.html">Blog</a></li>
     <li><a href="https://gltronic.ovh/projets/index.html">Projets</a></li>
     <li><a href="https://gltronic.ovh/artworks/index.html">Artworks</a></li>
-    <li><a href="https://git.gltronic.ovh/">git</a></li><li><a href="https://cloud.gltronic.ovh/">Cloud</a></li>
+    <li><a href="https://git.gltronic.ovh/">git</a></li>
+    <li><a href="https://drop.gltronic.ovh/">drop</a></li>
     <li><a href="https://gltronic.ovh/about.html">?</a></li>
   </ul>
   </a>