📄
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import "./style.css";
import { AmbientLight, PerspectiveCamera, Scene, WebGLRenderer } from "three";
import {
Viewer,
WebXRMode,
RenderMode,
SceneRevealMode,
LogLevel,
} from "@mkkellogg/gaussian-splats-3d";
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 threeScene = new Scene();
const mtlLoader = new MTLLoader();
const materials = await mtlLoader.loadAsync("me.mtl");
materials.preload();
const objLoader = new OBJLoader();
objLoader.setMaterials(materials);
const martenTask = objLoader
.loadAsync("me.obj", (e) => (progress.value = e.loaded / e.total))
.then((marten) => {
marten.scale.setScalar(0.001);
marten.rotateX(-Math.PI / 2);
marten.rotateZ(-Math.PI / 4);
threeScene.add(marten);
});
const ambientLight = new AmbientLight(0xfffdf1);
threeScene.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);
const splatViewer = new Viewer({
selfDriveMode: false,
renderer,
camera,
threeScene,
useBuiltInControls: false,
ignoreDevicePixelRatio: false,
gpuAcceleratedSort: false,
enableSIMDInSort: true,
sharedMemoryForWorkers: false,
integerBasedSort: true,
halfPrecisionCovariancesOnGPU: false,
dynamicScene: false,
webXRMode: WebXRMode.None,
renderMode: RenderMode.Always,
sceneRevealMode: SceneRevealMode.Instant,
antialiased: false,
focalAdjustment: 1.0,
logLevel: LogLevel.Debug,
sphericalHarmonicsDegree: 0,
inMemoryCompressionLevel: 2,
freeIntermediateSplatData: false,
});
await splatViewer.addSplatScenes([
{
path: "bedroom.ply",
scale: [0.4, 0.4, 0.4],
rotation: [0.9997838, 0, 0, 0.0207948],
position: [0, 0.55, 0],
},
]);
await martenTask;
requestAnimationFrame(animate);
let prevTime: number | null = null;
function animate(time: number) {
progress.hidden = true;
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);
}
splatViewer.update();
splatViewer.render();
prevTime = time;
requestAnimationFrame(animate);
}