我正在尝试弯曲一个三个 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);
有什么办法可以做到还是不可能？
我想要达到的弯曲效果是这样的：
【问题讨论】：
首先，我会考虑不使用完全曲面的可能性，而是使用一系列以弯曲方式排列的扁平方形元素-a la helix mode in this example。这是最简单的方法，从用户体验的角度来看，您不会失去任何价值
根本问题是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 位置/滚动等绑定在一起，您可以使它们保持同步，然后计算出定位和旋转它们的三角函数，您可能拥有您想要的东西 - 但它很hacky .
但就像我说的，如果你必须使用 css3d，我建议使用 2d 元素以 3d 排列，或者画布渲染器 + 光线投射用于按钮点击 + js 用于功能。
【讨论】：