开发者

Creating multiple iframes to make a curved plane with synced iframes

I'm attempting to create a curved iframe. I know it is not possible to curve an iframe, although I have been researching and found a possible solution, which is, creating multiple iframes and later on syncing them.

I have got some of the code from this post: Three js curved (bend) CSS3DObject which served me really well, although I can't seem to curve the frames and position them correctly.

Here is the fiddle I have created: https://开发者_StackOverflow中文版jsfiddle.net/niltonsf/2cwq38tb/1/

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);

}

Creating multiple iframes to make a curved plane with synced iframes

As you can see in the image, the red and aqua circles are referring to the ends of the plane bend, the frames from the red circle on (until the middle of all frames) should go backwards until the green circle. On the green circle on the frames should go positive back to the aqua circle, achieving something like:

Creating multiple iframes to make a curved plane with synced iframes

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