WebGLを使用して簡単な立方体を描画してください。またライブラリには、Three.jsをCDNで利用してください。

以下は、Three.jsをCDNで利用してWebGLを使用して簡単な立方体を描画するサンプルコードです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Three.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  </head>
  <body>
    <script>
      // Three.jsのコード
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      var geometry = new THREE.BoxGeometry(1, 1, 1);
      var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      var cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 5;

      function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </body>
</html>

このコードでは、CDNからThree.jsのライブラリを読み込み、簡単な立方体を作成し、シーンに追加し、アニメーションループを設定しています。立方体の材質は緑色に設定されており、アニメーションループ内で回転させています。

また、WebGLRenderer を使用して、レンダリングを実行し、HTMLの body 要素に追加しています。

以上のコードを、HTMLファイルに保存し、ブラウザで開くと、立方体が回転するアニメーションが表示されます。

確かに立体が表示された。