CODEWITHSUNDEEP
javascripthtmlthree.jswebgl
Akhdan Rasiq
Akhdan Rasiq

Reputation: 83

Can we make Plane Geometry with HTML element in webGL?

I want to make a plane with HTML element in webGL and can do an action like real HTML, example: make a button and when we click it, it give us an animation feedback and run the function. I already seek the answear and found html2canvas and rasterizeHTML.js but it just give like an image not natural HTML. Is there any library or any way for me to do like example above. Thanks in advance...

NOTE : For some reason i can't use CSS3DRenderer in Three.js

For example image you can see in the link below:

enter image description here

Upvotes: 3

Views: 974

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30360

If I understand correctly, you're wanting to define an interactive user interface with HTML that is rendered with "3D perspective".

There are a few ways this can be done - one would be to not use WebGL at all, and instead use CSS3 transforms and perspective:

/* Add click handler to demonstrate that elements are still 
interactive, even when orientated in 3D space */
const button = document.getElementById("clickme");
button.addEventListener("click", () => {
  alert("hi!");
});
/* Optional - just for purpose of demonstration */
@keyframes movement {
  from {
    transform: rotateY(20deg);
  }
  to {
    transform: rotateY(-20deg);
  }
}

/* Define a "perspective wrapper" to give
the child elements the effect of 3D perspective */
.perspective {
  width: 500px;
  perspective: 500px;
  perspective-origin: 50% 50%;
  padding: 1rem;
}

.surface {
  /* Style the UI surface using regular CSS */
  background: red;
  padding: 1rem;
  text-align: center;  
  
  /* Orientates the surface in 3D space */
  transform: rotateY(20deg);
  animation: movement 5s infinite;
}
<div class="perspective">
  <div class="surface">
    <button id="clickme">Click me, I'm in 3D and I'm interactive!</button>
  </div>
</div>

This approach retains the benefits of declarative HTML, the existing JavaScript DOM WebAPI, while also giving you smooth, hardware accelerated rendering of that HTML in 3D perspective.

Alternatively, if you are needing to render interactive user interfaces within a canvas element (ie, without CSS3 transforms), you could consider a library like Babylon.js which offers a pretty comprehensive GUI framework.

Here is an example show casing a fairly complex GUI rendered in 3D space, built using the Babylon.js framework - the caveat is that the GUI is defined with JavaScript (rather than HTML) however is more akin to the "Three.js way" of doing things.

Upvotes: 2

Related Questions