Spaces:
Running
Running
| // Import necessary packages | |
| import { Scene, WebGLRenderer, PerspectiveCamera } from 'three'; | |
| import { OrbitControls } from 'three/examples/webgl2/controls'; | |
| // Initialize the scene | |
| const scene = new Scene(); | |
| scene.setSize(600, 600); | |
| // Create a camera | |
| const camera = new PerspectiveCamera(45, 1, 0.1, 1000); | |
| camera.position.z = 3; | |
| // Add a light source | |
| const light = new PointLight(0xffffff, 1, 1000, 0.5); | |
| light.position.set(-20, 20, -20); | |
| scene.add(light); | |
| // Create a renderer | |
| const renderer = new WebGLRenderer({ | |
| canvas: document.getElementById('canvas'), | |
| antialias: true, | |
| preserveDrawingBuffer: false, | |
| }); | |
| renderer.setSize(600, 600); | |
| // Add controls | |
| const controls = new OrbitControls(camera, renderer.domElement); | |
| controls.enablePan(); | |
| controls.enableZoom(); | |
| // Create a group to hold the slot machine elements | |
| const slotMachineGroup = new Group(); | |
| // Create four stacked windows with different backgrounds and text | |
| const window1 = new Group().addChild(new Cylinder(5, 5, 20, 0.5)).setMatrixAutoScale(); | |
| window1.material.color = new Color('#0000ff'); | |
| window1.material.opacity = 0.7; | |
| window1.material.transparent = true; | |
| window1.material.wireframe = false; | |
| const window2 = new Cylinder(5, 5, 20, 0.5).setMatrixAutoScale(); | |
| window2.material.color = new Color('#ff0000'); | |
| window2.material.opacity = 0.7; | |
| window2.material.transparent = true; | |
| window2.material.wireframe = false; | |
| const window3 = new Cylinder(5, 5, 20, 0.5).setMatrixAutoScale(); | |
| window3.material.color = new Color('#00ff00'); | |
| window3.material.opacity = 0.7; | |
| window3.material.transparent = true; | |
| window3.material.wireframe = false; | |
| const window4 = new Cylinder(5, 5, 20, 0.5).setMatrixAutoScale(); | |
| window4.material.color = new Color('#ff00ff'); | |
| window4.material.opacity = 0.7; | |
| window4.material.transparent = true; | |
| window4.material.wireframe = false; | |
| // Add the windows to the slot machine group | |
| slotMachineGroup.addChild(window1); | |
| slotMachineGroup.addChild(window2); | |
| slotMachineGroup.addChild(window3); | |
| slotMachineGroup.addChild(window4); | |
| // Add buttons for copy, result, and restart | |
| const copyButton = new Cylinder(5, 5, 10, 0.5).setMatrixAutoScale(); | |
| copyButton.material.color = new Color('#ff0000'); | |
| copyButton.material.opacity = 0.7; | |
| copyButton.material.transparent = true; | |
| copyButton.material.wireframe = false; | |
| copyButton.position.set(10, 25, 0); | |
| const resultButton = new Cylinder(5, 5, 10, 0.5).setMatrixAutoScale(); | |
| resultButton.material.color = new Color('#ff0000'); | |
| resultButton.material.opacity = 0.7; | |
| resultButton.material.transparent = true; | |
| resultButton.material.wireframe = false; | |
| resultButton.position.set(10, 50, 0); | |
| const restartButton = new Cylinder(5, 5, 10, 0.5).setMatrixAutoScale(); | |
| restartButton.material.color = new Color('#ff0000'); | |
| restartButton.material.opacity = 0.7; | |
| restartButton.material.transparent = true; | |
| restartButton.material.wireframe = false; | |
| restartButton.position.set(10, 85, 0); | |
| // Add the buttons to the slot machine group | |
| slotMachineGroup.addChild(copyButton); | |
| slotMachineGroup.addChild(resultButton); | |
| slotMachineGroup.addChild(restartButton); | |
| // Add the slot machine group to the scene | |
| scene.add(slotMachineGroup); | |
| // Add controls to the scene | |
| controls.update(); | |
| // Add event listeners for button clicks | |
| window1.addEventListener('click', function() { | |
| console.log('Copy button clicked'); | |
| }); | |
| window2.addEventListener('click', function() { | |
| console.log('Result button clicked'); | |
| }); | |
| window3.addEventListener('click', function() { | |
| console.log('Restart button clicked'); | |
| }); | |
| // Add the scene to the document | |
| document.body.appendChild(renderer.domElement); | |
| // Start the animation loop | |
| const frameRate = 10; // update every frame | |
| requestAnimationFrame(animate); | |
| function animate() { | |
| // Update the slot machine elements | |
| window1.material.color.setHex(Math.floor(Math.random() * 256)); | |
| window2.material.color.setHex(Math.floor(Math.random() * 256)); | |
| window3.material.color.setHex(Math.floor(Math.random() * 256)); | |
| window4.material.color.setHex(Math.floor(Math.random() * 256)); | |
| // Update the buttons' text based on the current state of the slot machine | |
| copyButton.material.color.setHex(Math.floor(Math.random() * 256)); | |
| resultButton.material.color.setHex(Math.floor(Math.random() * 256)); | |
| restartButton.material.color.setHex(Math.floor(Math.random() * 256)); | |
| // Update the buttons' position based on the current state of the slot machine | |
| copyButton.position.x = Math.random() * 100 - 50; | |
| resultButton.position.x = Math.random() * 100 - 50; | |
| restartButton.position.x = Math.random() * 100 - 50; | |
| // Update the slot machine group's position based on the current state of the slot machine | |
| slotMachineGroup.position.set(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50); | |
| // Update the scene | |
| renderer.render(scene, camera); | |
| // Request another frame | |
| requestAnimationFrame(animate); | |
| } | |