added Thinker model to website. Not sure how to resize or position.

index.html

@@ -108,6 +108,8 @@
     <a href="https://www.freepik.com/free-photo/rough-checked-texture-collage_1037604.htm#fromView=search&page=1&position=1&uuid=ff4bc441-a0b5-4005-82df-caa3f1df883c">Marbel texture image by kues1 on Freepik</a>
     <br>
     "The Thinker" 3d model by <a href="https://www.thingiverse.com/thing:2164071/files">LxO</a>
+    <br>
+    "Galaxy background from " <a href="https://www.rawpixel.com/image/5924106/photo-image-public-domain-stars-galaxy">rawpixel.com</a>
   </p>
 </div>
 

main.js

@@ -38,7 +38,34 @@ renderer.render(scene, camera);
 
 
 
-//stl loader code to import stl 3d model
+//stl code to import stl 3d model
+const thinkerMaterial = new THREE.MeshPhysicalMaterial({
+    color: 'FFFFFF',
+    metalness: 0.50,
+    roughness: 0.1,
+    opacity: 1.0,
+    transparent: false,
+    transmission: 0.99,
+    clearcoat: 1.0,
+    clearcoatRoughness: 0.25,
+    
+})
+
+const thinkerLoader = new STLLoader();
+
+thinkerLoader.load(
+    'assets/models/thinker.stl',
+    function (geometry) {
+        const thinkerMesh = new THREE.Mesh(geometry, thinkerMaterial)
+        scene.add(thinkerMesh)
+    },
+    (xhr) => {
+        console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
+    },
+    (error) => {
+        console.log(error)
+    }
+)
 
 
 const ambientLight = new THREE.AmbientLight(0xffffff);