first commit
This commit is contained in:
parent
5509bdcb73
commit
e94fc6a286
BIN
assets/logo.png
Normal file
BIN
assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
assets/models/scene.glb
Normal file
BIN
assets/models/scene.glb
Normal file
Binary file not shown.
BIN
assets/textures/noise.png
Normal file
BIN
assets/textures/noise.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
53
index.htm
Normal file
53
index.htm
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Looki2000</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="main.css">
|
||||||
|
<link rel = "icon" href = "assets/logo.png" type = "image/x-icon">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.htm"><img src="assets/logo.png" alt="Home page"></a></li>
|
||||||
|
<li><a href="">Projects</a></li>
|
||||||
|
<li><a href="" style="color: rgb(200,255,255);">GeoCube</a></li>
|
||||||
|
<li><a href="" style="color: rgb(190,255,182);">JokeWareHub</a></li>
|
||||||
|
<li><a href="">My Blender Wallpapers</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<script src="js/three.js"></script>
|
||||||
|
<script src="js/GLTFLoader.js"></script>
|
||||||
|
<script src="js/3d_home.js"></script>
|
||||||
|
|
||||||
|
<div id="over_render">
|
||||||
|
<div id="main_box">
|
||||||
|
<h1>Looki2000</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="projects_box">
|
||||||
|
<h1>About Me</h1>
|
||||||
|
<p>testowane. sussy amogus jest sus. testowy tekst służący testowaniu strony</p>
|
||||||
|
<p>testowanie</p>
|
||||||
|
<p>testowanie</p>
|
||||||
|
<p>testowanie</p>
|
||||||
|
<p>testowanie</p>
|
||||||
|
<p>testowanie</p>
|
||||||
|
<p>testowanie</p>
|
||||||
|
<p>testowanie</p>
|
||||||
|
<p>testowanie</p>
|
||||||
|
<p>testowanie</p>
|
||||||
|
<p>testowanie</p>
|
||||||
|
<p>testowanie</p>
|
||||||
|
<p>testowanie</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2022 Looki2000</p>
|
||||||
|
<a href="https://www.youtube.com/c/Looki2000"><img src="https://www.youtube.com/s/desktop/7edc9c99/img/favicon_96x96.png"></a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
103
js/3d_home.js
Normal file
103
js/3d_home.js
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
const scene = new THREE.Scene();
|
||||||
|
|
||||||
|
// render settings
|
||||||
|
const render_frame_height = 512;
|
||||||
|
|
||||||
|
// jelly movement simulation settings
|
||||||
|
const stiffness = 0.1;
|
||||||
|
const damping = 0.1;
|
||||||
|
|
||||||
|
// model files
|
||||||
|
///////////////////
|
||||||
|
|
||||||
|
// precalculated constants/variables and initializing variables
|
||||||
|
// navbar height
|
||||||
|
const navbar_height = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--logo_height')) + parseInt(getComputedStyle(document.documentElement).getPropertyValue('--logo_margin')) * 2;
|
||||||
|
|
||||||
|
// jelly simulation variables
|
||||||
|
const jelly_position = new THREE.Vector2();
|
||||||
|
const velocity = new THREE.Vector2();
|
||||||
|
|
||||||
|
// calculate damping multiplier from damping value
|
||||||
|
const damping_multiplier = 1 - damping;
|
||||||
|
|
||||||
|
// calculate render frame aspect ratio
|
||||||
|
const render_frame_aspect = window.innerWidth / render_frame_height;
|
||||||
|
// calculate boolean telling if aspect ration is vertical (taller than wide)
|
||||||
|
//const aspect_ratio_vertical = render_frame_aspect < 1;
|
||||||
|
//console.log(aspect_ratio_vertical);
|
||||||
|
|
||||||
|
// calculate half of the render frame size
|
||||||
|
const half_frame_size = new THREE.Vector2(window.innerWidth / 2, render_frame_height / 2);
|
||||||
|
|
||||||
|
///////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
const camera = new THREE.PerspectiveCamera( 45, render_frame_aspect, 0.1, 1000 );
|
||||||
|
|
||||||
|
const renderer = new THREE.WebGLRenderer();
|
||||||
|
renderer.setSize( window.innerWidth, 512 );
|
||||||
|
document.body.appendChild( renderer.domElement );
|
||||||
|
|
||||||
|
// set background color to rgb(6, 6, 6)
|
||||||
|
renderer.setClearColor(0x060606);
|
||||||
|
|
||||||
|
// loading model
|
||||||
|
const loader = new THREE.GLTFLoader();
|
||||||
|
loader.load("assets/models/scene.glb", handle_load);
|
||||||
|
|
||||||
|
function handle_load(gltf) {
|
||||||
|
scene.add(gltf.scene);
|
||||||
|
}
|
||||||
|
|
||||||
|
// function to get mouse position inside the render frame
|
||||||
|
const mouse_pos = new THREE.Vector2();
|
||||||
|
window.addEventListener("mousemove", function(e) {
|
||||||
|
// get mouse position inside the render frame and make one axis in range from -1 to 1 while taking aspect ratio into account on the second axis depending if aspect ratio is vertical or not
|
||||||
|
//if (aspect_ratio_vertical) { // if aspect ratio is vertical
|
||||||
|
// mouse_pos.x = (e.clientX / half_frame_size.x - 1) * render_frame_aspect;
|
||||||
|
// mouse_pos.y = (e.clientY - navbar_height) / half_frame_size.y + 1;
|
||||||
|
//} else { // if aspect ratio is not vertical
|
||||||
|
mouse_pos.x = e.clientX / half_frame_size.x - 1;
|
||||||
|
mouse_pos.y = ((navbar_height - e.clientY) / half_frame_size.y + 1) / -render_frame_aspect;
|
||||||
|
//}
|
||||||
|
// clamp y to range from -2 to 2
|
||||||
|
mouse_pos.y = Math.min(Math.max(mouse_pos.y, -2), 2);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// make camera above the scene model
|
||||||
|
camera.position.y = 4;
|
||||||
|
// rotate camera to look down
|
||||||
|
camera.rotation.x = -Math.PI / 2;
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
requestAnimationFrame( animate );
|
||||||
|
|
||||||
|
// jelly movement simulation
|
||||||
|
// change velocity by distance beetween target position and curent jelly positition then multiplied by stiffness
|
||||||
|
velocity.x += (mouse_pos.x * 3 - jelly_position.x) * stiffness;
|
||||||
|
velocity.y += (mouse_pos.y * 3 - jelly_position.y) * stiffness;
|
||||||
|
|
||||||
|
// change position by velocity
|
||||||
|
jelly_position.x += velocity.x;
|
||||||
|
jelly_position.y += velocity.y;
|
||||||
|
|
||||||
|
// set camera position x and y to jelly position
|
||||||
|
camera.position.x = jelly_position.x;
|
||||||
|
camera.position.z = jelly_position.y;
|
||||||
|
|
||||||
|
// translate div displayed over the render frame to the position of the jelly position
|
||||||
|
document.getElementById("main_box").style.transform = "translate(" + (jelly_position.x * 50) + "px, " + (jelly_position.y * 50) + "px)";
|
||||||
|
|
||||||
|
// if velocity is not 0 then multiply it by damping multiplier. do it for each axis separately
|
||||||
|
if (velocity.x != 0) {
|
||||||
|
velocity.x *= damping_multiplier;
|
||||||
|
}
|
||||||
|
if (velocity.y != 0) {
|
||||||
|
velocity.y *= damping_multiplier;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderer.render( scene, camera );
|
||||||
|
};
|
||||||
|
|
||||||
|
animate();
|
||||||
4089
js/GLTFLoader.js
Normal file
4089
js/GLTFLoader.js
Normal file
File diff suppressed because it is too large
Load Diff
32593
js/three.js
Normal file
32593
js/three.js
Normal file
File diff suppressed because one or more lines are too long
140
main.css
Normal file
140
main.css
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: rgb(40, 40, 40);
|
||||||
|
/* font-family: arial, sans-serif; */
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
color: white;
|
||||||
|
overflow-x: hidden; /* Hide horizontal scrollbar */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* variables */
|
||||||
|
:root {
|
||||||
|
/* navbar settings */
|
||||||
|
--logo_margin: 4px;
|
||||||
|
--logo_height: 40px;
|
||||||
|
--navbar_height: calc(var(--logo_height) + var(--logo_margin) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* everything in the navbar */
|
||||||
|
nav ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: var(--navbar_height);
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li {
|
||||||
|
float: left;
|
||||||
|
height: calc(var(--logo_height) + var(--logo_margin) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav img {
|
||||||
|
width: auto;
|
||||||
|
height: var(--logo_height);
|
||||||
|
margin: var(--logo_margin);
|
||||||
|
margin-left: 16px;
|
||||||
|
margin-right: 16px;
|
||||||
|
border-radius: 15px; /* rounded corners */
|
||||||
|
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav img:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
border-radius: 5px; /* rounded corners */
|
||||||
|
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
display: block;
|
||||||
|
color: white;
|
||||||
|
/* make text fill up emtire li space */
|
||||||
|
display:inline-block;
|
||||||
|
height:100%;
|
||||||
|
/* make padding on the left and right of the text */
|
||||||
|
padding: 0 12px;
|
||||||
|
/* center text verticaly */
|
||||||
|
line-height: var(--navbar_height);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
background-color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* make div with class "over_render" to be on top of three js render canvas */
|
||||||
|
#over_render {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 512px; /* height of the render canvas */
|
||||||
|
top: var(--navbar_height);
|
||||||
|
/* verticaly center everything in that div */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#main_box {
|
||||||
|
/* center everything in div horizontally*/
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
padding: 10px 30px;
|
||||||
|
|
||||||
|
/* rounded corners */
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
/* blurry, transparent glass */
|
||||||
|
backdrop-filter: blur(100px);
|
||||||
|
background-image: url(assets/textures/noise.png);
|
||||||
|
|
||||||
|
/* make text look like overexposed blue neon */
|
||||||
|
color: rgb(247, 255, 230);
|
||||||
|
text-shadow: 0px 0px 8px rgb(223, 255, 153);
|
||||||
|
|
||||||
|
font-size: 50px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projects_box {
|
||||||
|
/* rounded corners */
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
background-color: rgb(30, 30, 30);
|
||||||
|
|
||||||
|
width: 80%;
|
||||||
|
|
||||||
|
/* aling div in the center of the screen */
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
margin-top: 40px;
|
||||||
|
|
||||||
|
padding: 1px 40px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.projects_box h1 {
|
||||||
|
/* make font bigger and cyan */
|
||||||
|
font-size: 60px;
|
||||||
|
color: rgb(51, 156, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
height: 50px;
|
||||||
|
background-color: #333;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
margin: 50px 0px 0px;
|
||||||
|
|
||||||
|
/* vertcaly center text */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer img {
|
||||||
|
width: auto;
|
||||||
|
height: 40px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user