fuhtho/3d-viewer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

First commit

Browse source
This commit is contained in:
Fuhrmann 2025-02-26 09:46:13 +01:00
commit 7fe5d03a09
33 changed files with 6524 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

41
.gitignore vendored Normal file
View file

@ -0,0 +1,41 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# env files (can opt-in for committing if needed)
.env*
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

36
README.md Normal file
View file

@ -0,0 +1,36 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

16
app/components/Map.tsx Normal file
View file

@ -0,0 +1,16 @@
"use client";
import { useEffect, useRef } from "react";
import { init } from "../three/utils/init";
import { initSimple } from "../three/simple-example";
export function Map() {
const divRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!divRef.current) return;
init(divRef.current);
//initSimple(divRef.current);
}, [divRef]);
return <div className="w-full h-full" ref={divRef}></div>;
}

BIN
app/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

21
app/globals.css Normal file
View file

@ -0,0 +1,21 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}

34
app/layout.tsx Normal file
View file

@ -0,0 +1,34 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "3D Viewer",
description: "A 3D viewer for geologic data, created by GeoSphere Austria",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}

10
app/page.tsx Normal file
View file

@ -0,0 +1,10 @@
import { Map } from "./components/Map";
export default function Home() {
return (
<div className="w-screen h-screen">
<main className="h-screen">
<Map></Map>
</main>
</div>
);
}

7
app/three/config.ts Normal file
View file

@ -0,0 +1,7 @@
export const MODEL_ID = "20";
export const SERVICE_URL =
"https://geusegdi01.geus.dk/meta3d/rpc/model_meta_all?modelid=";
export const VERTICES_URL = "https://geusegdi01.geus.dk/geom3d/data/nodes/";
export const TRIANGLE_INDICES_URL =
"https://geusegdi01.geus.dk/geom3d/data/triangles/";

195
app/three/main-webgpu.ts Normal file
View file

