1 <!DOCTYPE html>2 <html lang="es">3 <head>4 <meta charset="UTF-8">5 <title>Objeto 3D Interactivo</title>6 <style>7 body { margin: 0; overflow: hidden; }8 canvas { display: block; }9 </style>10 </head>11 <body>12 13 <!-- El canvas será añadido por Three.js -->14 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>15 <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>16 <script>17 // Configuración básica18 var scene = new THREE.Scene();19 var camera = new THREE.PerspectiveCamera(20 75, window.innerWidth / window.innerHeight, 0.1, 100021 );22 var renderer = new THREE.WebGLRenderer({ antialias: true });23 renderer.setSize(window.innerWidth, window.innerHeight);24 document.body.appendChild(renderer.domElement);25 26 // Controladores de órbita para interactividad27 var controls = new THREE.OrbitControls(camera, renderer.domElement);28 29 // Crear un objeto 3D (por ejemplo, un cubo)30 var geometry = new THREE.BoxGeometry();31 var material = new THREE.MeshNormalMaterial();32 var cube = new THREE.Mesh(geometry, material);33 scene.add(cube);34 35 // Posicionar la cámara36 camera.position.z = 5;37 38 // Función de animación39 function animate() {40 requestAnimationFrame(animate);41 controls.update(); // Actualiza los controles42 renderer.render(scene, camera);43 }44 animate();45 46 // Ajustar al cambiar el tamaño de la ventana47 window.addEventListener('resize', function() {48 var width = window.innerWidth;49 var height = window.innerHeight;50 renderer.setSize(width, height);51 camera.aspect = width / height;52 camera.updateProjectionMatrix();53 });54 </script>55 </body>56 </html>57 Enlace
El enlace para compartir es: