三个js弯曲（弯曲）CSS3DObject

Question

我正在尝试弯曲三个CSS CSS3DObject：

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

但我不能在其上使用弯曲修饰符，就像我在其他网格上所做的那样，例如：

{{1}}

是否有某种方法可以做到这一点或不可能？

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

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.。但是如果你拿这个模板，将url位置/滚动等绑定在那些iframe上，你可以保持它们同步，然后计算出触发位置并旋转它们，你可能有你想要的东西 - 但是它的hacky。

但就像我说的那样，如果你必须使用css3d，我建议使用排列在3d中的2d元素，或者使用画布渲染器+ raycasting按钮点击+ js来实现功能。