Making the canvas only fit the size and height of the boxing glove

import * as THREE from ‘three’;
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader’;
import gsap from ‘gsap’;

// Set up the scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(‘#E8E8E8’)

// Set up the camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Set up the renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById(‘canvas-container’).appendChild(renderer.domElement);

// Load the boxing glove model
const loader = new GLTFLoader();
loader.load(‘/boxing_glove.glb’, function (gltf) {
const glove = gltf.scene;

// Position and scale the glove as desired
glove.scale.set(9, 9, 9);



// Add the glove to the scene
scene.add(glove);

// Start the animation after the glove is loaded
animate();

// Track the scroll position
let scrollPos = 0;

// Detect the scroll event
function handleScroll(event) {
    event.preventDefault();

    // Calculate the new scroll position
    const newPos = window.pageYOffset || document.documentElement.scrollTop;

    // Calculate the rotation amount based on the scroll position
    const rotationAmount = (newPos - scrollPos) * 0.01;

    // Update the rotation of the glove
    glove.rotation.y += rotationAmount;

    // Store the current scroll position
    scrollPos = newPos;
}

window.addEventListener('scroll', handleScroll, { passive: false });

});

// Add lights to the scene for better visibility
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

// Render loop
function animate() {
requestAnimationFrame(animate);

// Render the scene
renderer.render(scene, camera);

}
this is the script that was made by chatgpt, want to make it so that the canvas will be way way smaller since it’s taking up 90% of the page and no space for text, or possibly make it so that only the object will be on screen and not the canvas, thank you

Why don’t you ask again ChatGPT to do this for you?

Anyway, this example might help, as it shows a Three.js canvas that is inside a <div> element (<div> size in defined in the CSS section):

https://codepen.io/boytchev/full/JjaBbra

image