📄
src/main.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import "./style.css";
import { AmbientLight, PerspectiveCamera, Scene, WebGLRenderer } from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
import { MTLLoader } from "three/addons/loaders/MTLLoader.js";
declare const view: HTMLCanvasElement;
declare const progress: HTMLProgressElement;
const scene = new Scene();
const mtlLoader = new MTLLoader();
const materials = await mtlLoader.loadAsync("me.mtl");
materials.preload();
const objLoader = new OBJLoader();
objLoader.setMaterials(materials);
const marten = await objLoader.loadAsync(
"me.obj",
(e) => (progress.value = e.loaded / e.total),
);
marten.scale.setScalar(0.001);
marten.rotateX(-Math.PI / 2);
marten.rotateZ(-Math.PI / 4);
scene.add(marten);
const ambientLight = new AmbientLight(0xfffdf1);
scene.add(ambientLight);
const camera = new PerspectiveCamera(75, view.width / view.height, 0.001, 10.0);
camera.position.y = 0.6;
camera.position.z = 1;
const controls = new OrbitControls(camera, view);
controls.enableDamping = true;
controls.maxDistance = 3;
controls.minDistance = 0.2;
controls.target.y = camera.position.y;
const renderer = new WebGLRenderer({
alpha: true,
antialias: true,
canvas: view,
});
renderer.setSize(view.width, view.height, false);
renderer.setAnimationLoop(animate);
progress.hidden = true;
let prevTime: number | null = null;
function animate(time: number) {
const rect = view.getBoundingClientRect();
view.width = rect.width;
view.height = rect.height;
camera.aspect = rect.width / rect.height;
camera.updateProjectionMatrix();
renderer.setSize(rect.width, rect.height, false);
if (prevTime != null) {
const deltaTime = time - prevTime;
controls.update(deltaTime);
controls.target.x = controls.target.z = 0;
controls.target.y = Math.min(Math.max(-1, controls.target.y), 1);
}
renderer.render(scene, camera);
prevTime = time;
}