body {
margin: 0;
}
canvas {
display: block;
}

Adding a 3D model to a website using THREE.JS

THREE.JS is a popular 3D library for creating and displaying 3D content on the web. With THREE.JS, you can add 3D models to your website to create engaging and interactive experiences for your users.

Getting Started with THREE.JS

To get started with THREE.JS, you’ll need to include the THREE.JS library in your HTML file. You can do this by adding the following script tag to your HTML file:

Creating a 3D Scene

Once you have included the THREE.JS library, you can start creating a 3D scene. First, you’ll need to create a scene, a camera, and a renderer:

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

Adding a 3D Model

Now that you have a 3D scene set up, you can add a 3D model to it. 3D models can be created using 3D modeling software and exported to popular formats such as .obj or .gltf. Once you have a 3D model, you can load it into your scene using the THREE.JS loader:

    
      const loader = new THREE.GLTFLoader();
      loader.load('path_to_your_model.glb', function (model) {
        scene.add(model.scene);
      });
    
  

Animating the 3D Model

Once you have added a 3D model to your scene, you can animate it using THREE.JS. You can animate the 3D model by updating its position, rotation, or scale in the render loop:

    
      function animate() {
        requestAnimationFrame(animate);
        // Update the position, rotation, or scale of the 3D model here
        renderer.render(scene, camera);
      }
      animate();
    
  

Conclusion

With THREE.JS, adding a 3D model to a website is easy and can create immersive and interactive experiences for your users. By following the steps outlined in this article, you can bring your 3D creations to life on the web.