gltron/NexusV7
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added 3D background, updated langing & artworks

Browse Source
This commit is contained in:
gltron committed 2021-12-11 16:09:55 +01:00
1 parent 13ec138c1f
commit 3e66fca0be
14 files changed
+161 -20
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

raws/artworks/2020.md
-2
View File
@@ -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
+1 -2
View File
@@ -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
+8 -2
View File
@@ -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/img/artworks/LP_planet.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

resources/js/main.js
+129
View File
@@ -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();
resources/models/LP_islands.glb
BIN
View File
Binary file not shown.
resources/models/LP_planet_moon.glb
BIN
View File
Binary file not shown.
resources/models/LP_planet_only.glb
BIN
View File
Binary file not shown.
resources/models/LP_tree.glb
BIN
View File
Binary file not shown.
templates/background.hbs
+1
View File
@@ -0,0 +1 @@
<div id="background" class="background"></div>
templates/base.hbs
+2
View File
@@ -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
+2
View File
@@ -6,5 +6,7 @@
{{> menu}}
{{> submenu}}
</div>
<div id="background" class="background"></div>
</body>
<script src="/js/main.js" type="module"></script>
</html>
templates/landing.hbs
+16 -13
View File
@@ -2,22 +2,25 @@
<html lang="fr">
{{> header}}
<body>
<div class="landing">
<div id="logo">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="109.288mm" viewBox="0 0 2176 413">
<path fill="white" d="M 0.00,0.00 C 0.00,0.00 2176.00,0.00 2176.00,0.00 2176.00,0.00 2176.00,413.00 2176.00,413.00 2176.00,413.00 0.00,413.00 0.00,413.00 0.00,413.00 0.00,0.00 0.00,0.00 Z M 282.00,143.00 C 280.95,133.14 271.70,120.04 264.96,113.00 246.83,94.04 218.03,84.04 192.00,84.00 192.00,84.00 168.00,84.00 168.00,84.00 137.89,84.36 105.25,98.08 86.52,122.00 72.32,140.12 64.27,168.10 64.00,191.00 64.00,191.00 64.00,207.00 64.00,207.00 64.06,243.06 78.79,280.90 110.00,300.91 115.92,304.70 127.23,309.83 134.00,311.97 154.50,318.47 169.97,318.24 191.00,318.00 214.84,317.72 246.62,307.55 267.00,295.40 272.26,292.26 285.36,283.51 287.40,278.00 288.11,276.07 288.00,273.08 288.00,271.00 288.00,271.00 288.00,195.00 288.00,195.00 288.00,195.00 189.00,195.00 189.00,195.00 189.00,195.00 189.00,230.00 189.00,230.00 189.00,230.00 245.00,230.00 245.00,230.00 245.00,230.00 245.00,254.00 245.00,254.00 245.00,256.46 245.21,259.64 243.98,261.83 241.06,267.02 226.77,273.03 221.00,275.00 197.54,283.02 166.06,285.97 144.00,272.54 121.61,258.91 113.72,235.76 111.91,211.00 111.91,211.00 111.00,198.00 111.00,198.00 111.00,198.00 111.83,189.00 111.83,189.00 113.95,167.86 118.83,148.63 136.00,134.32 146.84,125.29 158.35,122.30 172.00,120.84 176.14,120.39 177.47,119.86 182.00,120.04 206.85,121.00 228.69,131.20 239.00,155.00 239.00,155.00 282.00,143.00 282.00,143.00 Z M 1245.00,84.09 C 1245.00,84.09 1224.00,87.89 1224.00,87.89 1201.79,93.47 1181.22,106.36 1167.74,125.00 1155.76,141.59 1147.25,166.45 1147.00,187.00 1147.00,187.00 1147.00,191.00 1147.00,191.00 1147.00,191.00 1146.34,200.00 1146.34,200.00 1146.34,200.00 1147.00,213.00 1147.00,213.00 1147.29,237.01 1157.73,264.83 1173.30,283.00 1191.76,304.54 1222.72,317.67 1251.00,318.00 1251.00,318.00 1270.00,318.00 1270.00,318.00 1292.14,317.97 1318.54,309.03 1336.00,295.49 1379.87,261.44 1388.12,186.82 1364.19,139.00 1358.98,128.59 1350.63,117.93 1342.00,110.17 1324.20,94.15 1295.93,84.04 1272.00,84.09 1272.00,84.09 1262.00,84.09 1262.00,84.09 1262.00,84.09 1245.00,84.09 1245.00,84.09 Z M 2103.00,147.00 C 2100.99,139.56 2097.64,132.52 2093.58,126.00 2089.76,119.89 2086.20,115.07 2081.00,110.04 2063.51,93.12 2036.13,84.04 2012.00,84.00 2012.00,84.00 1990.00,84.00 1990.00,84.00 1969.47,84.24 1945.65,92.14 1929.00,104.04 1903.19,122.48 1892.14,153.55 1889.91,184.00 1889.91,184.00 1889.00,194.00 1889.00,194.00 1888.46,240.55 1901.98,286.92 1948.00,307.69 1970.12,317.67 1990.36,318.27 2014.00,318.00 2039.33,317.70 2065.22,306.84 2083.00,289.00 2091.54,280.43 2103.09,265.18 2105.00,253.00 2105.00,253.00 2065.00,238.00 2065.00,238.00 2059.91,249.81 2053.42,261.21 2043.00,269.10 2019.08,287.23 1978.33,285.85 1957.09,263.96 1937.81,244.10 1936.81,218.84 1937.00,193.00 1937.16,169.65 1944.61,144.12 1965.00,130.52 1974.84,123.96 1983.53,122.06 1995.00,120.84 2014.95,118.70 2034.40,123.61 2049.00,138.01 2054.78,143.73 2058.75,149.10 2061.00,157.00 2061.00,157.00 2103.00,147.00 2103.00,147.00 Z M 429.00,87.00 C 429.00,87.00 382.00,87.00 382.00,87.00 382.00,87.00 382.00,315.00 382.00,315.00 382.00,315.00 552.00,315.00 552.00,315.00 552.00,315.00 552.00,279.00 552.00,279.00 552.00,279.00 429.00,279.00 429.00,279.00 429.00,279.00 429.00,87.00 429.00,87.00 Z M 787.00,87.00 C 787.00,87.00 592.00,87.00 592.00,87.00 592.00,87.00 592.00,123.00 592.00,123.00 592.00,123.00 666.00,123.00 666.00,123.00 666.00,123.00 666.00,315.00 666.00,315.00 666.00,315.00 713.00,315.00 713.00,315.00 713.00,315.00 713.00,123.00 713.00,123.00 713.00,123.00 787.00,123.00 787.00,123.00 787.00,123.00 787.00,87.00 787.00,87.00 Z M 1013.00,219.00 C 1027.45,214.78 1038.63,210.07 1048.54,198.00 1065.75,177.03 1068.92,142.36 1054.53,119.00 1049.23,110.38 1041.74,103.86 1033.00,98.87 1010.41,85.97 985.96,87.00 961.00,87.00 961.00,87.00 864.00,87.00 864.00,87.00 864.00,87.00 864.00,315.00 864.00,315.00 864.00,315.00 911.00,315.00 911.00,315.00 Line truncated
</svg>
</div>
<div class="navbar">
<a href="blog/index.html" title="blog">/blog</a>
<a href="projets/index.html" title="projets">/projets</a>
<a href="artworks/index.html" title="artworks">/artworks</a>
<a href="https://git.gltronic.ovh" title="git">git</a>
<a href="https://cloud.gltronic.ovh" title="cloud">cloud</a>
<div class="flexContainer">
<div class="menuContainer">
<a href="/">
<video class="avatar" src="/img/avatar_animated2.webm" loop="loop" autoplay="autoplay"></video>
<ul>
<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://drop.gltronic.ovh/">drop</a></li>
<li><a href="https://gltronic.ovh/about.html">?</a></li>
</ul>
</a>
</div>
</div>
<div id="background" class="background"></div>
</body>
<footer style="position:fixed">
<footer style="position:fixed">
<a class="footer" href="/">gltronic - 2021</a>
</footer>
<script src="/js/main.js" type="module"></script>
</html>
templates/menu.hbs
+2 -1
View File
@@ -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>