Crunch

Hey brice,
It’s actually pretty simple, see my post and puzzle screen shot here.
https://www.soft8soft.com/topic/verge3d-2-12-1-maintenance-update/#post-14994

I created a simple 240 frame camera animation (with keyframe every 40 frames) and gave the user the option to activate each of the 6 segments of the animation forward or backwards depending on scrolling up or down. Basically vey similar to the example you posted.

I also put an option box where you can change things a bit to where you your scroll wheel will move through the animation frame by frame.

https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:04931cc0ad/applications/mousewheel/mousewheel.html

Observations: the default option, scrolling to activate different segments of animation (I had a keyframe every 40 frames) plays rather choppy the first time through but then gets smoother second time around. I remember reading an old thread about ‘prerendering’ onload so the animation plays smoother first time through. Anyone familiar with this please provide your input.

The second option, scrolling through 1 frame at a time, has very jerky playback.
I think now the reason for that might be how I setup the animation (i am not very good at blender or animations in general). I added a ‘track to’ camera constraint (fyi, the camera mode was set to no-controls) to an empty to help keep the camera looking in a general direction as moved it through the scene dropping the occasion keyframe every 40 frames. I never removed the track to constraint. I would imagine that was causing some of the jerky movement. I will create another example but this time ‘bake’ the animation and remove all constraints before exporting.

source puzzles attached

Sweet, DeltaY property! I am ready to start using my scroll wheel to control objects but how do I go about that? Any examples any where?

I did some experiments with the wheel event a while back
https://www.soft8soft.com/topic/scroll-event/

In that experiment, I added a transparent div block (100% width and 100% height) over the whole scene and that way, I could get the event to fire when I used my mouse scrollwheel but the div blocked the whole scene from any other interactions.

Doing the same thing with V2.12.4 I can get the event to fire and returns a -3 if down and +3 if scrolled up, but there has to be a better way? I tried using the Body, Document, and Window as the element in the “on event of wheel” puzzle but couldn’t get anything to fire, let alone return the DeltaY property.

What am I doing wrong? Help!
Thanks

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!

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!

Nam, here is one quick method to reproduce something similar.

https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:ea7b2c37e4/applications/scrolltrigger/scrolltrigger.html

I created a div block over the top of my blender scene (absolute position, 100% width, 100% height, opacity color 0). With that html element there, I can then use the “on event” of “wheel” to trigger the animations sequentially. The “wheel” event doesn’t return whether I scrolled up or down on my mouse (nor did the website in your example) so it moves sequentially from left to right. When it gets to the end, it moves back to the start.

One thing to note about overlaying html over your 3d scene is you can no longer interact with your scene with the mouse (the html element, the div block here, covering 100% of screen, is in the way)

You can switch back to control of your 3d scene by using the HTML set “display” = “none” for the div element, or setting the z-index to a lower number than the 3d scene canvas.

scalare – did you deactivate the “auto start” animation and change the “loop mode” to Once in the objects panel in Blender for EACH drawer object?

i used 7zip to get the app folder size crunched enough to put up here

Scalare – I am a noob at all of this but here is one method.

https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:10a8709e34/applications/drawer/drawer.html

In the demo above, you need to click on the “start” plane object to trigger the animation sequence. I have a 60 frame animation of each of the 3 cubes with time delays between each sequence.. then another time delay before I begin the reverse animations to ‘close’ the drawers.

I have attached a screen shot of my puzzles

You could also put an “after x seconds” puzzle to start the sequence instead of a click on object puzzle. However, if you set it to 5 secs, and say, it takes your app 8 secs to load, then that might cause problems. It could also be triggered by a variety of other methods like hover over (using the ‘all objects selector’ might help there)

What I am learning about Verge3d apps is basically there isn’t anything you can’t do. If you can imagine it, there is likely a way to make it happen. Verge is the final 4th wheel the web needed (html, css, javascript, and now VERGE!)

I am attaching a zip of the source files.

Notes: my camera in scene is set to “no control”.
I click on the Object tab in Blender for each of my 3 cubes (which are animated) and turn “autostart animation” to OFF and set the “Loop” feature to “once”.
Hope this helps !