@ -0,0 +1,195 @@
import * as THREE from "three";
import {
positionGeometry,
cameraProjectionMatrix,
modelViewProjection,
modelScale,
positionView,
modelViewMatrix,
storage,
attribute,
float,
timerLocal,
uniform,
tslFn,
vec3,
vec4,
rotate,
PI2,
sin,
cos,
instanceIndex,
negate,
texture,
uv,
vec2,
positionLocal,
int,
Fn,
} from "three/tsl";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import GUI from "three/addons/libs/lil-gui.module.min.js";
let camera: THREE.PerspectiveCamera;
let scene: THREE.Scene;
let mesh: THREE.Mesh;
//@ts-ignore
let renderer: THREE.WebGPURenderer;
init();
function init() {
camera = new THREE.PerspectiveCamera(
70,
window.innerWidth / window.innerHeight,
0.1,
100
);
camera.position.z = 15;
scene = new THREE.Scene();
const instanceCount = 80;
const numCircles = 4;
const meshesPerCircle = instanceCount / numCircles;
const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
const texture = new THREE.TextureLoader().load("textures/crate.gif");
texture.colorSpace = THREE.SRGBColorSpace;
// @ts-ignore
const material = new THREE.MeshStandardNodeMaterial({ map: texture });
const effectController = {
uCircleRadius: uniform(1.0),
uCircleSpeed: uniform(0.5),
uSeparationStart: uniform(1.0),
uSeparationEnd: uniform(2.0),
uCircleBounce: uniform(0.02),
};
const positionTSL = Fn(() => {
// Destructure uniforms
const {
uCircleRadius,
uCircleSpeed,
uSeparationStart,
uSeparationEnd,
uCircleBounce,
} = effectController;
// Access the time elapsed since shader creation.
const time = timerLocal();
const circleSpeed = time.mul(uCircleSpeed);
// Index of a cube within its respective circle.
const instanceWithinCircle = instanceIndex.modInt(meshesPerCircle);
// Index of the circle that the cube mesh belongs to.
const circleIndex = instanceIndex.div(meshesPerCircle).add(1);
// Circle Index Even = 1, Circle Index Odd = -1.
const evenOdd = circleIndex.modInt(2).mul(2).oneMinus();
// Increase radius when we enter the next circle.
const circleRadius = uCircleRadius.mul(circleIndex);
// Normalize instanceWithinCircle to range [0, 2*PI].
const angle = float(instanceWithinCircle)
.div(meshesPerCircle)
.mul(PI2)
.add(circleSpeed);
// Rotate even and odd circles in opposite directions.
const circleX = sin(angle).mul(circleRadius).mul(evenOdd);
const circleY = cos(angle).mul(circleRadius);
// Scale cubes in later concentric circles to be larger.
const scalePosition = positionLocal.mul(circleIndex);
// Rotate the individual cubes that form the concentric circles.
const rotatePosition = rotate(scalePosition, vec3(time, time, time));
// Control how much the circles bounce vertically.
const bounceOffset = cos(time.mul(10)).mul(uCircleBounce);
// Bounce odd and even circles in opposite directions.
const bounce = circleIndex
.modInt(2)
.equal(0)
.cond(bounceOffset, negate(bounceOffset));
// Distance between minimumn and maximumn z-distance between circles.
const separationDistance = uSeparationEnd.sub(uSeparationStart);
// Move sin into range of 0 to 1.
const sinRange = sin(time).add(1).mul(0.5);
// Make circle separation oscillate in a range of separationStart to separationEnd
const separation = uSeparationStart.add(sinRange.mul(separationDistance));
// Y pos offset by bounce. Z-distance from the origin increases with each circle.
const newPosition = rotatePosition.add(
vec3(circleX, circleY.add(bounce), float(circleIndex).mul(separation))
);
return newPosition;
});
material.positionNode = positionTSL();
//material.colorNode = texture( crateTexture, uv().add( vec2( timerLocal(), negate( timerLocal()) ) ));
const r = sin(timerLocal().add(instanceIndex));
const g = cos(timerLocal().add(instanceIndex));
const b = sin(timerLocal());
material.fragmentNode = vec4(r, g, b, 1.0);
mesh = new THREE.InstancedMesh(geometry, material, instanceCount);
scene.add(mesh);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 3, -7.5);
scene.add(directionalLight);
// @ts-ignore
renderer = new THREE.WebGPURenderer({ antialias: false });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
controls.minDistance = 1;
controls.maxDistance = 30;
const gui = new GUI();
gui
.add(effectController.uCircleRadius, "value", 0.1, 3.0, 0.1)
.name("Circle Radius");
gui
.add(effectController.uCircleSpeed, "value", 0.1, 3.0, 0.1)
.name("Circle Speed");
gui
.add(effectController.uSeparationStart, "value", 0.5, 4, 0.1)
.name("Separation Start");
gui
.add(effectController.uSeparationEnd, "value", 1.0, 5.0, 0.1)
.name("Separation End");
gui
.add(effectController.uCircleBounce, "value", 0.01, 0.2, 0.001)
.name("Circle Bounce");
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
renderer.render(scene, camera);
}

30
app/three/simple-example.js Normal file
View file

@ -0,0 +1,30 @@
import * as THREE from "three";
export function initSimple(container) {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate);
container.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
}

29
app/three/utils/build-default-lights.ts Normal file
View file

@ -0,0 +1,29 @@
import { AmbientLight, DirectionalLight, Scene } from "three";
const DEG2RAD = Math.PI / 180;
export function buildDefaultLights(scene: Scene) {
// ambient light
scene.add(new AmbientLight(0x999999));
// directional lights
const opt = {
azimuth: 220,
altitude: 45,
};
const lambda = (90 - opt.azimuth) * DEG2RAD;
const phi = opt.altitude * DEG2RAD;
const x = Math.cos(phi) * Math.cos(lambda);
const y = Math.cos(phi) * Math.sin(lambda);
const z = Math.sin(phi);
const light1 = new DirectionalLight(0xffffff, 0.5);
light1.position.set(x, y, z);
scene.add(light1);
// thin light from the opposite direction
const light2 = new DirectionalLight(0xffffff, 0.1);
light2.position.set(-x, -y, -z);
scene.add(light2);
}

77
app/three/utils/build-meshes.ts Normal file
View file

