Jump to content

Implement zoom in zoom out in screenspacecanvas2D


Recommended Posts

I have rendered a 2d scene using one of the json data. For this, I have used 2d rectangles to implement the walls of home planner.


However the zoom in zoom out feature isn't working despite setting arcrotatecam and cameras setposition and target. What am i missing here?

If it doesn't work, I was hoping to implement scaling(as suggested in one of the post by @Wingnut) and re positioning element when user is scrolling in and out.  But not sure whats the best way to re position all the elements though. Any help and suggestion would be great..





Link to comment
Share on other sites

Hi M.  Yeah, you are using a ScreenSpaceCanvas2D (it is not a mesh, but instead, an extra layer of glass on your monitor - glued there). ;) It ignores camera zooming.

Now, if you used a WorldSpaceCanvas2D... then you could move the camera closer/further from IT... because it has a real mesh.  That real mesh is located in canvas.worldSpaceCanvasNode (I think).

Try the WorldSpaceCanvas2D... see if that works better.  Currently, your camera mousewheel IS working, but there are no scene mesh to zoom-in/out.  :)

Hope this helps.  Write back, as needed/wanted.

PS: You know about highlighting code-blocks in the playground editor, and using TAB and shifted-TAB (and control-z oops)... to do nice indenting in your playground code, right?  Just checking.  Forum helpers LOVE nice indenting... makes playground code easier to read.  ;)  Here's a list of MANY playground editor hotkeys.  Party on!

Link to comment
Share on other sites

Nope, not yet. I wouldn't want to deny you the FUN of finding-out why.


Besides, I'm not sure why, yet.  :) I learn at same time as you.

Should probably de-round the corners, check BACKSIDE-of WSC2D canvas, and start playing with origins, X/Y, sizes, etc. 

Goof around, it will start working.  I'm on lunch break... and I'm hungry.  heh

Link to comment
Share on other sites

Uh oh...


A little play in lines 100 and 101... "origin" down-scaling.  (littler numbers)

Line 100 var should be "startFromBottomPosition", maybe.  ;)

Version 17 is even better.  No camera setTarget or .lockedTarget set, so... control-drag moves camera target.  I LOVE that feature.  Let's ya slew-around on floor plans easily.  That, along-with a good-working  camera.wheelPrecision, camera.inertia, and camera.speed values... you can make it perfect.

Link to comment
Share on other sites

You just need to teach it to others, when they ask about it.  Pass it on.  :)

You're making really good progress on your project.  I like that you're trying-out multiple methods.  You're a fun inventor to watch... I enjoy it.

You also tried the "real mesh for wall lines" method (no canvas2d).  I think I mentioned that I like the real-mesh floor plan better.  :)

With these canvas2d rectangles, you can never scale them taller.  With the real mesh floor plan (flat rectangle mesh), you could turn those wall-lines into 3D... by just up-scaling all the Y axes on all the wall "tiles".  With Canvas2d, it will take a much more complicated "convertTo3D()" func.  :)

Link to comment
Share on other sites

hehe, geez, I'm not sure if that is possible.  Gradient fills for rect2d borders... sure.  Dashed fills?  hmm.

I have an idea, though.  Putting Sprite2d with checkerboard texture.... behind solid backgroundColor rect2d, but make sprite a tiny bit bigger than rect2d atop.  *shrug*  maybe.  :)

Link to comment
Share on other sites

Not just dashed lines. it occurred with normal borders as well

and also with tubes.

I am curious how wanaplan(https://www.wanaplan.com/try_plan) have implemented their 2D engine. Its super smooth and do not distort at all. also the zoom in zoom out effect they have used is exactly what we implemented in fabric. I have the same goal here. I tried contacting Feldspar earlier for same. Looks like he is busy :)

Link to comment
Share on other sites

Sometimes mesh and any outlines they might have... suffer from z-fighting, as you likely know.  Two mesh precisely overlapping at some point.


Sorry, I removed one camera, did some weird changes to the other camera, and re-arranged some code.

But here, you can see where the "flicker" is happening.  It happens at all corners, and at the seams between wall tiles.  There are two (or more) mesh overlapping... wherever there is flicker.  During the flicker, the lines disappear occasionally.  There is a good possibility...that if you can eliminate mesh overlap, you will get better borders/outlines.

Wanaplan looks like a context2d canvas.  Essentially, SVG.  Your system is far more advanced... using a context3d canvas.  :)  Wanaplan is surely envious of your system.  :)

Do they even HAVE a convertTo3D button?  Nah.  You are already kicking their butt up & down the eastern seaboard.  heh.

Does everyone like my lines 97-98, trying to get an overhead view from this arcRotateCam?  Those target/position X and Z values must be a TINY BIT different from each other, or else the camera won't render anything.  Goofy cameras.  :)

Link to comment
Share on other sites

For fun, I tried out some various edge-making methods in lines 82-98.  It is currently set for highlightLayer.  Looks strange, but somehow cool.  No borders are seen where any two highlightLayer mesh... connect (between wall tiles).  That is normal - talked about in highlightLayer docs.

Apparently, programmer needs to use TWO highlightLayers and then alternate for each tile in the "wall run" (to view tile seams).  Interesting.  I didn't try that method.  You would need a Boolean flag in your createBox() func... flip-flopping back and forth, targeting highlightLayer1, then highLightLayer2, then back to #1, then back to #2... for each box.  (Did I over-explain enough, there? heh)

This is all kind-of fun, huh?  Blueprint-grade floor plan making, in BJS.  Nice challenge. 

The new Babylon.GUI system might be worth a test, too. That is a context2d-based canvas thing, which makes it super-customizable.  Make your own shapes!  BUT...  when it comes time to convertTo3D()... this system might be THE MOST difficult to do that.

But, you could overload http://doc.babylonjs.com/extensions/guibutton

If you added a button.howTallWhenConvertedTo3d = 15;  Now that button/rectangle is ready to be more-easily converted to 3d, right?  And notice these buttons have a BUILT-IN border feature.  It might be able to do DASHED borders... with a little hacking.  I think Deltakosh RECENTLY finished this system, so it is fresh in his mind.  He MAY be willing to do some customizing... specifically for this project.  Who knows?  I wouldn't ask for the moon and stars, if I were you.  But dashed borders on rectangles/buttons?  A definite possibility.

Notice the LINES class.  Dashed is available!  So, you could change your createBox() func... to make the tiles from 4 dashed lines... or 4 solid lines.  Perhaps find a way to do an easy toggling.  Two base-classes of wallTile... dashedBorder and solidBorder.  Both types of boxes... made entirely of Babylon.gui lines.  Cooooool.  Might work good.  hmm. 

It is an extension, so you might need to load another JS file into your project (same-as for Canvas2D system).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...