本文介绍了我可以在同一画布上使用fabric.js和three.js吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

是否可以将three.js用于3d绘图,并添加到fabric.js进行2d绘图到同一画布上?我只喜欢fabric.js处理操纵的方式,并想利用它。在开始实验之前,我想知道是否有人尝试过吗?

Is it possible to use three.js for 3d drawing and add to fabric.js for 2d drawing to the same canvas? I just like the way fabric.js handles manipulation and would like to make use of it. Before I start to experiment, I'm wondering if any one has tried this? Is it possible?

推荐答案

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

An alternative approach is to use FabricJS with an off-screen canvas, then use that canvas as a texture (image) source for your on-screen WebGL/tree.js canvas and the polygon you are rendering there.

(一种处理3D空间中鼠标坐标的方法),然后从该转换中产生鼠标事件,并将其发送到屏幕外画布。

To interact with the FabricJS canvas you would have to convert your mouse coordinate for the WebGL canvas into compatible coordinates for the FabricJS 2D canvas (i.e. inverse 3D matrix conversion on your 3D polygon, or a similar approach. See this example for one way to deal with mouse coordinates in 3D space), then produce mouse events from that conversion and send those to the off-screen canvas.

对FabricJS进行更改后,强制纹理更新:

After changes are made to the FabricJS, force texture update:

texture.needsUpdate = true;

这篇关于我可以在同一画布上使用fabric.js和three.js吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-14 16:21