Opensource STL/OBJ

Devlog 2: Updating Firebase logins for the new domain, continuing to work on the new UI.

Devlog 1: Initial build, UI update, and debugging here we go!

I created the initial files as well as set up the UI for the modeler. Right now we have the core features- 3D Modeler, Scanner, and Generator. You can also upload your own .stl files into the application for it to render live. For those interested, here is a section of the code relating to above:

          <div className="space-y-2">
            <span className="text-[10px] text-slate-500 font-mono tracking-widest block uppercase">
              Source File
            </span>
            <label className="border border-dashed border-slate-800 hover:border-slate-600 bg-[#080d19] rounded-sm p-5 flex flex-col items-center justify-center text-center cursor-pointer transition relative overflow-hidden group">
              <input
                type="file"
                accept=".stl"
                onChange={handleFileUpload}
                className="hidden"
              />
              <Upload className="w-5 h-5 text-slate-500 group-hover:text-sky-400 transition mb-2" />
              <span className="text-xs font-medium text-slate-300">Upload .stl File</span>
              <p className="text-[10px] text-slate-500 font-sans mt-1">
                Drag and drop binary or ASCII files
              </p>
            </label>
          </div>

          {/* Render Mode Selectors */}
          <div className="space-y-2.5 bg-[#080d19] p-3 rounded-sm border border-slate-900">
            <span className="text-[10px] text-slate-500 font-mono tracking-widest block uppercase">
              Render Mode
            </span>
            <div className="grid grid-cols-2 gap-1.5">
              {(["dental", "metallic", "wireframe", "points"] as const).map((mode) => (
                <button
                  key={mode}
                  onClick={() => setRenderMode(mode)}
                  className={`py-1.5 rounded-sm text-[11px] font-sans capitalize transition cursor-pointer border ${
                    renderMode === mode
                      ? "bg-slate-900 text-sky-400 border-slate-800"
                      : "bg-transparent text-slate-400 border-transparent hover:bg-slate-900/40 hover:text-slate-200"
                  }`}
                >
                  {mode}
                </button>
              ))}
            </div>
            <button
              onClick={handleRecenter}
              className="w-full mt-2 py-1.5 bg-slate-900 hover:bg-slate-800 border border-slate-800 rounded-sm text-[10px] font-sans text-slate-300 hover:text-white transition cursor-pointer flex items-center justify-center gap-1.5"
            >
              <RotateCw className="w-3 h-3" />
              Recenter Viewport
            </button>
          </div>