三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的功能。