404

D7net
:/ var / www / html / crsys /
Filename : imagem3D.html
back
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<title>Gerador de Imagens 3D</title>
<style>
  html, body {
    height: 100%;
    margin: 0;
    background: #222;
    color: #ddd;
    font-family: system-ui, Segoe UI, Roboto;
  }

  header {
    padding: 10px 14px;
    border-bottom: 1px solid #444;
  }

  .wrap {
    display: grid;
    grid-template-columns: 335px 1fr;
    height: calc(100vh - 48px);
  }

  aside {
    border-right: 1px solid #444;
    padding: 12px;
    overflow: auto;
  }

  main {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 🎯 Novo container centralizado para o viewport */
  #viewport-container {
    width: 80%;
    max-width: 350px;
    aspect-ratio: 4 / 3;
    border: 2px solid #555;
    border-radius: 10px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
  }

  #viewport {
    width: 100%;
    height: 100%;
  }

  fieldset {
    border: 1px solid #444;
    border-radius: 10px;
    padding: 10px;
    margin: 0 0 12px;
  }

  legend {
    padding: 0 6px;
    color: #a6c1ff;
    font-size: 16px;
  }

  :root {
    --w-input: 85px;
    --gap: 8px;
    --w-bloco: calc(var(--w-input)*3 + var(--gap)*2);
  }

  .row {
    display: grid;
    grid-template-columns: var(--w-input) var(--w-input) var(--w-input);
    gap: var(--gap);
    width: var(--w-bloco);
    justify-content: start;
  }

  .row2x {
    display: grid;
    grid-template-columns: var(--w-input) var(--w-input);
    gap: var(--gap);
    width: calc(var(--w-input)*2 + var(--gap));
    justify-content: start;
  }

  input, button {
    background: #fff;
    color: #0c0c0c;
    border: 1px solid #555;
    border-radius: 0px;
    padding: 8px 8px;
  }

  input[type="number"] { width: 100%; min-width: 0; }
  button { cursor: pointer; font-weight: 600; }

  label { display: flex; gap: 8px; align-items: center; }
  .hint { font-size: 12px; opacity: .8; margin-top: 6px; }

  /* Ocultar controles de ângulo */
  fieldset div:has(> #latDR_ang),
  fieldset div:has(> #latESQ_ang),
  fieldset div:has(> #top_ang) {
    display: none !important;
  }
</style>
</head>

<body>
<header>Gerador de Imagens 3D</header>

<div class="wrap">
  <aside>
    <!-- campos e botões do painel esquerdo (mesmos que já existiam) -->
    <!-- ... (mantém todo o conteúdo original do painel esquerdo) ... -->
  </aside>

  <!-- 🎯 Main com container central -->
  <main>
    <div id="viewport-container">
      <div id="viewport"></div>
    </div>
  </main>
</div>

<script src="https://unpkg.com/three@0.160.0/build/three.min.js"></script>
<script>
/* ====== CENA ====== */
const vpEl = document.getElementById('viewport');
const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
vpEl.appendChild(renderer.domElement);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x222222);
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 5000);
scene.add(new THREE.HemisphereLight(0xffffff, 0x222233, 0.9));
const dir = new THREE.DirectionalLight(0xffffff, 0.85);
dir.position.set(30, 50, 30);
scene.add(dir);

const root = new THREE.Group();
scene.add(root);

let baseMesh;
function makeBase(x = 40, y = 2, z = 20) {
  if (baseMesh) root.remove(baseMesh);
  const g = new THREE.BoxGeometry(x, y, z);
  const m = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.85 });
  baseMesh = new THREE.Mesh(g, m);
  root.add(baseMesh);
  render();
}
makeBase();

/* ====== CÂMERA ====== */
const target = new THREE.Vector3(0, 0, 0);
let radius = 120, theta = THREE.MathUtils.degToRad(45), phi = THREE.MathUtils.degToRad(35);
function updateCamera() {
  const x = target.x + radius * Math.sin(phi) * Math.cos(theta);
  const y = target.y + radius * Math.cos(phi);
  const z = target.z + radius * Math.sin(phi) * Math.sin(theta);
  camera.position.set(x, y, z);
  camera.lookAt(target);
}

/* ====== REDIMENSIONAMENTO ====== */
function onResize() {
  const container = document.getElementById('viewport-container');
  const w = container.clientWidth;
  const h = container.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
  updateCamera();
  render();
}
window.addEventListener('resize', onResize);
onResize();

function render() { renderer.render(scene, camera); }
updateCamera();
render();
</script>
</body>
</html>