我可以在同一个画布中使用fabric.js和three.js吗？

Question

是否可以使用three.js进行3D绘图并将fabric.js添加到同一画布中以进行2D绘图？我喜欢fabric.js处理操作的方式，并希望利用它。在我开始实验之前，我想知道是否有人试过这个？有可能吗？

Answer 1

另一种方法是将FabricJS与离屏画布一起使用，然后将该画布用作屏幕上WebGL / tree.js画布的纹理（图像）源以及您在那里渲染的多边形。

Is it possible to use a 2d canvas as a texture for a cube?

var texture = new THREE.Texture(fabricCanvas);

要与FabricJS画布交互，您必须将WebGL画布的鼠标坐标转换为FabricJS 2D画布的兼容坐标（即3D多边形上的逆3D矩阵转换或类似方法。请参阅{{3}用于处理3D空间中鼠标坐标的一种方法），然后从该转换中生成鼠标事件并将其发送到屏幕外画布。

对FabricJS进行更改后，强制纹理更新：

texture.needsUpdate = true;

Answer 2

您无法使用both a 2D context and 3D context on the same canvas。所以它是可能的，但你必须使用CanvasRenderer和THREE.js。它速度较慢但Fabric.js使用2D上下文，因此如果您打算在同一画布上同时使用它们，则必须使用它。