问题
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?
回答1:
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.
Is it possible to use a 2d canvas as a texture for a cube?
var texture = new THREE.Texture(fabricCanvas);
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.
After changes are made to the FabricJS, force texture update:
texture.needsUpdate = true;
回答2:
You can't use both a 2D context and 3D context on the same canvas. So it is possible but you'll have to use the CanvasRenderer with THREE.js. It's slower but Fabric.js uses a 2D context so you'll have to use it if you intend to use both on the same canvas.
来源：https://stackoverflow.com/questions/36343358/can-i-use-fabric-js-and-three-js-in-the-same-canvas