404

D7net
:/ var / www / html / crsys /
Filename : catalogo3D_container_V1.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;}
#viewport-container{position: relative; width:350px; height:250px; display:flex; justify-content:center; align-items:center; background:#111; border:1px solid #555; border-radius:6px; overflow:hidden;}
#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;}
.row2{display:grid;grid-template-columns: 1fr 1fr; gap:var(--gap); width:100%; justify-content:start;}
.row2 button{width:100%;}
input,button{background:#ffffff;color:#0c0c0c;border:1px solid #555;border-radius:4px;padding:6px 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;}
</style>
</head>
<body>
<header>Gerador de Imagens 3D</header>

<div class="wrap">
<aside>

<!-- Tampo base -->
<fieldset>
<legend>Tampo base</legend>
<div class="row">
<input id="dimX" type="number" step="0.1" value="40" title="X (largura)">
<input id="dimY" type="number" step="0.1" value="2" title="Y (espessura)">
<input id="dimZ" type="number" step="0.1" value="20" title="Z (profundidade)">
</div>
<div class="row2" style="margin-top:8px">
<button id="aplicarDim">Aplicar</button>
<button id="resetCamera">Recentrar câmera</button>
</div>
</fieldset>

<!-- Saia -->
<fieldset>
<legend>Saia do tampo inferior</legend>
<label><input type="checkbox" id="sf_on"> Incluir saia frontal</label>
<div class="row2x" style="margin-top:8px;">
<input id="sf_h" type="number" step="0.1" value="5" title="Altura (Y)">
<input id="sf_t" type="number" step="0.1" value="2.0" title="Espessura (Z)">
</div>
<button id="sf_apply" style="margin-top:8px">Aplicar saia frontal</button>

<label><input type="checkbox" id="sr_on"> Incluir saia lateral direita</label>
<div class="row2x" style="margin-top:8px;">
<input id="sr_h" type="number" step="0.1" value="5" title="Altura (Y)">
<input id="sr_t" type="number" step="0.1" value="2.0" title="Espessura (X)">
</div>
<button id="sr_apply" style="margin-top:8px">Aplicar saia direita</button>

<label><input type="checkbox" id="sl_on"> Incluir saia lateral esquerda</label>
<div class="row2x" style="margin-top:8px;">
<input id="sl_h" type="number" step="0.1" value="5" title="Altura (Y)">
<input id="sl_t" type="number" step="0.1" value="2.0" title="Espessura (X)">
</div>
<button id="sl_apply" style="margin-top:8px">Aplicar saia esquerda</button>
</fieldset>

<!-- Frontões -->
<fieldset>
<legend>Frontões</legend>
<label><input type="checkbox" id="ft_on"> Frontão traseiro</label>
<div class="row2x" style="margin-top:8px;">
<input id="ft_h" type="number" step="0.1" value="5" title="Altura (Y)">
<input id="ft_t" type="number" step="0.1" value="2.0" title="Espessura (Z)">
</div>
<button id="ft_apply" style="margin-top:8px">Aplicar frontão traseiro</button>

<label><input type="checkbox" id="fr_on"> Frontão lateral direita</label>
<div class="row2x" style="margin-top:8px;">
<input id="fr_h" type="number" step="0.1" value="5" title="Altura (Y)">
<input id="fr_t" type="number" step="0.1" value="2.0" title="Espessura (X)">
</div>
<button id="fr_apply" style="margin-top:8px">Aplicar frontão direita</button>

<label><input type="checkbox" id="fl_on"> Frontão lateral esquerda</label>
<div class="row2x" style="margin-top:8px;">
<input id="fl_h" type="number" step="0.1" value="5" title="Altura (Y)">
<input id="fl_t" type="number" step="0.1" value="2.0" title="Espessura (X)">
</div>
<button id="fl_apply" style="margin-top:8px">Aplicar frontão esquerda</button>

<label><input type="checkbox" id="ts_on"> Tampo superior</label>
<div class="row2x" style="margin-top:8px;">
<input id="ts_h" type="number" step="0.1" value="2" title="Espessura">
</div>
<button id="ts_apply" style="margin-top:8px">Aplicar tampo superior</button>
</fieldset>

</aside>

<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>
const container=document.getElementById('viewport-container');
const renderer=new THREE.WebGLRenderer({antialias:true,preserveDrawingBuffer:true});
container.appendChild(renderer.domElement);

const scene=new THREE.Scene();
scene.background=new THREE.Color(0xffffff);

const camera=new THREE.PerspectiveCamera(45,1,0.1,5000);
scene.add(new THREE.HemisphereLight(0xffffff,0xffffff,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;
let skirtFront,skirtRight,skirtLeft;
let frontBack, frontRight, frontLeft, topMesh;

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();

const target=new THREE.Vector3(0,0,0);
let radius=120, theta=Math.PI/4, phi=Math.PI/4;
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);
}

function fitCameraToScene(margin=2){
  root.updateWorldMatrix(true,true);
  const box=new THREE.Box3().setFromObject(root);
  if(box.isEmpty()){updateCamera();render();return;}
  const size=box.getSize(new THREE.Vector3());
  const center=box.getCenter(new THREE.Vector3());
  target.copy(center);
  const vFov=camera.fov*Math.PI/180;
  const hFov=2*Math.atan(Math.tan(vFov/2)*camera.aspect);
  const distH=(size.y*0.5)/Math.tan(vFov/2);
  const distW=(size.x*0.5)/Math.tan(hFov/2);
  const distZ=(size.z*0.5)/Math.tan(vFov/2);
  radius=Math.max(distH,distW,distZ)*margin;
  updateCamera();
  render();
}
fitCameraToScene(1.8);

let dragging=false,lx=0,ly=0;
container.addEventListener('pointerdown',e=>{dragging=true;lx=e.clientX;ly=e.clientY;});
container.addEventListener('pointermove',e=>{
  if(!dragging) return;
  const dx=e.clientX-lx,dy=e.clientY-ly; lx=e.clientX; ly=e.clientY;
  theta-=dx*0.005; phi-=dy*0.005;
  phi=Math.max(Math.PI*0.05,Math.min(Math.PI*0.95,phi));
  updateCamera(); render();
});
container.addEventListener('pointerup',()=>dragging=false);

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

function render(){renderer.render(scene,camera);}

/* ====== UI ====== */
aplicarDim.onclick=()=>{
  const x=+dimX.value||40,y=+dimY.value||2,z=+dimZ.value||20;
  makeBase(x,y,z);
  applySkirtFront(); applySkirtRight(); applySkirtLeft();
  applyFrontBack(); applyFrontRight(); applyFrontLeft(); applyTop();
  fitCameraToScene(1.8);
};
resetCamera.onclick=()=>fitCameraToScene(1.8);

/* ====== SAIA ====== */
sf_apply.onclick=applySkirtFront; sf_on.onchange=applySkirtFront;
function applySkirtFront(){
  const bx=+dimX.value||40,by=+dimY.value||2,bz=+dimZ.value||20;
  const h=Math.max(0.1,+sf_h.value||5);
  const t=Math.max(0.1,+sf_t.value||2.0);
  if(!sf_on.checked){ if(skirtFront){ root.remove(skirtFront); skirtFront=null; render(); return;}
  }
  const mat=new THREE.MeshStandardMaterial({color:0xffffff,roughness:0.85});
  const geo=new THREE.BoxGeometry(bx,h,t);
  if(!skirtFront){skirtFront=new THREE.Mesh(geo,mat); root.add(skirtFront);}
  else{ skirtFront.material=mat; skirtFront.geometry.dispose(); skirtFront.geometry=geo;}
  skirtFront.position.set(0,-by/2-h/2,-bz/2+t/2);
  render();
}

sr_apply.onclick=applySkirtRight; sr_on.onchange=applySkirtRight;
function applySkirtRight(){
  const bx=+dimX.value||40,by=+dimY.value||2,bz=+dimZ.value||20;
  const h=Math.max(0.1,+sr_h.value||5);
  const t=Math.max(0.1,+sr_t.value||2.0);
  if(!sr_on.checked){ if(skirtRight){ root.remove(skirtRight); skirtRight=null; render(); return;}}
  const mat=new THREE.MeshStandardMaterial({color:0xffffff,roughness:0.85});
  const geo=new THREE.BoxGeometry(t,h,bz);
  if(!skirtRight){ skirtRight=new THREE.Mesh(geo,mat); root.add(skirtRight);}
  else{ skirtRight.material=mat; skirtRight.geometry.dispose(); skirtRight.geometry=geo;}
  skirtRight.position.set(bx/2+t/2,-by/2-h/2,0);
  render();
}

sl_apply.onclick=applySkirtLeft; sl_on.onchange=applySkirtLeft;
function applySkirtLeft(){
  const bx=+dimX.value||40,by=+dimY.value||2,bz=+dimZ.value||20;
  const h=Math.max(0.1,+sl_h.value||5);
  const t=Math.max(0.1,+sl_t.value||2.0);
  if(!sl_on.checked){ if(skirtLeft){ root.remove(skirtLeft); skirtLeft=null; render(); return;}}
  const mat=new THREE.MeshStandardMaterial({color:0xffffff,roughness:0.85});
  const geo=new THREE.BoxGeometry(t,h,bz);
  if(!skirtLeft){ skirtLeft=new THREE.Mesh(geo,mat); root.add(skirtLeft);}
  else{ skirtLeft.material=mat; skirtLeft.geometry.dispose(); skirtLeft.geometry=geo;}
  skirtLeft.position.set(-bx/2-t/2,-by/2-h/2,0);
  render();
}

/* ====== FRONTÕES ====== */
ft_apply.onclick=applyFrontBack; ft_on.onchange=applyFrontBack;
function applyFrontBack(){
  const bx=+dimX.value||40,by=+dimY.value||2,bz=+dimZ.value||20;
  const h=Math.max(0.1,+ft_h.value||5);
  const t=Math.max(0.1,+ft_t.value||2.0);
  if(!ft_on.checked){ if(frontBack){ root.remove(frontBack); frontBack=null; render(); return;}}
  const mat=new THREE.MeshStandardMaterial({color:0xdddddd,roughness:0.85});
  const geo=new THREE.BoxGeometry(bx,h,t);
  if(!frontBack){ frontBack=new THREE.Mesh(geo,mat); root.add(frontBack);}
  else{ frontBack.material=mat; frontBack.geometry.dispose(); frontBack.geometry=geo;}
  frontBack.position.set(0,by/2+h/2,bz/2-t/2);
  render();
}

fr_apply.onclick=applyFrontRight; fr_on.onchange=applyFrontRight;
function applyFrontRight(){
  const bx=+dimX.value||40,by=+dimY.value||2,bz=+dimZ.value||20;
  const h=Math.max(0.1,+fr_h.value||5);
  const t=Math.max(0.1,+fr_t.value||2.0);
  if(!fr_on.checked){ if(frontRight){ root.remove(frontRight); frontRight=null; render(); return;}}
  const mat=new THREE.MeshStandardMaterial({color:0xdddddd,roughness:0.85});
  const geo=new THREE.BoxGeometry(t,h,bz);
  if(!frontRight){ frontRight=new THREE.Mesh(geo,mat); root.add(frontRight);}
  else{ frontRight.material=mat; frontRight.geometry.dispose(); frontRight.geometry=geo;}
  frontRight.position.set(bx/2+t/2,by/2,0);
  render();
}

fl_apply.onclick=applyFrontLeft; fl_on.onchange=applyFrontLeft;
function applyFrontLeft(){
  const bx=+dimX.value||40,by=+dimY.value||2,bz=+dimZ.value||20;
  const h=Math.max(0.1,+fl_h.value||5);
  const t=Math.max(0.1,+fl_t.value||2.0);
  if(!fl_on.checked){ if(frontLeft){ root.remove(frontLeft); frontLeft=null; render(); return;}}
  const mat=new THREE.MeshStandardMaterial({color:0xdddddd,roughness:0.85});
  const geo=new THREE.BoxGeometry(t,h,bz);
  if(!frontLeft){ frontLeft=new THREE.Mesh(geo,mat); root.add(frontLeft);}
  else{ frontLeft.material=mat; frontLeft.geometry.dispose(); frontLeft.geometry=geo;}
  frontLeft.position.set(-bx/2-t/2,by/2,0);
  render();
}

/* ====== TAMPO SUPERIOR ====== */
ts_apply.onclick=applyTop; ts_on.onchange=applyTop;
function applyTop(){
  const bx=+dimX.value||40,by=+dimY.value||2,bz=+dimZ.value||20;
  const h=Math.max(0.1,+ts_h.value||2);
  if(!ts_on.checked){ if(topMesh){ root.remove(topMesh); topMesh=null; render(); return;}}
  const mat=new THREE.MeshStandardMaterial({color:0xffffff,roughness:0.85});
  const geo=new THREE.BoxGeometry(bx,h,bz);
  if(!topMesh){ topMesh=new THREE.Mesh(geo,mat); root.add(topMesh);}
  else{ topMesh.material=mat; topMesh.geometry.dispose(); topMesh.geometry=geo;}
  topMesh.position.set(0,by/2+h/2,0);
  render();
}
</script>
</body>
</html>