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., .glb files) 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

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!