Spaces:

Daveroby13
/

squirrelvision-3d-playground-explorer

Running

App Files Files Community

Daveroby13 commited on Nov 3, 2025

Commit

80c0783

verified ·

1 Parent(s): 2371402

Can you finish the project to make the whole thing give me a let me be able to walk around and feel what it's like

Browse files

Files changed (6) hide show

README.md +8 -5
index.html +155 -19
playground.html +90 -0
playground.js +297 -0
script.js +228 -0
style.css +77 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Squirrelvision 3d Playground Explorer
-emoji: 💻
-colorFrom: green
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: SquirrelVision 3D Playground Explorer 🐿️
+colorFrom: red
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,155 @@
-<!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>SquirrelView 3D Sandbox Explorer</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen text-white">
+    <!-- Navigation Component -->
+    <script src="components/navigation.js"></script>
+    <custom-navigation></custom-navigation>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="text-center mb-16">
+            <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">
+                SquirrelView 3D Sandbox
+            </h1>
+            <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
+                A powerful 3D model testing environment with full controller support.
+                Walk around, interact with assets, and test your models in real-time.
+            </p>
+            <!-- Quick Actions -->
+            <div class="flex flex-wrap justify-center gap-4 mb-12">
+                <button class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
+                    <i data-feather="download" class="inline mr-2"></i>Download Python Script
+                </button>
+                <button class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
+                    <i data-feather="book-open" class="inline mr-2"></i>View Documentation
+                </button>
+            </div>
+        </section>
+        <!-- Features Grid -->
+        <section class="mb-16">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Powerful Features</h2>
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition-all">
+                    <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="box" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Multi-Format Support</h3>
+                    <p class="text-gray-300">Import .glb, .obj, and .stl files with seamless integration into your 3D world.</p>
+                </div>
+                <!-- Feature 2 -->
+                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition-all">
+                    <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="gamepad" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">PS4 Controller Support</h3>
+                    <p class="text-gray-300">Full analog stick support and button mapping for intuitive navigation.</p>
+                </div>
+                <!-- Feature 3 -->
+                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition-all">
+                    <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="eye" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Real-time Inspection</h3>
+                    <p class="text-gray-300">Toggle between first-person and free-fly modes for detailed model analysis.</p>
+                </div>
+                <!-- Feature 4 -->
+                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition-all">
+                    <div class="w-12 h-12 bg-yellow-500 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="save" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Save/Load Worlds</h3>
+                    <p class="text-gray-300">Preserve your sandbox configurations and asset placements between sessions.</p>
+                </div>
+                <!-- Feature 5 -->
+                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition-all">
+                    <div class="w-12 h-12 bg-red-500 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="cpu" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Interactive NPCs</h3>
+                    <p class="text-gray-300">Squirrel NPCs provide UI triggers and helpful guidance throughout your testing.</p>
+                </div>
+                <!-- Feature 6 -->
+                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition-all">
+                    <div class="w-12 h-12 bg-indigo-500 rounded-lg flex items-center justify-center mb-4">
+                        <i data-feather="sliders" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Asset Inspector</h3>
+                    <p class="text-gray-300">Real-time property editing including rotation, scale, and material toggles.</p>
+                </div>
+            </div>
+        </section>
+        <!-- Code Preview -->
+        <section class="bg-gray-800 rounded-xl p-8 mb-16">
+            <h2 class="text-3xl font-bold mb-6">Python Script Preview</h2>
+            <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
+                <pre><code class="language-python">import ursina as u
+from ursina.prefabs.first_person_controller import FirstPersonController
+# Initialize Ursina application
+app = u.Ursina()
+# Create basic world geometry
+ground = u.Entity(model='plane', scale=(100,1,100), color=u.color.green)
+sky = u.Sky()
+# Player controller with PS4 support
+player = FirstPersonController()
+player.speed = 8
+# Squirrel NPC for UI interactions
+squirrel = u.Entity(
+    model='cube',
+    color=u.color.orange,
+    position=(5, 0.5, 5),
+    scale=(1, 1, 1)
+)
+def update():
+    # PS4 controller input handling
+    if u.held_keys['gamepad left stick x']:
+        player.x += u.time.dt * u.held_keys['gamepad left stick x'] * player.speed
+    # Add more controller mappings...
+app.run()</code></pre>
+            </div>
+        </section>
+        <!-- Download Section -->
+        <section class="text-center bg-gray-800 rounded-xl p-8">
+            <h2 class="text-3xl font-bold mb-4">Ready to Explore?</h2>
+            <p class="text-gray-300 mb-6">Download the complete Python script and start testing your 3D models today!</p>
+            <button class="bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 px-8 py-4 rounded-lg font-bold text-lg transition-all transform hover:scale-105">
+                <i data-feather="download" class="inline mr-2"></i>Download Full Script
+            </button>
+        </section>
+    </main>
+    <!-- Footer Component -->
+    <script src="Can you finish the project to make the whole thing give me let me be able to walk around and feel what it's like to do this oPpcomponents/footer.js"></script>
+    <custom-footer></custom-footer>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

