Three.js + Fabric.js but with mouse and touch raycast

Resources
23

yeah, its working.
at line no. 72, cnvs variable is not declared, how it is working?
(I also saw this same situation in this examples code: JSFiddle)

25

please reply me

26

thank you so much, your solution is very useful

27

I am trying to create something similar
Can you please help with the adding and manipulation of images and text on the 3d model

28

hi， could you please tell the method of the questios

29

Hi guys!
It’s possible to add a controller (for example some input) to change the size and position of tre objects ?
Any advice is appreciated !

Thanks in advance and kind regards,

Davide

30

yes, u can use getActiveObject() method from fabricjs, then u can set its properties
see these 2 reference
http://fabricjs.com/docs/fabric.Text.html
http://fabricjs.com/docs/fabric.Object.html

1 Like
31

see this too

32

could you please share me the way to attach the image from fabric to the mesh?
thank advanced

33

an image object? you can just do everything fabric.js way

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) {
 //i create an extra var for to change some image properties
 var img1 = myImg.set({ left: 0, top: 0 ,width:150,height:150});
 canvas.add(img1); 
 canvas.renderAll();
});

my pen not working properly now, I’m creating a R3F + Reactjs template and it’ll be available in couple of days

34

hello
i’m working on same type of project
i’ll done the all work but end of the story in mobile devise text or image is not moving.
if can you give some solution or reference about that it will be very help full

36

I am trying to make a jersy configurator just the way you did. Can you guide me regarding the approach.
Currently what I am trying to do is.

  1. Creating a canvas and adding fabric element to it.
  2. Then converting this canvas to texture.
  3. Now adding this as a 2nd texture above the glb model I have.

Is my approach correct?
Can you please Help me with the right approach.

37

Hi @PritamK47 - I could not seem to get the CodePens for these working. Maybe there are some solutions from the others. Not sure how invested in Fabric you are… but we are doing something similar with ZIM - here is a resource. ZIM TextureActives for Interactive Textures and here is one of the six examples: ZIM 015 - TextureActive Interface - Code Creativity

38

pretty interesting, i haven’t got time to try ZIM. this example ZIM 015 - TextureActive Physics - Code Creativity looks cool

1 Like
39

could you please discuss with this problem. I need your help.

40

Hi @Zhu_Zhang - do you mean the original post? What is it that you need help with? Or the ZIM code above where we offer a solution but with ZIM rather than Fabric? If it is ZIM based, perhaps discuss over here ZIM TextureActives for Interactive Textures If it is Fabric.js - I don’t know.

41

what is the problem u’re currently having? if it’s around this thread u can message me directly

1 Like
42

Hi @naonao_naonvl, there is a bug, when you scroll the page, and try to click on element, raycasting stops working. I think, it receives incorrect pointer position. How to solve this? And what is CORRECTION_VALUE?

43

Here is an example: Edit fiddle - JSFiddle - Code Playground, very simmillar to yours. Try to scroll the page a little and you will see offset, resulting incorrect raycasting. Same thing on your tshirt website.

44

I have solved this problem before, contact me, I will check my old projects.