Integration of html with three.js

Questions
,
1

Hi,

I am wondering if anyone has any ideas for how to integrate three.js with the rest of a html and css and javascript website. I just began to test and study three.js, and wonder if it is possible to integrate. or is a three.js window a big webGL player like the Unity Game Engine window?

here is a test project to illustrate what im talking about:
universalquadrants.com – this is a html and css and javascript website.

My first three.js app – this is my first three.js test: a counter-rotating star tetrahedron.

what i want to do is put the star tetrahedron in the center circle of the quadrants homepage. Is that possible? or is three.js a locked out 3d webGL window like Unity webGL?

if its not possible in three.js; then is there any other code package where we could integrate 3d with the rest of the site?

alternately; is it possible to put the three.js scene in a window beside the html. so in that case i could have a interface like the quadrants homepage; then the 3d beside it; and the buttons of the html affect the 3d scene.

thank you

2

if you just have a single thing and you want to place it somewhere, or some kind of html menu or overlay on top of or below your scene, no problem at all because <canvas> is a regular dom element, you can place anywhere relatively or absolutely with just csss.

it only gets complex if you have multiple views, because doing that with multiple canvases isn’t feasible. something like this: View tracking - CodeSandbox for that you would need gl.skissor which cuts the canvas into pieces.