first commit

js/3d_home.js

@@ -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();