多iframe拼接同步实现曲面平面的定位与弯曲问题

我想创建曲面iframe，但发现无法直接弯曲单个iframe，于是尝试用多个分片iframe同步拼接的方案。参考了相关Three.js弯曲CSS3DObject的思路写了代码，但没法正确实现弯曲和定位效果。

以下是我的代码：

var scene, camera, renderer, container;

init();
animate();

function init() {

  scene = new THREE.Scene();
  var createElements = function(url, divisions, parent) {
    var w = 100.0 / divisions;
    var x = 0;

    for (var x = 0; x < 100; x += w) {
      var el = document.createElement('iframe');
      el.src = url;
      var x2 = x + w;
      el.style = "clip-path:polygon(" + x + "% 0%, " + x2 + "% 0%, " + x2 + "% 100%, " + x + "% 100%);";
      var cssObject = new THREE.CSS3DObject(el);
/*       if (x > 90){
      cssObject.rotation.y = x * 0.4
      console.log(x*-1)
              cssObject.position.z = x * -1
      } else {
        cssObject.position.z = x * 1
      }
       */      
       if (x >= 95 || x <= 1) {
        /* cssObject.position.z = 0 */
       } else if (x > 60) {
        cssObject.position.z = (x * -1) * 1 + 10
       } else {
       cssObject.position.z = x * -1
       }
      parent.add(cssObject);
    }
  }
    container = new THREE.Object3D();
  createElements("https://example.com/",24,container);
    scene.add(container);
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 200;
  camera.position.y = 30;
  renderer = new THREE.CSS3DRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

}

function animate() {
container.rotation.y += .005;

  requestAnimationFrame(animate);
  

  renderer.render(scene, camera);

}

目前的实现效果不符合预期，我想要的是从红圈端向后延伸到绿圈，再从绿圈正向回归到蓝圈的曲面形态（参考目标效果图）。

内容的提问来源于stack exchange，提问作者Nilton Schumacher F