2016-03-31 20 views
0

3d çizim için üç.js kullanmak ve 2d çizim için aynı kanvasa fabric.js eklemek mümkün mü? Ben sadece fabric.js'nin manipülasyonu ele alış şeklini beğenirim ve bundan faydalanmak isterim. Denemeye başlamadan önce, kimsenin bunu denediğini merak ediyorum. Mümkün mü?Aynı kanvasta fabric.js ve three.js kullanabilir miyim?

+0

Hayır, ama tasarım gereksinimlerine bağlı olarak ayrı bir 2D tuval ile 3D tuval paylaşımlı biçimde - veya vize-versa. – markE

+0

Bu tavsiyeyi gördüm, ancak bu proje 2d kanvasının (metin) 3d sahnede olmasını gerektirecek. – leekei

cevap

1

both a 2D context and 3D context on the same canvas'u kullanamazsınız. Yani bu mümkündür, ancak CanvasRenderer'u THREE.js ile kullanmak zorundasınız. Bu daha yavaştır, ancak Fabric.js bir 2B içerik kullanır. Bu nedenle, her ikisini de aynı tuvalde kullanmayı düşünüyorsanız bunu kullanmanız gerekir.

+0

Teşekkürler Mike ... Bunu kontrol edeceğim. – leekei

+0

Örnek programatik kod alabilir miyim? – Mullainathan

+0

@Mullainathan No. “CanvasRenderer” bağlantısını takip edin ve orada örnek kod var. –

2

Alternatif bir yaklaşım, FabricJS'yi ekran dışı bir tuval ile kullanmaktır, ardından bu tuvali, ekranınızdaki WebGL/tree.js tuvaliniz ve orada oluşturduğunuz çokgen için bir doku (resim) kaynağı olarak kullanın. FabricJS etkileşimde bulunmak için

var texture = new THREE.Texture(fabricCanvas); 

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

Eğer fare 3D poligonunda (FabricJS 2D Tuval için uyumlu koordinatlara içine WebGL Tuval için yani ters 3D matris koordinat dönüştürme dönüştürmek zorunda kalacak tuval veya Benzer bir yaklaşım. 3D uzaydaki fare koordinatlarıyla uğraşmanın bir yolu için this example'a bakın, daha sonra bu dönüşümden fare olayları üretin ve bunları ekran tuvaline gönderin. değişiklikler FabricJS için yapıldıktan sonra

, doku güncelleştirmesini zorlamak:

texture.needsUpdate = true; 
İlgili konular