import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; import { XRButton } from 'three/addons/webxr/XRButton.js'; import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; const StartScreen = ({ onStart }) => { return (

LINKYDOG GAMES

); }; const BeatSaberGame = () => { const mountRef = useRef(null); const [gameStarted, setGameStarted] = useState(false); const [showStartScreen, setShowStartScreen] = useState(true); useEffect(() => { // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 1.6, 3); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.xr.enabled = true; mountRef.current.appendChild(renderer.domElement); // Create VR Button const vrButton = document.createElement('button'); vrButton.style.position = 'fixed'; vrButton.style.bottom = '20px'; vrButton.style.left = '50%'; vrButton.style.transform = 'translateX(-50%)'; vrButton.style.padding = '20px 40px'; vrButton.style.fontSize = '24px'; vrButton.style.backgroundColor = '#ff0000'; vrButton.style.color = 'white'; vrButton.style.border = 'none'; vrButton.style.borderRadius = '10px'; vrButton.style.cursor = 'pointer'; vrButton.style.transition = 'transform 0.2s'; vrButton.style.boxShadow = '0 0 20px rgba(255, 0, 0, 0.3)'; vrButton.style.zIndex = '1000'; vrButton.textContent = 'ENTER VR'; vrButton.addEventListener('mouseover', () => { vrButton.style.transform = 'translateX(-50%) scale(1.1)'; }); vrButton.addEventListener('mouseout', () => { vrButton.style.transform = 'translateX(-50%) scale(1)'; }); vrButton.addEventListener('click', async () => { if (navigator.xr) { try { const sessionInit = { optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers'], requiredFeatures: ['local-floor'] }; const session = await navigator.xr.requestSession('immersive-vr', sessionInit); renderer.xr.setSession(session); session.addEventListener('end', () => { renderer.xr.setSession(null); }); } catch (error) { console.error('Error entering VR: ', error); alert('Failed to enter VR. Make sure your Quest 3 is properly connected and try again.'); } } else { alert('WebXR not supported. Please ensure you are using the Quest browser.'); } }); // Only show VR button when game starts if (!showStartScreen) { document.body.appendChild(vrButton); } // Lighting const ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(0, 10, 0); scene.add(directionalLight); // VR Controllers const controllerModelFactory = new XRControllerModelFactory(); // Left Controller const leftController = renderer.xr.getController(0); const leftSaber = createSaber(0x0000ff); // Blue saber leftController.add(leftSaber); scene.add(leftController); // Right Controller const rightController = renderer.xr.getController(1); const rightSaber = createSaber(0xff0000); // Red saber rightController.add(rightSaber); scene.add(rightController); // Add controller grip models const leftGrip = renderer.xr.getControllerGrip(0); leftGrip.add(controllerModelFactory.createControllerModel(leftGrip)); scene.add(leftGrip); const rightGrip = renderer.xr.getControllerGrip(1); rightGrip.add(controllerModelFactory.createControllerModel(rightGrip)); scene.add(rightGrip); // Game state let cubes = []; const cubeSpeed = 0.05; // Create a saber mesh function createSaber(color) { const group = new THREE.Group(); // Handle const handleGeometry = new THREE.CylinderGeometry(0.02, 0.02, 0.1, 16); const handleMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 }); const handle = new THREE.Mesh(handleGeometry, handleMaterial); // Blade const bladeGeometry = new THREE.CylinderGeometry(0.01, 0.01, 1, 16); const bladeMaterial = new THREE.MeshStandardMaterial({ color: color, emissive: color, emissiveIntensity: 0.5, transparent: true, opacity: 0.7 }); const blade = new THREE.Mesh(bladeGeometry, bladeMaterial); blade.position.y = 0.5; group.add(handle); group.add(blade); return group; } // Load GLB models const loader = new GLTFLoader(); let blueBlockModel = null; let orangeBlockModel = null; // Load blue block loader.load('https://play.rosebud.ai/assets/blue block with down arrow on it.glb?B6T0', (gltf) => { blueBlockModel = gltf.scene; }, undefined, (error) => console.error('Error loading blue block:', error) ); // Load orange block loader.load('https://play.rosebud.ai/assets/orange block with down arrow on it.glb?c0qD', (gltf) => { orangeBlockModel = gltf.scene; }, undefined, (error) => console.error('Error loading orange block:', error) ); // Create a note cube using GLB models function createCube(color, position) { const model = color === 0x0000ff ? blueBlockModel : orangeBlockModel; if (model) { const cube = model.clone(); cube.position.copy(position); cube.scale.set(0.4, 0.4, 0.4); scene.add(cube); cubes.push({ mesh: cube, color: color }); } } // Spawn cubes periodically function spawnCube() { if (!gameStarted) return; const x = (Math.random() - 0.5) * 4; const y = 1 + Math.random() * 2; const color = Math.random() > 0.5 ? 0xff0000 : 0x0000ff; createCube(color, new THREE.Vector3(x, y, -20)); } // Check collision between saber and cube function checkCollision(saber, cube) { const saberPos = new THREE.Vector3(); saber.getWorldPosition(saberPos); const cubePos = cube.mesh.position; return saberPos.distanceTo(cubePos) < 0.5; } // Animation loop function animate() { renderer.setAnimationLoop(() => { // Move cubes cubes.forEach((cube, index) => { cube.mesh.position.z += cubeSpeed; // Check collisions with sabers if (checkCollision(leftSaber, cube) || checkCollision(rightSaber, cube)) { scene.remove(cube.mesh); cubes.splice(index, 1); } // Remove cubes that pass the player if (cube.mesh.position.z > 5) { scene.remove(cube.mesh); cubes.splice(index, 1); } }); renderer.render(scene, camera); }); } // Start game and spawn cubes setGameStarted(true); animate(); setInterval(spawnCube, 2000); // Cleanup return () => { renderer.dispose(); scene.clear(); clearInterval(spawnCube); const vrButton = document.querySelector('button'); if (vrButton) { vrButton.remove(); } }; }, []); return ( <> {showStartScreen && ( { setShowStartScreen(false); setGameStarted(true); }} /> )}

{!showStartScreen && (

Beat Saber Clone

)}

); }; const App = () => { return ; }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();