diff --git a/raws/artworks/2020.md b/raws/artworks/2020.md
index e64abed..4cf3411 100644
--- a/raws/artworks/2020.md
+++ b/raws/artworks/2020.md
@@ -6,8 +6,6 @@ yearonly: true
url: 2020.html
---
-Ordre de création décroissant
-
diff --git a/raws/artworks/2021.md b/raws/artworks/2021.md
index 72ca4f9..e617211 100644
--- a/raws/artworks/2021.md
+++ b/raws/artworks/2021.md
@@ -6,8 +6,7 @@ yearonly: true
url: 2021.html
---
-Ordre de création décroissant
-
+
diff --git a/resources/css/style.css b/resources/css/style.css
index 3c769c8..0ee1a0c 100644
--- a/resources/css/style.css
+++ b/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 {
diff --git a/resources/img/artworks/LP_planet.webp b/resources/img/artworks/LP_planet.webp
new file mode 100644
index 0000000..830cec9
Binary files /dev/null and b/resources/img/artworks/LP_planet.webp differ
diff --git a/resources/js/main.js b/resources/js/main.js
new file mode 100644
index 0000000..c80943b
--- /dev/null
+++ b/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();
diff --git a/resources/models/LP_islands.glb b/resources/models/LP_islands.glb
new file mode 100644
index 0000000..170806b
Binary files /dev/null and b/resources/models/LP_islands.glb differ
diff --git a/resources/models/LP_planet_moon.glb b/resources/models/LP_planet_moon.glb
new file mode 100644
index 0000000..9aa739c
Binary files /dev/null and b/resources/models/LP_planet_moon.glb differ
diff --git a/resources/models/LP_planet_only.glb b/resources/models/LP_planet_only.glb
new file mode 100644
index 0000000..6c39395
Binary files /dev/null and b/resources/models/LP_planet_only.glb differ
diff --git a/resources/models/LP_tree.glb b/resources/models/LP_tree.glb
new file mode 100644
index 0000000..bdaaab1
Binary files /dev/null and b/resources/models/LP_tree.glb differ
diff --git a/templates/background.hbs b/templates/background.hbs
new file mode 100644
index 0000000..c3bba04
--- /dev/null
+++ b/templates/background.hbs
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/templates/base.hbs b/templates/base.hbs
index 9cf393d..84cc492 100644
--- a/templates/base.hbs
+++ b/templates/base.hbs
@@ -7,5 +7,7 @@
{{> submenu}}
{{> article}}
+
+