三JS弯曲（弯曲）CSS3DObject

Question

我试图弯曲三个JS CSS3DObject：

var element = document.createElement('iframe'); 
element.src = 'https://example.com/'; 
var cssObject = new THREE.CSS3DObject(element); 

，但我不能用弯曲修改就可以了，就像我在其他网做的，如：

var dir = new THREE.Vector3(0, 0, -1); 
var ax = new THREE.Vector3(0, 1, 0); 
var ang = Math.PI/4; 
modifier.set(dir, ax, ang).modify(mesh.geometry); 

有没有办法做到这一点，或者这是不可能的？

我想实现的弯曲效果类似于此：

Answer 1

首先，我会考虑使用不完全曲面的可能性，而是一系列安排在平面方形元素弯曲的方式 - a la helix mode in this example。这是最简单的方法，你不从UX的角度

失去任何有价值的东西根本的问题是，它看起来像CSS3dobject不继承Object3d元素，但css3d渲染器不使用任何地方的几何形状，它只是对css元素执行矩阵变换，因此执行几何变换将不会对css元素产生影响，因为渲染器仅使用摄影机信息来变换和移动css元素。它需要宽度，高度，然后移动它们。一切都是飞机。

如果您要做的是使用iframe因为您想重新使用另一个网站，可以尝试使用CSS clip parameter将iframe拆分为一系列块（添加到dom中的重复元素使用不同的剪辑参数），然后将其排列成圆柱形。 I made a fiddle with a basic gist of what you could try.。但是，如果你使用这个模板，在这些iframe上绑定url位置/滚动等，你可以让它们保持同步，然后找出trig来定位和旋转它们，你可能有你想要的 - 但它的hacky 。

但是就像我说的，我会建议使用配置在3D 2D元素，如果你要使用css3d，或画布渲染+光线投射的按钮点击+ JS的功能。