From 3ea25b63f94a6e5e99619ff7a97a98deacf08f4c Mon Sep 17 00:00:00 2001 From: Rodolphe Houdas Date: Mon, 15 Nov 2021 20:20:32 +0000 Subject: [PATCH] :lipstick: Make the page more static --- tools/css/custom.css | 21 +++++++++++++++++++++ tools/js/utils.js | 29 +++++++++++++++++------------ tools/multi-uploader.html | 23 +++++++++++++++++++---- 3 files changed, 57 insertions(+), 16 deletions(-) diff --git a/tools/css/custom.css b/tools/css/custom.css index 621d84b..ced91cd 100644 --- a/tools/css/custom.css +++ b/tools/css/custom.css @@ -30,4 +30,25 @@ #three-container canvas { border-radius: .5rem; +} + +.bg-black-o-30 { + background-color: rgba(0, 0, 0, 0.3); +} + +.dn { + display: none !important; +} + +.rotate { + animation: rotation 2s infinite linear; +} + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } } \ No newline at end of file diff --git a/tools/js/utils.js b/tools/js/utils.js index fc136e0..14eb153 100644 --- a/tools/js/utils.js +++ b/tools/js/utils.js @@ -15,7 +15,7 @@ class STLViewer { 1, 1000 ); - this.camera.position.set(10, 10, 10); + this.camera.position.set(100, 100, 100); // Renderer this.renderer = new THREE.WebGLRenderer({ antialias: true }); @@ -27,19 +27,24 @@ class STLViewer { // World this.scene = new THREE.Scene(); - this.scene.background = new THREE.Color( 0xdddddd ); - //scene.fog = new THREE.Fog(0xdddddd, 10, 100); + this.scene.background = new THREE.Color(0xefefef); - // Ground - const plane = new THREE.Mesh( - new THREE.PlaneGeometry( 1000, 1000 ), - new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } ) - ); - plane.rotation.x = - Math.PI / 2; - plane.position.y = - 0.5; - this.scene.add( plane ); + const axes = new THREE.AxesHelper(100); + this.scene.add(axes); - plane.receiveShadow = true; + const gridXZ = new THREE.GridHelper(100, 10, new THREE.Color(0x006600)); + gridXZ.position.set(0, 0, 0); + this.scene.add(gridXZ); + + const gridXY = new THREE.GridHelper(100, 10, new THREE.Color(0x000066)); + gridXY.position.set(0, 0, 0); + gridXY.rotation.x = Math.PI/2; + this.scene.add(gridXY); + + const gridYZ = new THREE.GridHelper(100, 10, new THREE.Color(0x660000)); + gridYZ.position.set(0, 0, 0); + gridYZ.rotation.z = Math.PI/2; + this.scene.add(gridYZ); // Lights this.scene.add(new THREE.HemisphereLight(0x443333, 0x111122)); diff --git a/tools/multi-uploader.html b/tools/multi-uploader.html index f6f74ad..67398ee 100644 --- a/tools/multi-uploader.html +++ b/tools/multi-uploader.html @@ -2,17 +2,19 @@ Generate a model with OpenSCAD Remote + + - -
+ +

OpenSCAD Remote

-
+

Main SCAD file

@@ -38,6 +40,16 @@
+
+
+ Please add a .scad file and press "Send" to view your model +
+
+
+
+ Loading +
+
Download @@ -46,7 +58,7 @@
-