Added 3D background, updated langing & artworks
This commit is contained in:
gltron committed
1 parent
13ec138c1f
commit
3e66fca0be
14 files changed
+161
-20
No files matched your search
@@ -6,8 +6,6 @@ yearonly: true
|
|||||||
url: 2020.html
|
url: 2020.html
|
||||||
---
|
---
|
||||||
|
|
||||||
Ordre de création décroissant
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -6,8 +6,7 @@ yearonly: true
|
|||||||
url: 2021.html
|
url: 2021.html
|
||||||
---
|
---
|
||||||
|
|
||||||
Ordre de création décroissant
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -3,12 +3,10 @@ html, body {
|
|||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
color:#444;
|
color:#444;
|
||||||
background-color: #EEEEEE;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-image: url(/img/background.jpg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** custom landing **/
|
/** custom landing **/
|
||||||
@@ -40,6 +38,14 @@ html, body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: -100;
|
||||||
|
}
|
||||||
|
|
||||||
/** website **/
|
/** website **/
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@@ -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();
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1 @@
|
|||||||
|
<div id="background" class="background"></div>
|
||||||
@@ -7,5 +7,7 @@
|
|||||||
{{> submenu}}
|
{{> submenu}}
|
||||||
{{> article}}
|
{{> article}}
|
||||||
</div>
|
</div>
|
||||||
|
<div id="background" class="background"></div>
|
||||||
</body>
|
</body>
|
||||||
|
<script src="/js/main.js" type="module"></script>
|
||||||
</html>
|
</html>
|
||||||
@@ -6,5 +6,7 @@
|
|||||||
{{> menu}}
|
{{> menu}}
|
||||||
{{> submenu}}
|
{{> submenu}}
|
||||||
</div>
|
</div>
|
||||||
|
<div id="background" class="background"></div>
|
||||||
</body>
|
</body>
|
||||||
|
<script src="/js/main.js" type="module"></script>
|
||||||
</html>
|
</html>
|
||||||
+16
-13
@@ -2,22 +2,25 @@
|
|||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
{{> header}}
|
{{> header}}
|
||||||
<body>
|
<body>
|
||||||
<div class="landing">
|
<div class="flexContainer">
|
||||||
<div id="logo">
|
<div class="menuContainer">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="109.288mm" viewBox="0 0 2176 413">
|
<a href="/">
|
||||||
<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
|
<video class="avatar" src="/img/avatar_animated2.webm" loop="loop" autoplay="autoplay"></video>
|
||||||
</svg>
|
<ul>
|
||||||
</div>
|
<li><a href="https://gltronic.ovh/blog/index.html">Blog</a></li>
|
||||||
<div class="navbar">
|
<li><a href="https://gltronic.ovh/projets/index.html">Projets</a></li>
|
||||||
<a href="blog/index.html" title="blog">/blog</a>
|
<li><a href="https://gltronic.ovh/artworks/index.html">Artworks</a></li>
|
||||||
<a href="projets/index.html" title="projets">/projets</a>
|
<li><a href="https://git.gltronic.ovh/">git</a></li>
|
||||||
<a href="artworks/index.html" title="artworks">/artworks</a>
|
<li><a href="https://drop.gltronic.ovh/">drop</a></li>
|
||||||
<a href="https://git.gltronic.ovh" title="git">git</a>
|
<li><a href="https://gltronic.ovh/about.html">?</a></li>
|
||||||
<a href="https://cloud.gltronic.ovh" title="cloud">cloud</a>
|
</ul>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="background" class="background"></div>
|
||||||
</body>
|
</body>
|
||||||
<footer style="position:fixed">
|
<footer style="position:fixed">
|
||||||
<a class="footer" href="/">gltronic - 2021</a>
|
<a class="footer" href="/">gltronic - 2021</a>
|
||||||
</footer>
|
</footer>
|
||||||
|
<script src="/js/main.js" type="module"></script>
|
||||||
</html>
|
</html>
|
||||||
+2
-1
@@ -5,7 +5,8 @@
|
|||||||
<li><a href="https://gltronic.ovh/blog/index.html">Blog</a></li>
|
<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/projets/index.html">Projets</a></li>
|
||||||
<li><a href="https://gltronic.ovh/artworks/index.html">Artworks</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>
|
<li><a href="https://gltronic.ovh/about.html">?</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
Reference in new issue
Block a user