只定义了一个 canvas

<canvas
  id="webgl"
  type="webgl"
  canvas-id="webgl"
  style="position:fixed;top:0;width:300px; height: 500px;" >
canvas>

想加载两个3d动画

    wx.createSelectorQuery()
      .select('#webgl')
      .node()
      .exec((res) => {
        const canvas = res[0].node

        //相机 Canvas
        this.drawCamera(canvas)

        // //3D Canvas
        const THREE = createScopedThreejs(canvas) //创建一个与 canvas 绑定的 three.js;传递并使用 THREE 变量
        //renderSphere(canvas, THREE)
        //renderCubes(canvas, THREE)
        renderBoll(canvas, THREE)

        //renderCube(canvas, THREE)
        // //renderModel(canvas, THREE)
      })

每个3d单独写在了一个js类，这里标注一个最简单的

renderBool

export function renderBoll(canvas, THREE) {
  let renderer, scene, camera;
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio); //抗锯齿
  renderer.setClearColor(0x000000, 0);
  renderer.domElement.style.zIndex = "1"; // 

  //场景
  scene = new THREE.Scene();
  let geometry = new THREE.SphereGeometry(0.1, 32, 32);
  let material = new THREE.MeshPhongMaterial({ color: 0xffff00 });
  let sphere = new THREE.Mesh(geometry, material);
  sphere.position.set(0, 0, -1);
  scene.add(sphere);
  let directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  directionalLight.position.set(1, 1, 1);
  scene.add(directionalLight);
  let light = new THREE.AmbientLight(0x404040); // soft white light
  scene.add(light);

  //相机
  camera = new THREE.PerspectiveCamera(43, 1, 0.01, 1000);

  renderer.render(scene, camera);
}

加载不出来，请问怎么能把两个都加载出来（备注：动画复杂，不会同时放在一个js里面的），万分感谢~~~