Adding 3D Models to Your HTML Website
Introduction
Incorporating 3D models into your website can significantly enhance its visual appeal and interactivity. This guide will walk you through the process of adding 3D models to your HTML website using popular libraries such as Three.js and <model-viewer>. We will cover where to source 3D models, how to host them for CDN, and how to modify their positioning and styling. Additionally, we'll explore alternatives to Sketchfab for 3D model resources.
Sourcing 3D Models
Free 3D Model Resources
- Sketchfab: A large repository of 3D models, both free and paid.
- TurboSquid: Offers a vast collection of 3D models for different uses.
- CGTrader: Another platform with a mix of free and paid 3D models.
- Free3D: Provides a variety of free 3D models for download.
Hosting 3D Models
Using GitHub and jsDelivr
-
Host on GitHub: Upload your 3D model files (e.g.,
.glbfiles) to a GitHub repository. -
Serve via jsDelivr: Use jsDelivr to serve your files from GitHub. For example:
- GitHub URL:
https://github.com/SH20RAJ/3js/blob/main/free_axe_sylvaxe.glb - jsDelivr URL:
https://cdn.jsdelivr.net/gh/SH20RAJ/3js@main/free_axe_sylvaxe.glb
- GitHub URL:
Using Three.js to Display 3D Models
Setting Up Three.js
Create an HTML file and include the Three.js library:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Model with Three.js</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>
<script>
// Basic Three.js setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Add lighting
const light = new THREE.AmbientLight(0x404040);
scene.add(light);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);
// Load a 3D model
const loader = new THREE.GLTFLoader();
loader.load('https://cdn.jsdelivr.net/gh/SH20RAJ/3js@main/free_axe_sylvaxe.glb', function(gltf) {
scene.add(gltf.scene);
gltf.scene.position.set(0, 0, 0); // Positioning the model
renderer.render(scene, camera);
});
camera.position.z = 5;
// Animation loop
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
Modifying Positioning and CSS
Adjust the model's position using the position.set(x, y, z) method. Customize the canvas appearance through CSS.
Using <model-viewer> to Display 3D Models
Setting Up <model-viewer>
Create an HTML file and include the <model-viewer> library:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Model with <model-viewer></title>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<style>
model-viewer {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<model-viewer src="https://cdn.jsdelivr.net/gh/SH20RAJ/3js@main/free_axe_sylvaxe.glb" alt="A 3D model" auto-rotate camera-controls></model-viewer>
</body>
</html>
Customizing <model-viewer>
Modify the CSS to change the appearance of the <model-viewer> element. Use attributes like auto-rotate, camera-controls, and background-color to customize the viewer's behavior and look.
Alternatives to Sketchfab for 3D Model Resources
- Poly Haven: A platform offering high-quality free 3D models, textures, and HDRIs.
- BlenderKit: Integrates with Blender to provide a library of free and paid 3D assets.
- Open3DModel: Offers a wide range of free 3D models for different purposes.
Conclusion
Adding 3D models to your website can greatly enhance user experience. By using libraries like Three.js or <model-viewer>, you can easily integrate and customize 3D models. Host your models on platforms like GitHub and serve them via jsDelivr for efficient delivery. Explore various resources to find the perfect 3D models for your project.
Feel free to experiment and bring your website to life with stunning 3D models!
Top comments (2)
This is excellent. I've done a few interesting proofs of concept for Web3D/WebXR using physics and raycasters and collisions and such on Codepen (I followed you!). Check it out: codepen.io/horaceshmorace.
Keep up the good work!