three js init

main.js

@@ -0,0 +1,65 @@
+import * as THREE from 'three';
+import Stats from 'three/addons/libs/stats.module.js';
+import { RapierPhysics } from 'three/addons/physics/RapierPhysics.js';
+import { RapierHelper } from 'three/addons/helpers/RapierHelper.js';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
+import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
+
+var renderer, camera, scene, car, stats, container;
+
+(() => {
+    container = document.getElementById('container');
+
+    stats = new Stats();
+    renderer = new THREE.WebGLRenderer({ antialias: true });
+    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);
+    scene = new THREE.Scene();
+
+    container.appendChild(stats.dom);
+    container.appendChild(renderer.domElement);
+
+    // setup
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+
+    scene.background = new THREE.Color( 0xbfe3dd );
+
+    camera.position.set(0, 1, 5);
+
+    var sun = new THREE.DirectionalLight(0xffffff, 1.5);
+    sun.position.set(10, 10, 10);
+    scene.add(sun);
+    var ambientLight = new THREE.AmbientLight(0x404040);
+    scene.add(ambientLight);
+
+    const loader = new GLTFLoader();
+    loader.load('Miata.glb', (gltf) => {
+        car = gltf.scene;
+        car.position.set(0, 0, 0);
+        car.scale.set(1, 1, 1);
+        scene.add(car);
+    });
+
+
+    window.onresize = function () {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+
+        renderer.setSize(window.innerWidth, window.innerHeight);
+
+    };
+
+    function loop() {   
+        // rotate the car
+        if (car) {
+            car.rotation.y += 0.01;
+        }
+        stats.update();
+        renderer.render(scene, camera);
+    }
+
+    renderer.setAnimationLoop(loop);
+
+
+})();