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

Questions
1

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

2

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

1 Like