playground.html ADDED Viewed

	@@ -0,0 +1,90 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SquirrelVision 3D Playground</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/jsm/controls/PointerLockControls.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/jsm/loaders/GLTFLoader.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-gray-900 text-white overflow-hidden">
+    <!-- Navigation -->
+    <script src="components/navigation.js"></script>
+    <custom-navigation></custom-navigation>
+    <!-- Game Container -->
+    <div id="gameContainer" class="w-full h-screen relative">
+        <!-- Loading Screen -->
+        <div id="loadingScreen" class="absolute inset-0 bg-gray-900 flex flex-col items-center justify-center z-50">
+            <div class="text-4xl font-bold mb-4 bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">
+                SquirrelVision 3D Playground
+            </div>
+            <div class="text-xl text-gray-300 mb-8">Loading your adventure...</div>
+            <div class="w-64 h-2 bg-gray-700 rounded-full overflow-hidden">
+                <div id="progressBar" class="h-full bg-gradient-to-r from-green-500 to-blue-600 transition-all duration-300"></div>
+            </div>
+            <div class="mt-4 text-gray-400" id="loadingText">Initializing 3D engine...</div>
+        </div>
+        <!-- UI Overlay -->
+        <div id="uiOverlay" class="absolute inset-0 pointer-events-none z-40 hidden">
+            <!-- Crosshair -->
+            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4">
+                <div class="absolute top-1/2 left-0 w-2 h-0.5 bg-white opacity-60"></div>
+                <div class="absolute top-1/2 right-0 w-2 h-0.5 bg-white opacity-60"></div>
+                <div class="absolute left-1/2 top-0 h-2 w-0.5 bg-white opacity-60"></div>
+                <div class="absolute left-1/2 bottom-0 h-2 w-0.5 bg-white opacity-60"></div>
+            </div>
+            <!-- Instructions -->
+            <div class="absolute bottom-4 left-4 bg-black bg-opacity-50 p-4 rounded-lg pointer-events-auto">
+                <div class="text-sm space-y-2">
+                    <div class="flex items-center space-x-2">
+                        <span class="bg-gray-700 px-2 py-1 rounded text-xs">WASD</span>
+                        <span>Move around</span>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <span class="bg-gray-700 px-2 py-1 rounded text-xs">Mouse</span>
+                        <span>Look around</span>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <span class="bg-gray-700 px-2 py-1 rounded text-xs">Space</span>
+                        <span>Jump</span>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <span class="bg-gray-700 px-2 py-1 rounded text-xs">E</span>
+                        <span>Interact</span>
+                    </div>
+                </div>
+            </div>
+            <!-- Interaction Prompt -->
+            <div id="interactionPrompt" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-8 bg-black bg-opacity-70 px-4 py-2 rounded-lg text-center hidden">
+                <div class="text-sm">Press <span class="bg-gray-700 px-2 py-1 rounded text-xs">E</span> to interact</div>
+            </div>
+        </div>
+        <!-- Start Screen -->
+        <div id="startScreen" class="absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center z-30">
+            <div class="text-6xl font-bold mb-4 bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">
+                SquirrelVision
+            </div>
+            <div class="text-2xl text-gray-300 mb-8">3D Playground Explorer</div>
+            <button id="startButton" class="bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 px-8 py-4 rounded-lg font-bold text-xl transition-all transform hover:scale-105">
+                Enter Playground
+            </button>
+            <div class="mt-8 text-gray-400 text-center max-w-md">
+                Explore the 3D world, interact with objects, and experience the power of our sandbox environment.
+            </div>
+        </div>
+    </div>
+    <!-- Game Script -->
+    <script src="playground.js"></script>
+    <script src="components/navigation.js"></script>
+</body>
+</html>

