rodolphe/openscad-remote
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

⚡ Make a proper viewer

Browse source
This commit is contained in:
Rodolphe Houdas 2021-09-03 23:35:20 +01:00
parent 34f3fb9344
commit b0ce61087e
2 changed files with 30 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
tools/js/utils.js
View file

@ -5,7 +5,9 @@ import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@v0.120.0/examp
class STLViewer {
constructor(container, blob) {
constructor(container) {
this.mesh = null;
this.loader = new STLLoader();
this.container = container;
this.camera = new THREE.PerspectiveCamera(
60,
@ -39,23 +41,6 @@ class STLViewer {
plane.receiveShadow = true;
const loader = new STLLoader();
blob.arrayBuffer().then(buffer => {
const geometry = loader.parse(buffer);
const material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
const mesh = new THREE.Mesh( geometry, material );
mesh.position.set(0, 0, 0);
mesh.rotation.set(0, 0, 0);
mesh.scale.set(1, 1, 1 );
mesh.castShadow = true;
mesh.receiveShadow = true;
this.scene.add(mesh);
});
// Lights
this.scene.add(new THREE.HemisphereLight(0x443333, 0x111122));
@ -70,6 +55,31 @@ class STLViewer {
this.animate();
}
loadSTLBlob(blob) {
if (this.mesh != null) {
this.mesh.geometry.dispose();
this.mesh.material.dispose();
this.scene.remove(this.mesh);
this.mesh = null;
}
blob.arrayBuffer().then(buffer => {
const geometry = this.loader.parse(buffer);
const material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
this.mesh = new THREE.Mesh( geometry, material );
this.mesh.position.set(0, 0, 0);
this.mesh.rotation.set(0, 0, 0);
this.mesh.scale.set(1, 1, 1 );
this.mesh.castShadow = true;
this.mesh.receiveShadow = true;
this.scene.add(this.mesh);
});
}
setControls() {
this.controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
this.controls.dampingFactor = 0.05;

7
tools/multi-uploader.html
View file

@ -71,9 +71,7 @@
import { Configuration } from "./js/config.js";
let inc = 0;
let stlviewer;
console.log( document.getElementsByClassName("fileinput"));
const stlviewer = new STLViewer(document.getElementById("three-container"));
[...document.getElementsByClassName("fileinput")].forEach(element => {
const input = element.getElementsByTagName("input")[0];
@ -126,8 +124,7 @@
dl_link.classList.remove("disabled");
const threecontainer = document.getElementById("three-container");
stlviewer = new STLViewer(threecontainer, blob);
stlviewer.loadSTLBlob(blob);
}
</script>
</body>