Three JS need to render two different scenes in two different canvas and need to hide show them on click of button

Questions
, , , ,
1

Good Day,

I m facing one issue in my App.
I m using combination of fabric js and three js. For all faces of my three js cube I have created 6 different fabric canvas and added them as canvas texture to my three js cube all 6 sides.

Here is link ( https://test.harryprint.com/HarryPrint/index.html )

I have created outside view, when user select side of cube and then did changes in it. It will appear on left three js canvas.

Now, I m facing issues in creating the inside view option. Means I want another three js canvas which will show another cube that will render the scene for my inside cube all six sides like I already did for outside cube with different renderer.

I checked examples provided by three js but I don’t think any one of them works for me.

This is refrerence of what I actually want to implement. ( https://app.buyboxes.com/BBAppV3/dashboard/project/Mailer ). Click continue to editor and then try to click inside and outside buttons ( http://prntscr.com/t6u46r )

Please let me know if anybody can help me in this.

Best Regards,
Roop

2

The most naive, but also probably effective and readable way to do it, would be to create two canvases (just copy the one you have) and use display: auto | none in CSS to toggle between them?
Then, depending on which canvas is visible, call proper renderer.render(...) method to update the 3D view.
(You can reuse most of the code for both canvases / renderers, too, since the only difference will the the content of the scene.)

Edit: Something like this https://jsfiddle.net/oy16r2qb. Renderers and canvases are decoupled and you are free to render whichever you need at a time (or all at once.)

1 Like
3

Yeah, It’s what I want. Thanks for this.

Let me try this now with my situation.

4

Hi @mjurczyk, I tried your provided solution. It is working fine. But the three.js file you have used is not supporting new THREE.CanvasTexture to get texture from my required fabric canvas.

Thiis is one I was using ( https://test.harryprint.com/HarryPrint/js/Three.js )

You can see this is working if I load texture as image file like I did here ( https://test.harryprint.com/HarryPrint/tester.html ). It works well.

But when I tried to use texture from another canvas then it is not working. It is showing black color sides of cube. ( https://test.harryprint.com/HarryPrint/index.html ) ( http://prntscr.com/t7ftys )

I also tried with my three js file rather then yours but then it stops working and showing this error in console. ( http://prntscr.com/t7futw )

Can you help me in this?

5

My code was just to show it is possible and an example - all I can suggest is to read through it and try to understand instead of blind copy-paste (the error on the last screenshot is from the setup code not connected to the multiple canvas solution.)

6

seems this is because it takes time to laod the texture from canvas, as it is working if I load texture from images with this same scenario.

Let me dig more into it. Thanks!