Skip to content
Snippets Groups Projects
Commit cdf57bdf authored by patbazd's avatar patbazd
Browse files

ejercicio2

parent fbabe2b7
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 155 additions and 0 deletions
ejercicio2.html 0 → 100644
+ 155
− 0
View file @ cdf57bdf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Molécula de metano en Three.js</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.0/examples/js/controls/OrbitControls.js"></script>
<script>
// Configuración de la escena
// Creación de la escena
const scene = new THREE.Scene();
// Creación de la cámara
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// Creación del renderizador
const renderer = new THREE.WebGLRenderer();
// Establecimiento del tamaño del renderizador
renderer.setSize(window.innerWidth, window.innerHeight);
// Agregado del renderizador al documento
document.body.appendChild(renderer.domElement);
// Creación de los controles de la cámara
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// Activación del amortiguamiento
controls.enableDamping = true;
// Configuración del factor de amortiguamiento
controls.dampingFactor = 0.05;
// Desactivación del desplazamiento en la pantalla
controls.screenSpacePanning = false;
// Configuración de la distancia mínima de la cámara
controls.minDistance = 1;
// Configuración de la distancia máxima de la cámara
controls.maxDistance = 20;
// Función para ajustar el tamaño de la ventana
window.addEventListener('resize', function () {
const width = window.innerWidth;
const height = window.innerHeight;
// Ajuste del tamaño del renderizador
renderer.setSize(width, height);
// Ajuste del aspecto de la cámara
camera.aspect = width / height;
// Actualización de la matriz de proyección de la cámara
camera.updateProjectionMatrix();
});
// Átomos de la molécula
// Carbono
const geometry_C = new THREE.SphereGeometry(1.2, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const carbon = new THREE.Mesh(geometry_C, material);
// Se añade a la escena
scene.add(carbon);
// Hidrógeno
const geometry_H = new THREE.SphereGeometry(0.6, 32, 32);
const hydrogenMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
// H1
const hydrogen1 = new THREE.Mesh(geometry_H, hydrogenMaterial);
// Posición del átomo en (x,y,z)
hydrogen1.position.set(2, 0, 0);
// Se añade a la escena
scene.add(hydrogen1);
// H2
const hydrogen2 = new THREE.Mesh(geometry_H, hydrogenMaterial);
// Posición del átomo en (x,y,z)
hydrogen2.position.set(-2, 0, 0);
// Se añade a la escena
scene.add(hydrogen2);
// H3
const hydrogen3 = new THREE.Mesh(geometry_H, hydrogenMaterial);
// Posición del átomo en (x,y,z)
hydrogen3.position.set(0, 2, 0);
// Se añade a la escena
scene.add(hydrogen3);
// H4
const hydrogen4 = new THREE.Mesh(geometry_H, hydrogenMaterial);
// Posición del átomo en (x,y,z)
hydrogen4.position.set(0, -2, 0);
// Se añade a la escena
scene.add(hydrogen4);
// Conexiones entre los átomos
const cylinderGeometry = new THREE.CylinderGeometry(0.2, 0.2, 1.2, 32);
const cylinderMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
// Enlace 1
const cylinder1 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
// Posición en (x,y,z) y rotación en el eje z de la conexión
cylinder1.position.set(1, 0, 0);
cylinder1.rotation.z = Math.PI / 2;
// Se añade a la escena
scene.add(cylinder1);
// Enlace 2
const cylinder2 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
// Posición en (x,y,z) y rotación en el eje z de la conexión
cylinder2.position.set(-1, 0, 0);
cylinder2.rotation.z = Math.PI / 2;
// Se añade a la escena
scene.add(cylinder2);
// Enlace 3
const cylinder3 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
// Posición de la conexión en (x,y,z)
cylinder3.position.set(0, 1, 0);
// Se añade a la escena
scene.add(cylinder3);
// Enlace 4
const cylinder4 = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
// Posición de la conexión en (x,y,z)
cylinder4.position.set(0, -1, 0);
// Se añade a la escena
scene.add(cylinder4);
// Posición de la cámara en el eje z (a 5 unidades de distancia del origen de dicho eje)
camera.position.z = 5;
// Definición de la función que se ejecuta de forma recursiva para animar la escena
function animate() {
// Se solicita que se ejecute la función "animate" en el siguiente ciclo de animación
requestAnimationFrame(animate);
// Rotación del objeto "carbon" sobre el eje x
carbon.rotation.x += 0.01;
// Rotación del objeto "carbon" sobre el eje y
carbon.rotation.y += 0.01;
// Se renderiza la escena con el renderizador "renderer" y la cámara "camera"
renderer.render(scene, camera);
// Actualización de los controles de la órbita "controls"
controls.update();
// Se vuelve a renderizar la escena
renderer.render(scene, camera);
}
// Se llama a la función "animate" para empezar la animación
animate();
</script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment