import "./style.css";

import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

// initialize scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 0, 0.001, 1000);
const renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true,
});
renderer.setClearColor(0xffffff);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
camera.position.z = 5;

const controls = new OrbitControls(camera, renderer.domElement);

const handleResize = () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
};
window.addEventListener("resize", handleResize, false);
handleResize();

// load nds model
const loader = new GLTFLoader();
const nds = await loader.loadAsync("/nintendo-ds/scene.gltf");
nds.scene.scale.set(50, 50, 50);
scene.add(nds.scene);

// create light
const color = 0xffffff;
const intensity = 3;
const ambient = new THREE.AmbientLight(color, intensity);
scene.add(ambient);

const directional = new THREE.DirectionalLight(color, intensity);
directional.target = nds.scene;
directional.position.set(0, 100, 0);
scene.add(directional);

// main loop
renderer.setAnimationLoop(() => {
  controls.update();

  renderer.render(scene, camera);
});

document.body.appendChild(renderer.domElement);