three.ts

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { Renderer } from "three";
import { PerspectiveCamera } from "three/src/cameras/PerspectiveCamera";

function resetCanvas(renderer: Renderer, camera: PerspectiveCamera) {
  const size = document.body.clientWidth;
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(size, size);
}

const canvas = <HTMLCanvasElement>document.getElementById("backgroundCanvas");
const renderer = new THREE.WebGLRenderer({ canvas: canvas });
const camera = new THREE.PerspectiveCamera(
  50,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
resetCanvas(renderer, camera);
const scene = new THREE.Scene();
let Mesh = new THREE.Group();
let light;

function init() {
  scene.background = new THREE.Color("black");
  camera.position.set(0, 10, 20);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  window.addEventListener(
    "resize",
    () => {
      resetCanvas(renderer, camera);
    },
    false
  );
}

function setLight() {
  light = new THREE.AmbientLight(0xffffff); // soft white light
  scene.add(light);
}

function loadGLTF() {
  let balloonLoader = new GLTFLoader();

  balloonLoader.load("/model/untitled.gltf", (gltf) => {
    Mesh = gltf.scene;
    Mesh.scale.set(0.1, 0.1, 0.1);
    scene.add(Mesh);
    Mesh.position.x = 0;
    Mesh.position.y = 5.0;
    Mesh.position.z = 0;
    Mesh.rotation.y = -0.5;
  });
}

function animate() {
  requestAnimationFrame(animate);
  if (Mesh && Mesh.rotation) {
    // Mesh.rotation.y -= 0.005;
  }
  renderer.render(scene, camera);
}

init();
setLight();
loadGLTF();
animate();