<!-- Div container for Three.js rendering -->
<div id="threejs-container" style="width: 100%; height: 500px;"></div>

<!-- Include Three.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r136/three.min.js"></script>

<script>
  // Step 1: Select the container div
  const container = document.getElementById('threejs-container');

  // Step 2: Set up the Three.js environment
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75, // Field of view
    container.offsetWidth / container.offsetHeight, // Aspect ratio
    0.1, // Near clipping plane
    1000 // Far clipping plane
  );

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(container.offsetWidth, container.offsetHeight);
  container.appendChild(renderer.domElement);

  // Step 3: Create a rotating 3D object (Icosahedron)
  const geometry = new THREE.IcosahedronGeometry(1);
  const material = new THREE.MeshBasicMaterial({
    color: 0xff0000, // Red color
    wireframe: true // Display as wireframe
  });
  const icosahedron = new THREE.Mesh(geometry, material);
  scene.add(icosahedron);

  camera.position.z = 5; // Position the camera

  // Step 4: Animation loop for rotation
  function animate() {
    requestAnimationFrame(animate);
    icosahedron.rotation.x += 0.01; // Rotate on X-axis
    icosahedron.rotation.y += 0.01; // Rotate on Y-axis
    renderer.render(scene, camera); // Render the scene
  }
  animate();

  // Step 5: Adjust to window size changes
  window.addEventListener('resize', () => {
    renderer.setSize(container.offsetWidth, container.offsetHeight);
    camera.aspect = container.offsetWidth / container.offsetHeight;
    camera.updateProjectionMatrix();
  });
</script>