~/testes/cubo-magico

Simulador de cubo magico 3D em um unico HTML

Cubo 3x3x3 em WebGL com Three.js, num arquivo unico com CSS e JavaScript inline. O enunciado pede rotacao animada de camada sem corromper o estado do cubo, a notacao padrao completa (U/D/L/R/F/B com ' e 2), embaralhar, desfazer e resetar, contador de movimentos, cronometro e controle por teclado e por botoes. O giro de camada e o ponto onde as execucoes mais divergem: reparentar cubies num pivot e devolve-los sem acumular erro de ponto flutuante nao e trivial.

3 execucoes3 modelos

html
javascript
three-js
3d
webgl
puzzle
arquivo-unico

comparar lado a lado

prompt do desafio

Crie um simulador de cubo magico 3D em um unico arquivo HTML.

Requisitos funcionais:
- Cubo 3x3x3 renderizado em 3D com Three.js, com as seis cores nas faces
- Rotacao animada de camadas, uma camada por vez, sem quebrar o estado do cubo
- Notacao padrao (U, D, L, R, F, B) com as variantes ' (anti-horario) e 2 (meia volta)
- Botoes de embaralhar, desfazer o ultimo movimento e resetar
- Contador de movimentos e cronometro
- Controle por teclado e por botoes na tela
- Camera orbital com o mouse (arrastar para girar, scroll para zoom)

Restricoes tecnicas (obrigatorias):
- UM unico arquivo index.html. Todo o CSS e todo o JavaScript inline. Nao crie nenhum outro arquivo
- Three.js vem do CDN, declarado num <script type="importmap"> inline e consumido por um <script type="module"> tambem inline:

  <script type="importmap">
  {"imports":{
    "three":"https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
    "three/addons/":"https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/"
  }}
  </script>
  <script type="module">
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  </script>

  Atencao: importar https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/controls/OrbitControls.js pela URL direta NAO funciona — esse arquivo faz `import ... from 'three'`, e o especificador bare so resolve pelo importmap
- NAO use <script type="module" src="..."> apontando para arquivo local
- NAO use localStorage nem sessionStorage — eles lancam SecurityError no ambiente onde a pagina roda
- A pagina roda dentro de um iframe sandbox de origem opaca: sem cookies, sem acesso a janela pai
- Deve caber e ficar legivel em 1440x900