Скачать или смотреть Blender 3D Spaceship with JavaScript, ThreeJS and GSAP Tweening - Part 5

This is part 5 of the spaceship project taking 3D models from Blender to the browser via GLTF in three.js (ThreeJS) and GSAP's tweening library.

Discovering the optimal workflow for bringing your intricate Blender 3D spaceship models to life on the web.

Official GitHub repo:
https://github.com/peteee/spaceship-new/

This tutorial is beginner-to-intermediate coder -friendly :)

Bonus: GitHub and Terminal use in action | Some of my favorite commands in a (nut) shell :D

Software used: Visual Studio Code and ThreeJS and GSAP & Blender (see previous videos)

Happy Coding!!

--

Here's a summary of the key steps:
Integrating GSAP: The creator imports the GSAP tweening library via a CDN into the `index.html` file (1:00).
Animating with `requestAnimationFrame`: To enable continuous movement, the static Three.js render function is replaced with an `animate` function that uses `window.requestAnimationFrame` to repeatedly call the render function, ensuring smooth updates (1:33).
Adding Hover Animation: GSAP's `to` method is used to create a hovering animation for the spaceship on the Y-axis, giving it a dynamic feel (5:09).
Implementing Keyboard Controls: An event listener for `keydown` is added to detect arrow key presses. Variables for the ship's X, Y, and Z coordinates (though Y and Z are initially confused and later corrected) are introduced to track its position (5:47).
Moving the Ship with GSAP: When arrow keys are pressed, the ship's coordinates are updated, and GSAP's `to` method is used again to smoothly tween the spaceship's position to the new coordinates, making it move left, right, forward, and backward (12:28).
Adding Sound Effects: A short "spaceship engine" sound effect is loaded and played using the `Audio` object in JavaScript whenever an arrow key is pressed. The creator also demonstrates how to reset the audio's `currentTime` and adjust its `volume` to prevent overlapping sounds and manage loudness (15:17).
GitHub Repository: The creator mentions uploading all project files to a GitHub repository for users to access and experiment with (22:28).