How insert three.js in table cell

Questions
1

Hello,
I am trying to insert a three.js component inside a div table. I can’t do it because the component does not inherit the width and the height of the parent div and
changes the behavior of neighboring divs after it is entered. I tried to replace threejs component with
a canvas component and have a right behavior. Blu and red div
must remain of the same size and box should resize when I change the size of the windows divTableLayout.zip (65.9 KB)

2

I don’t think asking people to download your .zip file is a good way to ask for help, given that it could contain a virus, and it’s a risk that people giving help shouldn’t have to take. Try putting a working example in https://jsfiddle.net/ or https://codepen.io/ instead.

4 Likes
3

it could contain a virus, and it’s a risk that people giving help shouldn’t have to take

Zip files can’t be viruses, as far as I know. The files inside them can, of course. But in the case, there’s just css, js, HTML and gif files. So you can always safely open a zip file. Just take care of running any executables inside.

In any case, this file is fine so I won’t delete it. But as @marquizzo says, it’s better to use codepen or similar to create a live example.

4

I think the issue is if you rename a file into .zip, but agreed it would be a virus in that case not a zip file.

5

ok sorry you are right. I insert two example in jsfiddle:

First example is the correct behavior with a canvas position in the center:
canvas and canvasContainer have the same size and resize is ok.

https://jsfiddle.net/alessio211734/9kpvLcx3/1/

Second example I try to insert a three.js component in the center I get a different behavior: the component does not fill the center div and does not resize. canvas and canvasContainer have the different size and resize is not ok. Red and blue div should stay fixed.

https://jsfiddle.net/alessio211734/s8yc9kL6/5/

6

The resize is unfortunately not okay since your canvas always has the same resolution no matter how big or small it is. You can achieve the same behavior in your three.js demo by avoid using setSize(). However, this is no good approach since a resize should actually update the resolution of the renderer’s canvas.

I suggest you study the fourth code sample of this stackoverflow post. It might be a good basis for your own app.

1 Like