Add Three.js implementation and 3D model

fscek · Mar 14, 2024 · c8cd139 · c8cd139
1 parent 60af274
commit c8cd139
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/assets/js/three-setup.js b/assets/js/three-setup.js
@@ -0,0 +1,47 @@
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+
+// Setup scene, camera, and renderer
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth * 0.75, window.innerHeight * 0.75); // Adjust size as needed
+document.getElementById('threejs-container').appendChild(renderer.domElement); // Make sure you have a div with this id
+
+camera.position.set(0, 1, 2); // Adjust camera position as needed
+
+// Lighting
+const ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
+scene.add(ambientLight);
+const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+directionalLight.position.set(0, 1, 0); // Adjust light position as needed
+scene.add(directionalLight);
+
+// Load your 3D model
+const loader = new GLTFLoader();
+loader.load(
+    'assets/models/szch-3d-a_w.glb',
+    function (gltf) {
+        scene.add(gltf.scene);
+        animate();
+    },
+    undefined,
+    function (error) {
+        console.error(error);
+    }
+);
+
+// Animation loop
+function animate() {
+    requestAnimationFrame(animate);
+    renderer.render(scene, camera);
+}
+
+// Responsive adjustments
+window.addEventListener('resize', onWindowResize, false);
+
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth * 0.75, window.innerHeight * 0.75);
+}
diff --git a/assets/models/szch-3d-a_w.glb b/assets/models/szch-3d-a_w.glb
diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Fragment+Mono:ital@0;1&family=Bricolage+Grotesque:opsz,[email protected],200..800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="assets/css/style.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 </head>
 <body>
     <div id="pageOverlay" class="overlay" onclick="toggleMenu()"></div>
@@ -82,12 +83,16 @@ <h2 class="display-font">talk2me</h2>
             <p class="fragment-mono-regular"><a href="mailto:[email protected]">[email protected]</a></p>
             <!-- placeholder for future contact form or captcha implementation -->
         </section>
+        <section>
+            <div id="threejs-container"></div>
+        </section>
     </main>
     <footer>
         <p class="fragment-mono-regular">&copy; 2024 SZCH. All rights reserved.</p>
     </footer>
     <script src="assets/js/menu-toggle.js"></script>
     <script src="assets/js/dates-script.js"></script>
     <script src="assets/js/toggle-bio.js"></script>
+    <script type="module" src="assets/js/three-setup.js"></script>
 </body>
 </html>