如何在同一个超文本标记语言页面中包含带有three.js的3d可视化图形？

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

<div id="canvas-container"></div>

<script>
  // 获取画布容器元素
  const canvasContainer = document.getElementById('canvas-container');

  // 创建场景、相机和渲染器
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();

  // 设置渲染器的大小，并将其添加到画布容器中
  renderer.setSize(window.innerWidth, window.innerHeight);
  canvasContainer.appendChild(renderer.domElement);

  // 创建几何体和材质，并将它们添加到场景中
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const 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>