test

hol23003 · Apr 22, 2024 · 7359924 · 7359924
1 parent 3d1a6f6
commit 7359924
Showing 1 changed file with 83 additions and 21 deletions.
diff --git a/MFA_Demo/index.html b/MFA_Demo/index.html
@@ -1,23 +1,85 @@
 <!DOCTYPE html>
-<html lang="en" >
-    <head>
-        <meta charset="UTF-8">
-        <title>home</title>
-        <link rel="stylesheet" href="./style.css">
-    </head>
-    <body>
-        <div id="blocker">
-            <div id="instructions">
-				<p>
-					Click to play
-				</p>
-				<p>
-					Move: WASD<br/>
-					Jump: SPACE<br/>
-					Look: MOUSE
-				</p>
-			</div>
-        </div>
-        <script type='module' src='script.js'></script>
-    </body>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>My Three.js Scene</title>
+    <style>
+        body { margin: 0; }
+        canvas { display: block; }
+    </style>
+</head>
+<body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.min.js"></script>
+    <script>
+        // Scene, camera, and renderer declarations
+        let scene, camera, renderer;
+
+        // OrbitControls for camera movement
+        let controls;
+
+        // Initialize the scene
+        init();
+
+        function init() {
+            // Scene
+            scene = new THREE.Scene();
+
+            // Camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 10, 20);
+
+            // Renderer
+            renderer = new THREE.WebGLRenderer();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            document.body.appendChild(renderer.domElement);
+
+            // OrbitControls
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+
+            // Ambient light
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+            scene.add(ambientLight);
+
+            // Directional light
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+            directionalLight.position.set(0, 10, 0);
+            scene.add(directionalLight);
+
+            // Load OBJ model
+            const loader = new THREE.OBJLoader();
+            loader.load(
+                'path/to/your/model.obj',
+                (obj) => {
+                    // Position the model in the center of the scene
+                    obj.position.set(0, 0, 0);
+                    scene.add(obj);
+                },
+                (xhr) => {
+                    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
+                },
+                (error) => {
+                    console.error('An error happened', error);
+                }
+            );
+
+            // Event listeners
+            window.addEventListener('resize', onWindowResize);
+        }
+
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            renderer.render(scene, camera);
+        }
+
+        animate();
+    </script>
+</body>
 </html>