css - 三个js flex (bend)CSS3DObject

Question

我正在尝试 flex 三个 js CSS3DObject:

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

但我不能像在其他网格上那样使用 flex 修改器，例如:

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

有什么办法可以做到吗？

我想实现的 flex 效果是类似这样的:

Answer 1

首先，我会考虑不使用完全曲面的可能性，而是使用一系列以 flex 方式排列的平面方形元素- a la helix mode in this example .这是最简单的方法，从用户体验的 Angular 来看，您不会失去任何有值(value)的东西

潜在的问题是它看起来像 CSS3dobject 确实继承了 Object3d 元素，但是 css3d 渲染器并没有在任何地方使用几何，它只是对css 元素，因此对几何体执行变换不会对 css 元素产生影响，因为渲染器仅使用相机信息来变换和移动 css 元素。它需要宽度和高度，然后移动它们。一切都是飞机。

如果您尝试使用 iframe 因为您想重新使用另一个网站，您可以尝试使用 CSS clip parameter将 iframe 拆分为一系列 block (使用不同的剪辑参数添加到 dom 的重复元素)，然后将其排列成圆柱形。 I made a fiddle with a basic gist of what you could try. .但是如果你使用这个模板，将 url 位置/滚动等绑定(bind)到这些 iframe 上，你可以让它们保持同步，然后计算出定位和旋转它们的触发器，你可能拥有你正在寻找的东西 - 但它很笨拙.

但正如我所说，如果您必须使用 css3d，我建议使用以 3d 形式排列的 2d 元素，或者 Canvas 渲染器 + 用于按钮点击的光线转换 + 用于功能的 js。