JSFiddle - React, Tailwind, and code Playground

by giperon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Tilt on Key Press</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>
      // Create a basic scene
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // Add a cube to the scene
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({
        color: 0x00ff00
      });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      const geometry2 = new THREE.BoxGeometry();
      cube.position.x = 3;
      const cube2 = new THREE.Mesh(geometry2, material);
      scene.add(cube2);

      const axesHelper = new THREE.AxesHelper(10);
      scene.add(axesHelper);

      camera.position.z = 5;

      // Function to animate the scene
      function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      }
      animate();

      // Listen for keydown events
      document.addEventListener('keydown', (event) => {
        if (event.key === 'Q' || event.key === 'q') {
          // Rotate the entire scene by 5 degrees
          const angle = THREE.MathUtils.degToRad(5);
          scene.rotation.z -= angle;
          //scene.rotationq.x += angle;
          // Optionally rotate around other axes if needed
        }
      });

      // Handle window resize
     ...

CSS

body {
				background-color: #ffffff;
				margin: 0;
				overflow: hidden;
			}

JavaScript

qq