103 lines
3.7 KiB
JavaScript
103 lines
3.7 KiB
JavaScript
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(); |