annotation box and annotation dialog box

bipin, it might seem overwhelming but you are going to need to learn the basics of html and CSS.
I would recommend https://www.w3schools.com

I stuck with it for the past few weeks and its paying off. Here is a quick demo of what I think you are trying to do

https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:e22b7f5039/applications/anndemo/anndemo.html

Click on the cube to bring up a custom html element, the X button will close it.

1.) Go over to the initiation tab (not the main tab*, I have found it best that if I am going to create any HTML elements via Verge3d app it is wise to create them in initit tab versus on the fly in the main tab. Tip: If you don’t want the html element(s) to appear on startup without any user interaction, set the display type to “none”.

2) add a new html div element (see the screen shot)
3) set the innerhtml tag to this (cut and paste what is below into field)

“

4) give the element a name (“alittlewindow” in this example)
5)set the display style to “none” (this makes it hidden when you first launch app)
6) in the main puzzles window… see the attached screen shot.

A couple of pointers, the “&times” text in the button field is actually a code for an “x” symbol.. you can read up on this on the web https://wesbos.com/times-html-entity-close-button/

The background color is “rgba(201, 76, 76, 0.3)’, that last number, the “.3”, is the opacity. Experiment with changing around the values .. it helps you learn. All of this looked like it was written in Greek to me when I first started learning Verge3d a few months ago. Now I am figuring things out and its getting really fun. Good luck!

@Crunch Awesome explanation! thanks a lot for helping out!

Yuri – the bind html element puzzle is blowing my mind. (in a very good way!)

I much prefer using HTML based text in my presentations over text objects created in blender. (while on the topic, I don’t think Verge3d respects the text align feature in Blender. ie, if I type up a small text paragraph in Blender and set text align to center, it works, but once it goes into Verge3d, I lose the center alignment.. fyi, not a major big deal anymore now that I can create and format text via HTML and bind it to 3d objects in my blender scene, thanks to the bind puzzle!)

However, how (where) exactly does it bind the html element to the 3d object?
I was assuming the HTML element has a bounding box, and the bind function moves (snaps), say, the left corner of the element’s bounding box to the x y origin of 3d object..but after a few experiments I am not sure exactly what two points get snapped together for the bind.

Can you please provide some explanation?
Thanks!

Crunch wrote:

here is link to demo

Crunch wrote:

bpin, i already deleted the source files, sorry– but its just the default scene with the puzzles included in screen shot. that should be all you need to re-create