In this article, I’ll walk you through creating a stunning 3D human scan animation using basic web technologies: HTML, CSS, and JavaScript. By using the GSAP (GreenSock Animation Platform) for animations and Spline for 3D rendering, we can achieve an impressive futuristic effect, similar to the glowing human figure shown in the image.
Prerequisites
To follow this tutorial, you should have:
- A basic understanding of HTML, CSS, and JavaScript.
- Familiarity with Spline for 3D modeling and web integrations.
- A code editor and a web browser for testing.
Step 1: Setting Up the Project Structure
We’ll start by structuring the project into three main files: an HTML file, a CSS file, and a JavaScript file. This approach makes the code organized and modular.
HTML Code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Human Scan</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id='container'>
<canvas id="canvas3d"></canvas>
</div>
<!-- partial -->
<script src='https://unpkg.com/gsap@3/dist/gsap.min.js'></script><script type="module" src="./script.js"></script>
</body>
</html>
Here, we use a <canvas> element to hold the 3D scene. The 3D rendering will be loaded onto this canvas using Spline’s runtime API.
Step 2: Styling the Page
The next step is to style the background and layout of the page using CSS. We want a dark, futuristic feel to create contrast with the glowing 3D scan.
CSS Code
body {
background-color: #0A1220;
margin: 0;
overflow: hidden;
}
#container{
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100% !important;
}
#canvas3d{
min-height: 100vh !important;
}
- Background color: A deep navy-blue color (
#0A1220) is used to create the high-tech, sci-fi feel. - Container styling: The container is centered using flexbox, ensuring the 3D model is always in the middle of the page.
- GSAP rotates the 3D model infinitely in a smooth, continuous motion. You can customize this animation to control the speed, direction, and timing.
Step 3: Loading the 3D Model using Spline
Now comes the most exciting part—loading the 3D model. This is done using Spline’s Runtime API, which allows us to embed interactive 3D content into our web pages. We will use JavaScript to load the 3D scene created in Spline.
JavaScript Code
const fileName = "0eI7JO23zWEe8FiA";
import { Application } from "https://esm.sh/@splinetool/runtime";
const canvas = document.getElementById('canvas3d');
const app = new Application(canvas);
app.load(`https://prod.spline.design/${fileName}/scene.splinecode`)
- fileName: This is a unique identifier for the Spline project, which corresponds to the 3D model of the human scan.
- Spline Runtime API: We import the
Applicationfrom Spline’s runtime package hosted on esm.sh, a CDN for ES modules. - Canvas Element: The 3D scene is loaded onto the
<canvas>element withid="canvas3d". The Spline scene URL is constructed using thefileNamevariable, ensuring the right model is loaded.
Video Preview Of 3D Human Scan Animation
Step 5: Hosting and Testing
Once everything is set up, test your project locally. You can use the Live Server extension in Visual Studio Code or any HTTP server to view the 3D animation in your browser. Simply open the index.html file, and you should see the glowing 3D human scan on a dark background.
If you’re happy with the result, you can host this project on your own website by uploading the HTML, CSS, and JavaScript files, along with any assets.
Conclusion
With just a few lines of HTML, CSS, and JavaScript, combined with the power of Spline for 3D modeling and GSAP for animations, you can create an impressive 3D human scan animation. This technique can be used in interactive landing pages, medical simulations, sci-fi applications, or any project where you want to captivate the user with 3D visuals.