@ -0,0 +1,77 @@
import {
BufferAttribute,
BufferGeometry,
DoubleSide,
Group,
Mesh,
MeshBasicMaterial,
MeshStandardMaterial,
} from "three";
import { fetchTriangleIndices } from "./fetch-triangle-indices";
import { fetchVertices } from "./fetch-vertices";
import { TRIANGLE_INDICES_URL, VERTICES_URL } from "../config";
interface MappedFeature {
featuregeom_id: number;
name: string;
geologicdescription: { "feature type": string; citation: string | null };
preview: { legend_color: string; legend_text: string };
}
async function buildMesh(layerData: MappedFeature) {
const color = `#${layerData.preview.legend_color}`;
const name = layerData.preview.legend_text;
const geomId = layerData.featuregeom_id.toString();
const geometry = new BufferGeometry();
const vertices = await fetchVertices(VERTICES_URL, geomId);
const positions = new BufferAttribute(vertices, 3);
geometry.setAttribute("position", positions);
const indexArray = await fetchTriangleIndices(TRIANGLE_INDICES_URL, geomId);
const indices = new BufferAttribute(indexArray, 1);
geometry.setIndex(indices);
geometry.scale(1, 1, 1);
geometry.computeBoundingSphere();
geometry.computeVertexNormals();
geometry.computeBoundingBox();
const material = new MeshStandardMaterial(
{
color: color,
metalness: 0.1,
roughness: 0.75,
flatShading: true,
side: DoubleSide,
// wireframe: false,
}
// this.uniforms.clipping
);
const mesh = new Mesh(geometry, material);
mesh.name = name;
mesh.userData.layerId = geomId;
mesh.castShadow = true;
mesh.receiveShadow = true;
// modelNode should be a THREE.Group object where all the model data gets added to
// in the original code modelNode is a direct reference to a THREE.Scene
// if (modelNode) {
// modelNode.add(mesh);
// }
return mesh;
}
export async function buildMeshes(mappedFeatures: MappedFeature[]) {
const meshes = [];
for (let i = 0; i < mappedFeatures.length; i++) {
const layerData = mappedFeatures[i];
const mesh = await buildMesh(layerData);
meshes.push(mesh);
}
return meshes;
}

104
app/three/utils/build-scene.ts Normal file
View file

