rotate 3D model with scroll

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
	
<div class="section">
  <h1>1</h1>
</div>
<div class="section">
  <h1>2</h1>
</div>
<div class="section">
  <h1>3</h1>
</div>
<div class="section">
  <h1>4</h1>
</div>

<div id="3d"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>

</body>
</html>

CSS

* {
	    margin: 0px;
      padding: 0;
    }
    #3d {
      width: 100vw;
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      z-index: -1;
    }
    canvas {
      display: block;
    }
    .section {
      min-height: 100vh;
      display: grid;
      place-items: center;
      border: 1px solid red;
    }
    .section h1 {
      font-size: 100px;
    }

JavaScript

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.118/build/three.module.js';
import {FBXLoader} from 'https://cdn.jsdelivr.net/npm/three@0.118.1/examples/jsm/loaders/FBXLoader.js';
import {GLTFLoader} from 'https://cdn.jsdelivr.net/npm/three@0.118.1/examples/jsm/loaders/GLTFLoader.js';
import {OrbitControls} from 'https://cdn.jsdelivr.net/npm/three@0.118/examples/jsm/controls/OrbitControls.js';

let camera;
let renderer;
let scene;
let controls;

init();
animate();

function init() {

  // Scene
  scene = new THREE.Scene();

  const fov = 60;
  const aspect = window.innerWidth / ( window.innerHeight);
  const near = 0.1;
  const far = 1500;

  // Perspective Camera
  camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 0, -100);

  // Light
  const ambient = new THREE.AmbientLight(0x212121, 10);
  scene.add(ambient);

  const light = new THREE.DirectionalLight(0xffffff, 2);
  light.position.set(50, 50, 100);
  scene.add(light);

  const geometry = new THREE.BoxGeometry(20, 20, 20);
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  // xyz
  let helper = new THREE.AxesHelper(50);
  scene.add(helper);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
	renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById('3d').appendChild(renderer.domElement);

  window.addEventListener('resize', function()
    {
      const width = window.innerWidth;
      const height = window.innerHeight;
      renderer.setSize(width, height);
      camera.aspect = aspect;
      camera.updateProjectionMatrix();
    });
	
	//OrbitControls

  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.enableZoom = false;
  controls.enablePan = false;

  // gsap

  gsap.registerPlugin(ScrollTrigger);

  gsap.to(mesh.rotation,...