65 lines
1.9 KiB
JavaScript
65 lines
1.9 KiB
JavaScript
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);
|
|
|
|
|
|
})(); |