Contacto

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>3D USB Hub Product</title>
<style>
body { margin: 0; overflow: hidden; background: #f0f0f0; }
#canvas-container { width: 100vw; height: 100vh; }
</style>
</head>
<body>
<div id="canvas-container"></div>

<script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/three@0.150.1/examples/js/controls/OrbitControls.js"></script>

// Camera setup
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 5);

// Renderer setup
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas-container').appendChild(renderer.domElement);

// Controls for rotation/zoom
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

// Light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 7);
scene.add(directionalLight);

// Create USB Hub base (a black rectangular box)
const baseGeometry = new THREE.BoxGeometry(3, 0.5, 1.2);
const baseMaterial = new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.4, metalness: 0.7 });
const base = new THREE.Mesh(baseGeometry, baseMaterial);
scene.add(base);

// Create USB ports (3x rectangles in metallic grey)
const portMaterial = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.3, metalness: 0.8 });
const portGeometry = new THREE.BoxGeometry(0.5, 0.2, 0.1);

// Create multiple ports and position them
const ports = [];
for (let i = -1; i <= 1; i++) {
const port = new THREE.Mesh(portGeometry, portMaterial);
port.position.set(i, 0, 0.65);
base.add(port);
ports.push(port);
}

// Animate rotation
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}

animate();

// Handle resizing
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>