55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
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);
|