feat: load 3d nds model

src/main.ts

@@ -1,11 +1,13 @@
 import "./style.css";
 
 import * as THREE from "three";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera(75, 0, 0.001, 1000);
 const renderer = new THREE.WebGLRenderer();
+renderer.setClearColor(0xffffff);
 
 const controls = new OrbitControls(camera, renderer.domElement);
 
@@ -14,15 +16,30 @@ const handleResize = () => {
   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);
 
 renderer.setAnimationLoop(() => {
   controls.update();
-    
+
   renderer.render(scene, camera);
 });