Spaces:

iCoderX
/

webgame-engine

Running

App Files Files Community

iCoderX commited on Jul 24, 2025

Commit

cd5d1f8

verified ·

1 Parent(s): 4d725fd

Make it a game engine, with basic shapes to add, lights, and JS scripts with tutorial in comments. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +208 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Webgame Engine
-emoji: 📉
-colorFrom: purple
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: webgame-engine
+emoji: 🐳
+colorFrom: pink
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,208 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Cube with Sun Flare</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .hidden { display: none; }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/objects/Lensflare.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.min.js"></script>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Inter', sans-serif;
+        }
+        canvas {
+            display: block;
+        }
+        #info {
+            position: absolute;
+            bottom: 20px;
+            width: 100%;
+            text-align: center;
+            color: white;
+            background-color: rgba(0,0,0,0.5);
+            padding: 10px;
+            border-radius: 8px;
+            max-width: 500px;
+            margin: 0 auto;
+            left: 0;
+            right: 0;
+        }
+        #loading {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            font-size: 24px;
+            z-index: 1000;
+        }
+    </style>
+</head>
+<body class="bg-gray-900">
+    <div id="loading">Loading 3D scene...</div>
+    <div id="info" class="hidden">
+        <p>Click and drag to rotate view</p>
+        <p>Scroll to zoom in/out</p>
+    </div>
+    <script>
+        // Wait for everything to load
+        window.addEventListener('load', init);
+        function init() {
+            // Hide loading screen
+            document.getElementById('loading').style.display = 'none';
+            document.getElementById('info').classList.remove('hidden');
+            // Scene setup
+            const scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x87CEEB); // Sky blue skybox
+            scene.fog = new THREE.FogExp2(0x87CEEB, 0.005); // Less dense fog
+            // Camera setup
+            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(5, 5, 5);
+            // Renderer setup
+            const renderer = new THREE.WebGLRenderer({
+                antialias: true,
+                powerPreference: "high-performance"
+            });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            renderer.outputEncoding = THREE.sRGBEncoding;
+            renderer.toneMapping = THREE.ACESFilmicToneMapping;
+            renderer.toneMappingExposure = 1.0;
+            renderer.physicallyCorrectLights = true;
+            document.body.appendChild(renderer.domElement);
+            // Controls
+            const controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
+            // Available sample models from KhronosGroup/glTF-Sample-Models:
+            // - Duck: https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Duck/glTF/Duck.gltf
+            // - 2CylinderEngine: https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/2CylinderEngine/glTF/2CylinderEngine.gltf
+            // - Avocado: https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf
+            // - BarramundiFish: https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BarramundiFish/glTF/BarramundiFish.gltf
+            // - BrainStem: https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BrainStem/glTF/BrainStem.gltf
+            // - Buggy: https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Buggy/glTF/Buggy.gltf
+            // - CesiumMan: https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/CesiumMan/glTF/CesiumMan.gltf
+            // - Corset: https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Corset/glTF/Corset.gltf
+            // - FlightHelmet: https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/FlightHelmet/glTF/FlightHelmet.gltf
+            // - Lantern: https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Lantern/glTF/Lantern.gltf
+            // - MosquitoInAmber: https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/MosquitoInAmber/glTF/MosquitoInAmber.gltf
+            // - WaterBottle: https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/WaterBottle/glTF/WaterBottle.gltf
+            const loader = new THREE.GLTFLoader();
+            loader.load(
+                'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf',
+                (gltf) => {
+                    const model = gltf.scene;
+                    model.scale.set(0.5, 0.5, 0.5);
+                    model.position.set(0, 0, 0);
+                    model.rotation.y = Math.PI;
+                    model.traverse((child) => {
+                        if (child.isMesh) {
+                            child.castShadow = true;
+                            child.receiveShadow = true;
+                        }
+                    });
+                    scene.add(model);
+                    // Animation loop
+                    function animate() {
+                        requestAnimationFrame(animate);
+                        // Rotate model slightly
+                        model.rotation.y += 0.005;
+                        // Update controls
+                        controls.update();
+                        // Render
+                        renderer.render(scene, camera);
+                    }
+                    animate();
+                },
+                undefined,
+                (error) => {
+                    console.error('Error loading model:', error);
+                    // Fallback to simple geometry if model fails
+                    const geometry = new THREE.ConeGeometry(1, 2, 4);
+                    const material = new THREE.MeshStandardMaterial({ color: 0x00ffff });
+                    const cone = new THREE.Mesh(geometry, material);
+                    scene.add(cone);
+                }
+            );
+            // Ambient light matching skybox
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
+            scene.add(ambientLight);
+            // Sun light (directional)
+            const sunLight = new THREE.DirectionalLight(0xffffcc, 1.5);
+            sunLight.position.set(10, 15, 10);
+            sunLight.castShadow = true;
+            sunLight.shadow.mapSize.width = 4096;
+            sunLight.shadow.mapSize.height = 4096;
+            sunLight.shadow.camera.near = 0.5;
+            sunLight.shadow.camera.far = 50;
+            sunLight.shadow.camera.left = -15;
+            sunLight.shadow.camera.right = 15;
+            sunLight.shadow.camera.top = 15;
+            sunLight.shadow.camera.bottom = -15;
+            sunLight.shadow.bias = -0.0001;
+            scene.add(sunLight);
+            // Fill light
+            const fillLight = new THREE.DirectionalLight(0xccffff, 0.5);
+            fillLight.position.set(-10, 10, -10);
+            scene.add(fillLight);
+            // Back light
+            const backLight = new THREE.DirectionalLight(0xffffff, 0.3);
+            backLight.position.set(0, 5, -15);
+            scene.add(backLight);
+            // Lens flare effect
+            const textureLoader = new THREE.TextureLoader();
+            const textureFlare0 = textureLoader.load('https://threejs.org/examples/textures/lensflare/lensflare0.png');
+            const textureFlare3 = textureLoader.load('https://threejs.org/examples/textures/lensflare/lensflare3.png');
+            const lensflare = new THREE.Lensflare();
+            lensflare.addElement(new THREE.LensflareElement(textureFlare0, 700, 0, sunLight.color));
+            lensflare.addElement(new THREE.LensflareElement(textureFlare3, 60, 0.6));
+            lensflare.addElement(new THREE.LensflareElement(textureFlare3, 70, 0.7));
+            lensflare.addElement(new THREE.LensflareElement(textureFlare3, 120, 0.9));
+            lensflare.addElement(new THREE.LensflareElement(textureFlare3, 70, 1));
+            sunLight.add(lensflare);
+            // Window resize handler
+            window.addEventListener('resize', () => {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(window.innerWidth, window.innerHeight);
+            });
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=iCoderX/webgame-engine" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>