three2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Three.js Cube and Cylinder</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/three@0.133.2/build/three.min.js"></script>
  <script>
    // Create a scene
    const scene = new THREE.Scene();

    // Create a camera
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // Create a renderer
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Create geometry
    const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
    const cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);

    // Create materials
    const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cylinderMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });

    // Create mesh objects
    const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);

    // Add mesh objects to the scene
    scene.add(cube);
    scene.add(cylinder);

    // Render loop
    function animate() {
      requestAnimationFrame(animate);

      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      cylinder.rotation.x += 0.01;
      cylinder.rotation.y += 0.01;

      renderer.render(scene, camera);
    }

    animate();
  </script>
</body>
</html>