zhangyuheng/ObjToSchematic
1
0
Fork 0
forked from mirror/ObjToSchematic
Code Pull Requests 1 Activity

Added basic .obj loading UI

Browse Source
This commit is contained in:
Lucas Dower 2021-07-04 16:02:20 +01:00
parent 8749cf3d42
commit 71f661d04a
6 changed files with 10298 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -10,7 +10,7 @@ A tool to convert .obj files into Minecraft Schematics
* ✔️ **.json model loading**
* ✔️ **Model voxelisation**
* ✔️ **Optimised voxelisation & rendering overhaul**
* ⌛ *Basic .obj file loader UI*
* ✔️ *Basic .obj file loader UI*
0.2
* Greedy voxel meshing

15
index.html
View File

@ -4,13 +4,24 @@
<meta charset="utf8">
<title>ObjToSchematic</title>
<link rel="stylesheet" href="./styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav id="nav" class="navbar navbar-dark bg-dark">
<div class="input-group w-25 mx-auto">
<input type="file" class="form-control" id="objFile" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
<button id="objBtn" class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Load</button>
</div>
</nav>
<canvas id="c"></canvas>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script type="module" src="./src/client.js"></script>
</html>

7
src/bootstrap/bootstrap.bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

10224
src/bootstrap/bootstrap.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

40
src/client.js
View File

@ -4,24 +4,54 @@ const { Triangle } = require('./src/triangle.js');
const { Mesh } = require('./src/mesh.js');
const { VoxelManager } = require('./src/voxel_manager.js');
const voxelSize = 0.025;
const renderer = new Renderer(voxelSize);
const voxelSize = 0.5;
let renderer = new Renderer(voxelSize);
const voxelManager = new VoxelManager(voxelSize);
const triangle = new Triangle(new Vector3(0, 0, 0), new Vector3(4, 3, 1), new Vector3(2, -3, -2));
const triangle2 = new Triangle(new Vector3(5, 2, -1), new Vector3(-2, 3, -1), new Vector3(0, 3, 2));
const nav = document.querySelector("#nav");
let canvas = document.querySelector("#c");
function resizeCanvas() {
canvas.height = window.innerHeight - 62;
canvas.width = window.innerWidth;
}
resizeCanvas();
console.log(nav.getBoundingClientRect());
/*
const suzanneLeft = new Mesh('./resources/suzanne_left.obj');
voxelManager.voxeliseMesh(suzanneLeft);
renderer.registerVoxels(voxelManager.voxels);
const suzanneRight = new Mesh('./resources/suzanne_right.obj');
renderer.registerMesh(suzanneRight);
*/
renderer.registerVoxel(new Vector3(0, 0, 0), true);
renderer.compileRegister();
document.querySelector("#objBtn").addEventListener('click', () => {
const files = document.querySelector("#objFile").files;
//console.log(files[0].path);
if (files.length != 1) {
return;
}
const mesh = new Mesh(files[0].path);
renderer.clear();
voxelManager.voxeliseMesh(mesh);
renderer.registerVoxels(voxelManager.voxels);
//renderer.registerMesh(mesh);
renderer.compileRegister();
console.log("done");
});
function render(time) {
resizeCanvas();
renderer.begin();
renderer.end();

20
styles.css
View File

@ -2,10 +2,12 @@ body {
margin: 0;
font-family: monospace;
}
canvas {
display: block;
width: 100vw;
height: 100vh;
width: 100;
height: 100;
}
#b {
position: absolute;
@ -13,4 +15,18 @@ canvas {
width: 100%;
text-align: center;
z-index: 2;
}
div.hidden {
visibility: hidden;
}
.rounded-pill-left {
border-top-left-radius: 50rem !important;
border-bottom-left-radius: 50rem !important;
}
.rounded-pill-right {
border-top-right-radius: 50rem !important;
border-bottom-right-radius: 50rem !important;
}