playground.js ADDED Viewed

	@@ -0,0 +1,297 @@

+```javascript
+// SquirrelVision 3D Playground - Main Game Script
+class SquirrelVisionPlayground {
+    constructor() {
+        this.scene = null;
+        this.camera = null;
+        this.renderer = null;
+        this.controls = null;
+        this.objects = [];
+        this.isPlaying = false;
+        this.moveForward = false;
+        this.moveBackward = false;
+        this.moveLeft = false;
+        this.moveRight = false;
+        this.canJump = false;
+        this.prevTime = performance.now();
+        this.velocity = new THREE.Vector3();
+        this.direction = new THREE.Vector3();
+        this.interactiveObjects = [];
+        this.init();
+    }
+    async init() {
+        // Update loading progress
+        this.updateLoadingProgress(10, 'Creating 3D scene...');
+        // Create scene
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0x87CEEB); // Sky blue
+        // Create camera
+        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        this.camera.position.set(0, 1.6, 0);
+        // Create renderer
+        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.renderer.shadowMap.enabled = true;
+        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        // Add renderer to DOM
+        document.getElementById('gameContainer').appendChild(this.renderer.domElement);
+        this.updateLoadingProgress(30, 'Setting up lighting...');
+        await this.setupLighting();
+        this.updateLoadingProgress(50, 'Creating world geometry...');
+        await this.createWorld();
+        this.updateLoadingProgress(70, 'Adding interactive objects...');
+        await this.addInteractiveObjects();
+        this.updateLoadingProgress(90, 'Setting up controls...');
+        this.setupControls();
+        this.updateLoadingProgress(100, 'Ready!');
+        // Show start screen after a brief delay
+        setTimeout(() => {
+            document.getElementById('loadingScreen').style.display = 'none';
+            document.getElementById('startScreen').style.display = 'flex';
+        }, 500);
+        // Start animation loop
+        this.animate();
+        // Handle window resize
+        window.addEventListener('resize', () => this.onWindowResize());
+    }
+    updateLoadingProgress(percent, text) {
+        document.getElementById('progressBar').style.width = percent + '%';
+        document.getElementById('loadingText').textContent = text;
+    }
+    async setupLighting() {
+        // Ambient light
+        const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
+        this.scene.add(ambientLight);
+        // Directional light (sun)
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+        directionalLight.position.set(50, 50, 50);
+        directionalLight.castShadow = true;
+        directionalLight.shadow.mapSize.width = 2048;
+        directionalLight.shadow.mapSize.height = 2048;
+        directionalLight.shadow.camera.near = 0.5;
+        directionalLight.shadow.camera.far = 500;
+        directionalLight.shadow.camera.left = -100;
+        directionalLight.shadow.camera.right = 100;
+        directionalLight.shadow.camera.top = 100;
+        directionalLight.shadow.camera.bottom = -100;
+        this.scene.add(directionalLight);
+        // Hemisphere light for more natural outdoor lighting
+        const hemisphereLight = new THREE.HemisphereLight(0x87CEEB, 0x8B4513, 0.4);
+        this.scene.add(hemisphereLight);
+    }
+    async createWorld() {
+        // Create ground
+        const groundGeometry = new THREE.PlaneGeometry(100, 100);
+        const groundMaterial = new THREE.MeshLambertMaterial({
+            color: 0x7CFC00, // Lawn green
+            side: THREE.DoubleSide
+        });
+        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+        ground.rotation.x = -Math.PI / 2;
+        ground.receiveShadow = true;
+        this.scene.add(ground);
+        // Add some grass texture variation
+        const grassTexture = new THREE.MeshLambertMaterial({
+            color: 0x32CD32, // Lime green
+            side: THREE.DoubleSide
+        });
+        for (let i = 0; i < 200; i++) {
+            const grassBlade = new THREE.Mesh(
+                new THREE.PlaneGeometry(0.1, 0.5),
+                grassTexture
+            );
+            grassBlade.position.set(
+                Math.random() * 80 - 40,
+                0.25,
+                Math.random() * 80 - 40
+            );
+            grassBlade.rotation.x = -Math.PI / 2;
+            grassBlade.rotation.z = Math.random() * Math.PI;
+            this.scene.add(grassBlade);
+        }
+        // Create trees
+        for (let i = 0; i < 15; i++) {
+            this.createTree(
+                Math.random() * 70 - 35,
+                Math.random() * 70 - 35
+            );
+        }
+        // Create buildings
+        this.createBuilding(-15, 0, -15, 8, 12, 8, 0x888888);
+        this.createBuilding(15, 0, 15, 6, 8, 6, 0x666666);
+        this.createBuilding(-15, 0, 15, 5, 6, 5, 0x777777);
+        // Create a central fountain
+        this.createFountain(0, 0, 0);
+        // Create some rocks
+        for (let i = 0; i < 10; i++) {
+            this.createRock(
+                Math.random() * 60 - 30,
+                Math.random() * 60 - 30
+            );
+        }
+    }
+    createTree(x, z) {
+        // Tree trunk
+        const trunkGeometry = new THREE.CylinderGeometry(0.3, 0.4, 4);
+        const trunkMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
+        const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
+        trunk.position.set(x, 2, z);
+        trunk.castShadow = true;
+        this.scene.add(trunk);
+        // Tree leaves
+        const leavesGeometry = new THREE.SphereGeometry(2);
+        const leavesMaterial = new THREE.MeshLambertMaterial({ color: 0x228B22 });
+        const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial);
+        leaves.position.set(x, 5, z);
+        leaves.castShadow = true;
+        this.scene.add(leaves);
+    }
+    createBuilding(x, y, z, width, height, depth, color) {
+        const geometry = new THREE.BoxGeometry(width, height, depth);
+        const material = new THREE.MeshLambertMaterial({ color: color });
+        const building = new THREE.Mesh(geometry, material);
+        building.position.set(x, height / 2, z);
+        building.castShadow = true;
+        building.receiveShadow = true;
+        this.scene.add(building);
+        // Add windows
+        const windowMaterial = new THREE.MeshLambertMaterial({ color: 0x87CEEB });
+        for (let i = 0; i < 3; i++) {
+            for (let j = 0; j < 2; j++) {
+                const window = new THREE.Mesh(
+                    new THREE.PlaneGeometry(0.8, 0.8),
+                    windowMaterial
+                );
+                window.position.set(
+                    x + (j - 0.5) * (width - 1),
+                    y + 2 + i * 2.5,
+                    z + depth / 2 + 0.1
+                );
+                window.rotation.y = Math.PI;
+                this.scene.add(window);
+            }
+        }
+    }
+    createFountain(x, y, z) {
+        // Fountain base
+        const baseGeometry = new THREE.CylinderGeometry(3, 3, 0.5, 32);
+        const baseMaterial = new THREE.MeshLambertMaterial({ color: 0xCCCCCC });
+        const base = new THREE.Mesh(baseGeometry, baseMaterial);
+        base.position.set(x, 0.25, z);
+        base.receiveShadow = true;
+        this.scene.add(base);
+        // Fountain center
+        const centerGeometry = new THREE.CylinderGeometry(1, 1.2, 2, 32);
+        const centerMaterial = new THREE.MeshLambertMaterial({ color: 0xDDDDDD });
+        const center = new THREE.Mesh(centerGeometry, centerMaterial);
+        center.position.set(x, 1.5, z);
+        center.castShadow = true;
+        this.scene.add(center);
+        // Water (animated)
+        const waterGeometry = new THREE.CylinderGeometry(1.2, 1.2, 0.2, 32);
+        const waterMaterial = new THREE.MeshLambertMaterial({
+            color: 0x4F94CD,
+            transparent: true,
+            opacity: 0.7
+        });
+        const water = new THREE.Mesh(waterGeometry, waterMaterial);
+        water.position.set(x, 1.1, z);
+        water.userData = { type: 'fountain', animate: true };
+        this.scene.add(water);
+        this.interactiveObjects.push(water);
+    }
+    createRock(x, z) {
+        const geometry = new THREE.SphereGeometry(0.5 + Math.random() * 0.5, 6, 6);
+        const material = new THREE.MeshLambertMaterial({ color: 0x696969 });
+        const rock = new THREE.Mesh(geometry, material);
+        rock.position.set(x, 0.5, z);
+        rock.rotation.set(
+            Math.random() * Math.PI,
+            Math.random() * Math.PI,
+            Math.random() * Math.PI
+        );
+        rock.castShadow = true;
+        this.scene.add(rock);
+    }
+    async addInteractiveObjects() {
+        // Create interactive squirrel NPC
+        this.createSquirrel(10, 0, 0);
+        // Create treasure chest
+        this.createTreasureChest(-10, 0, 10);
+        // Create signpost
+        this.createSignpost(15, 0, -15);
+    }
+    createSquirrel(x, y, z) {
+        // Squirrel body
+        const bodyGeometry = new THREE.SphereGeometry(0.4, 16, 16);
+        const bodyMaterial = new THREE.MeshLambertMaterial({ color: 0xFF8C00 });
+        const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+        body.position.set(x, y + 0.4, z);
+        // Squirrel head
+        const headGeometry = new THREE.SphereGeometry(0.3, 16, 16);
+        const head = new THREE.Mesh(headGeometry, bodyMaterial);
+        head.position.set(x, y + 0.8, z + 0.3);
+        // Squirrel tail
+        const tailGeometry = new THREE.SphereGeometry(0.25, 16, 16);
+        const tail = new THREE.Mesh(tailGeometry, bodyMaterial);
+        tail.position.set(x, y + 0.4, z - 0.5);
+        tail.scale.set(1.5, 0.8, 2);
+        const squirrel = new THREE.Group();
+        squirrel.add(body);
+        squirrel.add(head);
+        squirrel.add(tail);
+        squirrel.userData = {
+            type: 'squirrel',
+            interactive: true,
+            message: "Hello! I'm your friendly squirrel guide. Explore the playground and find hidden treasures!"
+        };
+        squirrel.castShadow = true;
+        this.scene.add(squirrel);
+        this.interactiveObjects.push(squirrel);
+    }
+    createTreasureChest(x, y, z) {
+        const chestGeometry = new THREE.BoxGeometry(1.5, 0.8, 1);
+        const chestMaterial = new THREE.MeshLambertMaterial({ color: 0xDAA520 });

script.js ADDED Viewed

	@@ -0,0 +1,228 @@

+// Main JavaScript for SquirrelView 3D Sandbox Explorer
+// Initialize Feather Icons
+document.addEventListener('DOMContentLoaded', function() {
+    feather.replace();
+    // Add smooth scrolling to all links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+    // Add animation to feature cards on scroll
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('fade-in');
+            }
+        });
+    }, observerOptions);
+    document.querySelectorAll('.feature-card').forEach(card => {
+        observer.observe(card);
+    });
+    // Download button functionality
+    const downloadButton = document.querySelector('button:contains("Download Full Script")');
+    if (downloadButton) {
+        downloadButton.addEventListener('click', function() {
+            // Create and trigger download of the Python script
+            const pythonScript = `import ursina as u
+from ursina.prefabs.first_person_controller import FirstPersonController
+import os
+from ursina import scene
+class SquirrelViewSandbox:
+    def __init__(self):
+        # Initialize application
+        self.app = u.Ursina()
+        # Window settings
+        u.window.title = "SquirrelView 3D Sandbox Explorer"
+        u.window.borderless = False
+        u.window.fullscreen = False
+        # World setup
+        self.setup_world()
+        self.setup_player()
+        self.setup_ui()
+        self.setup_controller()
+    def setup_world(self):
+        # Create ground
+        self.ground = u.Entity(
+            model='plane',
+            scale=(200, 1, 200),
+            texture='white_cube',
+            texture_scale=(40, 40),
+            collider='box'
+        )
+        # Sky
+        self.sky = u.Sky()
+        # Initial environment objects
+        self.create_environment()
+    def create_environment(self):
+        # Trees
+        for i in range(20):
+            tree = u.Entity(
+                model='cube',
+                position=(u.random.uniform(-50, 50), 2, u.random.uniform(-50, 50)),
+                scale=(1, 4, 1),
+                color=u.color.brown
+            )
+        # Buildings
+        building_positions = [(-20, 0, -20), (20, 0, 20), (-20, 0, 20)]
+        for pos in building_positions:
+            building = u.Entity(
+                model='cube',
+                position=pos,
+                scale=(5, 8, 5),
+                color=u.color.gray
+            )
+        # Squirrel NPC
+        self.squirrel = u.Entity(
+            model='cube',
+            position=(10, 0.5, 0),
+            scale=(1, 1, 1),
+            color=u.color.orange,
+            collider='box'
+        )
+    def setup_player(self):
+        # Player controller
+        self.player = FirstPersonController()
+        self.player.speed = 8
+        self.player.jump_height = 2
+        self.player.cursor.visible = False
+    def setup_controller(self):
+        # PS4 controller mapping
+        self.controller_enabled = True
+    def setup_ui(self):
+        # HUD elements
+        self.hud = u.Entity(parent=u.camera.ui)
+        # Inventory panel (initially hidden)
+        self.inventory_panel = u.Entity(
+            parent=self.hud,
+            model='quad',
+            scale=(0.8, 0.6),
+            position=(0, 0, -1),
+            color=u.color.color(0, 0, 0, 0.8),
+            enabled=False
+        )
+        # Squirrel interaction dialog
+        self.dialog_box = u.Entity(
+            parent=self.hud,
+            model='quad',
+            scale=(0.6, 0.3),
+            position=(0, 0.2, -1),
+            color=u.color.color(0.1, 0.1, 0.1, 0.9),
+            enabled=False
+        )
+    def load_model(self, filepath):
+        # Supported formats
+        supported_formats = ['.glb', '.obj', '.stl']
+        file_ext = os.path.splitext(filepath)[1].lower()
+        if file_ext in supported_formats:
+            try:
+                model = u.Entity(
+                    model=filepath,
+                    position=self.player.position + self.player.forward * 3,
+                    scale=1,
+                    collider='mesh'
+                )
+                return model
+            except Exception as e:
+                print(f"Error loading model: {e}")
+                return None
+        else:
+            print(f"Unsupported format: {file_ext}")
+            return None
+    def update(self):
+        # Controller input handling
+        if self.controller_enabled:
+            self.handle_controller_input()
+        # Squirrel interaction check
+        self.check_squirrel_interaction()
+    def handle_controller_input(self):
+        # PS4 controller axis mapping
+        if u.held_keys['gamepad left stick x']:
+            self.player.x += u.time.dt * u.held_keys['gamepad left stick x'] * self.player.speed
+        if u.held_keys['gamepad left stick y']:
+            self.player.z += u.time.dt * u.held_keys['gamepad left stick y'] * self.player.speed
+        # Button mappings
+        if u.held_keys['gamepad a']:
+            self.jump()
+        if u.held_keys['gamepad x']:
+            self.toggle_inventory()
+    def check_squirrel_interaction(self):
+        # Check if player is near squirrel
+        distance = (self.player.position - self.squirrel.position).length()
+        if distance < 3:
+            self.show_dialog("Press X to open model loader!")
+            if u.held_keys['gamepad x'] or u.held_keys['e']:
+                self.open_model_loader()
+    def show_dialog(self, message):
+        self.dialog_box.enabled = True
+        # Add text to dialog box here
+    def open_model_loader(self):
+        # Implement file browser for model loading
+        pass
+    def toggle_inventory(self):
+        self.inventory_panel.enabled = not self.inventory_panel.enabled
+    def run(self):
+        self.app.run()
+# Start the application
+if __name__ == "__main__":
+    sandbox = SquirrelViewSandbox()
+    sandbox.run()`;
+            const blob = new Blob([pythonScript], { type: 'text/x-python' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'squirrelview_sandbox.py';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            // Show success message
+            alert('Python script downloaded successfully!');
+        });
+    }
+    // Add loading animation to buttons
+    document.querySelectorAll('button').forEach(button => {
+        button.addEventListener('click', function() {
+            const originalText = this

style.css CHANGED Viewed

@@ -1,28 +1,86 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom styles for SquirrelView 3D Sandbox Explorer */
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+/* Custom gradient backgrounds */
+.gradient-bg {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+/* Code block styling */
+pre code {
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+    line-height: 1.4;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #1f2937;
+}
+::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
 }
+/* Animation classes */
+.fade-in {
+    animation: fadeIn 0.8s ease-in;
 }
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
+/* Button hover effects */
+.btn-hover {
+    transition: all 0.3s ease;
 }
+.btn-hover:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+/* Feature card animations */
+.feature-card {
+    transition: all 0.3s ease;
+}
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+/* Responsive text sizing */
+@media (max-width: 768px) {
+    .responsive-text {
+        font-size: 0.875rem;
+    }
+}
+/* Loading animation */
+.loading-dots::after {
+    content: '';
+    animation: dots 1.5s steps(5, end) infinite;
+}
+@keyframes dots {
+    0%, 20% { content: '.'; }
+    40% { content: '..'; }
+    60% { content: '...'; }
+    80%, 100% { content: ''; }
+}