同じキャンバスにfabric.jsとthree.jsを使用できますか？

Question

3D描画にthree.jsを使用し、同じキャンバスに2D描画用fabric.jsを追加することはできますか？私はfabric.jsが操作を処理する方法が好きで、それを利用したいと思います。私が実験を始める前に、誰かがこれを試したことがありますか？出来ますか？

Answer 1

both a 2D context and 3D context on the same canvasは使用できません。したがって可能ですが、CanvasRendererをTHREE.jsと一緒に使用する必要があります。遅くなりますが、Fabric.jsは2Dコンテキストを使用するため、同じキャンバスで両方を使用する場合は、使用する必要があります。

Answer 2

代わりに、オフスクリーンのキャンバスを使用してFabricJSを使用し、そのキャンバスをスクリーン上のWebGL/tree.jsキャンバスのテクスチャ（画像）ソースとして使用し、そこでレンダリングしているポリゴンを使用します。 FabricJSと対話する

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

var texture = new THREE.Texture(fabricCanvas); 

あなたの3Dポリゴン上すなわち逆の3Dマトリクス変換（あなたのマウスがFabricJS 2Dキャンバスのために互換性のある座標にWebGLのキャンバス座標に変換する必要がありますキャンバス、または同様のアプローチです（3D空間でマウス座標を扱う方法の1つはthis exampleを参照してください）。その変換からマウスイベントを生成し、それらをオフスクリーンキャンバスに送ります。変更がFabricJSに行われた後

、テクスチャ更新強制：

texture.needsUpdate = true;