fix: webgl feedback loop error

src/main.ts

@@ -4,10 +4,17 @@ 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();
+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);
 
@@ -37,12 +44,11 @@ directional.target = nds.scene;
 directional.position.set(0, 100, 0);
 scene.add(directional);
 
+// main loop
 renderer.setAnimationLoop(() => {
   controls.update();
 
   renderer.render(scene, camera);
 });
 
-camera.position.z = 5;
-
 document.body.appendChild(renderer.domElement);