@ -0,0 +1,104 @@
import {
BoxGeometry,
Camera,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
Scene,
Vector3,
WebGLRenderer,
} from "three";
import { buildDefaultLights } from "./build-default-lights";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
export interface Extent {
xmin: number;
ymin: number;
xmax: number;
ymax: number;
zmin: number;
zmax: number;
}
let controls: OrbitControls;
let renderer: WebGLRenderer;
let camera: PerspectiveCamera;
let scene: Scene;
export async function buildScene(container: HTMLElement, extent: Extent) {
const size = Math.max(
extent.xmax - extent.xmin,
extent.ymax - extent.ymin,
extent.zmax - extent.zmin
);
const center = new Vector3(
(extent.xmin + extent.xmax) / 2,
(extent.ymin + extent.ymax) / 2,
0
);
const width = container.clientWidth;
const height = container.clientHeight;
camera = new PerspectiveCamera(30, width / height, 0.1, size * 100);
camera.position.set(center.x, center.y, size * 5);
camera.lookAt(center);
renderer = new WebGLRenderer({
alpha: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
//renderer.autoClear = false;
//renderer.setClearColor(0x000000, 0.0); // second param is opacity, 0 => transparent
// enable clipping
renderer.localClippingEnabled = true;
container.appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(center.x, center.y, center.z); // Focus on the center
controls.enableDamping = true; // Smooth camera movement
controls.update();
// Scene will hold all our elements such as objects, cameras and lights
scene = new Scene();
buildDefaultLights(scene);
// const queryString = window.location.search;
// const urlParams = new URLSearchParams(queryString);
// const modelid = parseInt(urlParams.get("model_id") ?? "20", 10);
renderer.setAnimationLoop(animate);
window.addEventListener("resize", () => onWindowResize(container));
const testCube = new Mesh(
new BoxGeometry(size * 0.1, size * 0.1, size * 0.1),
new MeshBasicMaterial({ color: 0xff0000 })
);
testCube.position.copy(center);
scene.add(testCube);
return { renderer, scene, camera };
}
function onWindowResize(container: HTMLElement) {
// Update the camera's aspect ratio and the renderer's size to reflect
// the new screen dimensions upon a browser window resize.
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
// required if controls.enableDamping or controls.autoRotate are set to true
controls.update();
}
function animate() {
renderer.render(scene, camera);
// required if controls.enableDamping or controls.autoRotate are set to true
controls.update();
}

8
app/three/utils/fetch-triangle-indices.ts Normal file
View file

@ -0,0 +1,8 @@
import { unpackEdges } from "./parsers";
import { request } from "./request";
export async function fetchTriangleIndices(edgeUrl: string, geomId: string) {
const url = edgeUrl + geomId;
const buffer = await request(url);
return unpackEdges(buffer);
}

8
app/three/utils/fetch-vertices.ts Normal file
View file

@ -0,0 +1,8 @@
import { unpackVertices } from "./parsers";
import { request } from "./request";
export async function fetchVertices(pointUrl: string, geomId: string) {
const url = pointUrl + geomId;
const buffer = await request(url);
return unpackVertices(buffer);
}

5
app/three/utils/get-layer-id.ts Normal file
View file

@ -0,0 +1,5 @@
let lastId = 0;
export function stamp(obj: any) {
return obj._id ?? (obj._id = ++lastId);
}

15
app/three/utils/get-metadata.ts Normal file
View file

@ -0,0 +1,15 @@
export async function getMetadata(serviceUrl: string) {
const response = await fetch(serviceUrl, {
method: "GET",
mode: "cors",
headers: {
"Content-Type": "application/json",
},
});
if (response.ok) {
return response.json();
} else {
throw new Error("HTTP error status: " + response.status);
}
}

28
app/three/utils/init.ts Normal file
View file

@ -0,0 +1,28 @@
import { Group, Vector3 } from "three";
import { buildMeshes } from "./build-meshes";
import { Extent, buildScene } from "./build-scene";
import { getMetadata } from "./get-metadata";
import { MODEL_ID, SERVICE_URL } from "../config";
export async function init(container: HTMLElement) {
const modelData = await getMetadata(SERVICE_URL + MODEL_ID);
const mappedFeatures = modelData.mappedfeatures;
const modelarea = modelData.modelarea;
const extent: Extent = {
xmin: modelarea.x.min,
xmax: modelarea.x.max,
ymin: modelarea.y.min,
ymax: modelarea.y.max,
zmin: modelarea.z.min,
zmax: modelarea.z.max,
};
const { renderer, scene, camera } = await buildScene(container, extent);
const meshes = await buildMeshes(mappedFeatures);
// const mappedFeaturesGroup = new Group();
// mappedFeaturesGroup.add(...meshes);
// scene.add(mappedFeaturesGroup);
scene.add(meshes[0]);
}

128
app/three/utils/parsers.ts Normal file
View file

@ -0,0 +1,128 @@
const DIMENSIONS = 3;
const ONEBYTE = 1;
const FOURBYTE = 4;
const METABYTES = 13;
class BitStream {
private a: Uint8Array;
private position: number;
private bitsPending: number;
constructor(uint8Array: Uint8Array) {
this.a = uint8Array;
this.position = 0;
this.bitsPending = 0;
}
writeBits(bits: number, value: number) {
if (bits === 0) return;
value &= 0xffffffff >>> (32 - bits);
while (bits > 0) {
if (this.bitsPending === 0) {
this.a[this.position++] = 0;
this.bitsPending = 8;
}
const bitsToWrite = Math.min(this.bitsPending, bits);
const shift = this.bitsPending - bitsToWrite;
this.a[this.position - 1] |= (value >> (bits - bitsToWrite)) << shift;
bits -= bitsToWrite;
value &= (1 << bits) - 1;
this.bitsPending -= bitsToWrite;
}
}
readBits(bits: number, bitBuffer = 0) {
if (bits === 0) return bitBuffer;
while (bits > 0) {
if (this.bitsPending === 0) {
this.bitsPending = 8;
}
const byte = this.a[this.position - (this.bitsPending === 8 ? 0 : 1)];
const bitsToRead = Math.min(this.bitsPending, bits);
const shift = this.bitsPending - bitsToRead;
bitBuffer =
(bitBuffer << bitsToRead) | ((byte >> shift) & ((1 << bitsToRead) - 1));
bits -= bitsToRead;
this.bitsPending -= bitsToRead;
if (this.bitsPending === 0) this.position++;
}
return bitBuffer;
}
seekTo(bitPos: number) {
this.position = Math.floor(bitPos / 8);
this.bitsPending = bitPos % 8 ? 8 - (bitPos % 8) : 0;
if (this.bitsPending > 0) this.position++;
}
}
export function unpackVertices(arrayBuffer: ArrayBuffer) {
const dataView = new DataView(arrayBuffer);
let ptr = ONEBYTE + 2 * FOURBYTE;
// Read the number of points
const pointsCount = dataView.getUint32(ptr, true);
ptr += FOURBYTE;
// Initialize position array
const posArray = new Float32Array(pointsCount * DIMENSIONS);
for (let dim = 0; dim < DIMENSIONS; dim++) {
ptr += ONEBYTE; // Skip unused byte
const bytesCount = dataView.getInt32(ptr, true) - 8;
ptr += FOURBYTE;
const significantBitsCount = dataView.getUint32(ptr, true);
ptr += FOURBYTE;
const commonBits = readCommonBits(dataView, ptr);
ptr += FOURBYTE;
const significantBits = readSignificantBits(dataView, ptr, bytesCount);
ptr += bytesCount;
// Read vertex data
for (let i = 0, j = dim; i < pointsCount; i++, j += DIMENSIONS) {
let value = significantBits.readBits(significantBitsCount) | commonBits;
if (dim === 2) value /= 100; // Adjust Z values
posArray[j] = value;
}
}
return posArray;
}
export function unpackEdges(arrayBuffer: ArrayBuffer) {
const dv = new DataView(arrayBuffer, METABYTES);
const indices = new Uint32Array((arrayBuffer.byteLength - METABYTES) / 4);
for (let i = 0; i < indices.length; i++) {
indices[i] = dv.getUint32(i * 4, true);
}
return indices;
}
function readSignificantBits(
dataView: DataView,
ptr: number,
bytesCount: number
) {
const temp = new Int32Array(bytesCount / 4);
for (let i = 0; i < temp.length; i++, ptr += 4) {
temp[i] = dataView.getInt32(ptr);
}
return new BitStream(new Uint8Array(temp.buffer));
}
function readCommonBits(dataView: DataView, ptr: number) {
const temp = new Int32Array(1);
temp[0] = dataView.getInt32(ptr, false);
const combits = new BitStream(new Uint8Array(temp.buffer));
return combits.readBits(32);
}

8
app/three/utils/request.ts Normal file
View file

@ -0,0 +1,8 @@
export async function request(url: string) {
const response = await fetch(url);
if (response.ok) {
return response.arrayBuffer();
} else {
throw new Error("HTTP error status: " + response.status);
}
}

16
eslint.config.mjs Normal file
View file

@ -0,0 +1,16 @@
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
});
const eslintConfig = [
...compat.extends("next/core-web-vitals", "next/typescript"),
];
export default eslintConfig;

7
index.d.ts vendored Normal file
View file

@ -0,0 +1,7 @@
export {};
declare global {
interface Window {
_paq: any;
}
}

7
next.config.ts Normal file
View file

@ -0,0 +1,7 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;

5606
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

30
package.json Normal file
View file

@ -0,0 +1,30 @@
{
"name": "3d-viewer",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "15.1.7",
"proj4": "^2.15.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"three": "^0.173.0"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@types/three": "^0.173.0",
"eslint": "^9",
"eslint-config-next": "15.1.7",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}

8
postcss.config.mjs Normal file
View file

@ -0,0 +1,8 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};
export default config;

1
public/file.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 391 B

1
public/globe.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

1
public/next.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
public/vercel.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 128 B

1
public/window.svg Normal file
View file

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 385 B

18
tailwind.config.ts Normal file
View file

@ -0,0 +1,18 @@
import type { Config } from "tailwindcss";
export default {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [],
} satisfies Config;

27
tsconfig.json Normal file
View file

@ -0,0 +1,27 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}