I’m trying to produce a bent iframe. I understand it is not feasible to contour an iframe, although I have actually been looking into as well as located a feasible option, which is, developing numerous iframes as well as later syncing them.
I have actually obtained a few of the code from this article: 3 js bent (bend) CSS3DObject which offered me actually well, although I can not appear to contour the structures as well as place them appropriately.
Below is the fiddle I have actually produced:
https://jsfiddle.net/niltonsf/2cwq38tb/1/
var scene, electronic camera, renderer, container;
init();.
stimulate();.
feature init() {
scene = brand-new THREE.Scene();.
var createElements= feature( link, departments, moms and dad) {
var w = 100.0/ departments;.
var x = 0;.
for (var x = 0; x < < 100; x += w) {
var el = document.createElement(' iframe');.
el.src = link;.
var x2 = x + w;.
el.style="clip-path: polygon(" + x + "% 0%," + x2 + "% 0%," + x2 + "% 100%," + x + "% 100%);";.
var cssObject = brand-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 < 60) {
cssObject.position.z = (x * -1) * 1 + 10.
} else {
cssObject.position.z = x * -1.
}
parent.add( cssObject);.
}
}
container = brand-new THREE.Object3D();.
createElements(" https://example.com/",24, container);.
scene.add( container);.
electronic camera = brand-new THREE.PerspectiveCamera( 75, window.innerWidth/ window.innerHeight, 1, 10000);.
camera.position.z = 200;.
camera.position.y = 30;.
renderer = brand-new THREE.CSS3DRenderer();.
renderer.setSize( window.innerWidth, window.innerHeight);.
document.body.appendChild( renderer.domElement);.
}
feature animate() {
container.rotation.y +=.005;.
requestAnimationFrame( animate);.
renderer.render( scene, electronic camera);.
}
As you can see in the picture, the red as well as aqua circles are describing completions of the aircraft bend, the structures from the red circle on (till the center of all structures) need to reverse till the eco-friendly circle. On the eco-friendly circle on the structures need to go favorable back to the aqua circle, accomplishing something like:.
