How to drag an object on a grid

https://www.babylonjs-playground.com/#1F7RPQ
I am developing a software for home improvement design, and I have a troublesome problem when I put the door and window.
There is a wall in the playground;When the mouse clicks on the wall, a window is created on the wall. The width of the window should be the same as the wall. The height is 1.2 and the length is 1. The window can be dragged and can only be dragged along the wall.

Thank you all.

Hi Zhang. You can read about dragging… by doing a BabylonJS documentation search… for ‘drag’.

https://doc.babylonjs.com/search/?bjsq=drag

Do you need to cut hole in wall… for window? You can watch a video about Constructive Solid Geometry (CSG), here: Babylon.js Advanced Features - Babylon.js Documentation 38:21+.

It seems there is no text tutorial about CSG, but a playground search for ‘csg’ mentioned inside code… finds many demos.

I once “cut” some window-holes in a cylinder… using CSG. And it uses some “godrays” (light scattering post-process), too. It was fun to make! CSG requires some learning-time/patience.

https://playground.babylonjs.com/#UUXLX#33

Know what “snap” or “positional quantizing”… is? Essentially, it is a “rounding” of the drag DROP position… to make dragged/dropped mesh align-with grid lines/graduations. That is probably another good thing to search about. Be sure to include our OLD forum in the search for ‘snap’.

Another great old-forum search… might be for “floorplan”. Others have done such work, and perhaps you can study their methods. You must search for the right terms. Floor, wall, window, corner, door, edgesRenderer, all good terms for finding forum posts and demo playgrounds.

A forum friend and I… once played-with 3d-grid dragging of cylinders… with collision ellipsoids activated and in-view. It uses old-style dragging, and should be updated to newer drag behaviors. No snapping active.

https://www.babylonjs-playground.com/indexStable.html#WWCK0#60

Ok, that should get you rolling for a few months. :smiley: Later, when you advance your testing playground further, we will be here to help with issues. Party on!

1 Like

Thank you, Wingnut. According to your information, the tutorial has been successful.

1 Like

Wingnut, I have another question. I’m going to build the initial model from 3D Max or maya, so what format should I export to better suit babylon?

Hi again, zhang. Good to hear about your dragging successes.

I don’t do much modeling or importing, zhang. I have low experience.

Consider Blender as a possibility. It is a very “active” project, a nice modeler, and very free. It has high-potential to exist forever, so your long-learning won’t ever feel “wasted”. It has a fine .babylon file exporter, but it can also export many other file-types that BabylonJS has importers-for.

ANY “pro” modeler will take time to learn/master. Blender is open-source and can be easily customized with Python code… which is ALSO a powerful and popular thing to learn… WHILE learning Blender. I think it is possible to automate Blender model/scene-generating, using Python. 3DsMax can also do that, using “maxScript”, I believe.

A good docs search… https://doc.babylonjs.com/search/?bjsq=loading

Let’s ask others for comments, too.

Non-Modeler Ways: There is a “God of Dynamic Geometry” around here… named @nasimiasl, and he created a “system” called Geometry Builder (and its sister, Shader Builder). Geometry Builder uses SVG files to “grow” models and worlds. It is not an easy learn, but IF learned… you have BIG power.

Just briefly… here’s some geo-builder URL’s:

I can’t find the Geometry Builder docs at this time, but you might find it in the old forum search results.

Side-topic: Zhang, I found ANOTHER doc that you might be interested-in.
https://doc.babylonjs.com/snippets/house

Ok, let’s listen for more/wiser comments. :slight_smile: Zhang comments welcome ANYTIME, of course.

1 Like

hi need some refactor if you see that useful i can do it fast
*notic it is not depend Geometry or ShaderBuilder i just use them for build fast demo
https://www.babylonjs-playground.com/#UGLGTJ#31

1 Like

1 2
Hello, Wingnut.:joy:
I am here to trouble you again. Can you know what is wrong with my wall?

Hi zhang!

hmm, very strange. No alpha/transparency set on ANY mesh/material, correct?

Perhaps you need to make a playground scene for us… that shows same problem.

Interesting issue, for sure.

Yes, I didn’t set it up.I can’t restore the playground again.Because the playground is normal.This is how I build walls.

。Left, top, right and bottom are calculated when the mouse clicks. It’s a very long decimal number.

If you remove sideOrientation: BABYLON.Mesh.DOUBLESIDE or somehow set it to ONE sided mesh… does the issue change?

Yes, it’s the same.

:slight_smile: You can make little playground with one window and one wall, and turn off mouse/drag.

var wleft = anything;
var wtop = anything;
var wright = anything;
var wbottom = anything;

meshbuild.

We don’t need mouse for playground testing scene. Simple playground. Wall, windowbox, do the csg… see what happens. If you can re-create same problem… save playground, and send us url it gives you after save.

You can do it. Remove all extra “crap” from your code… make playground. c’mon Zhang, we cheer for you. :slight_smile: We get more smart helpers… if we have playground that shows problem.

Oh, and if you are TRYING to do CSG WHILE dragging is moving… don’t do that. :slight_smile: At least wait until drag done, THEN CSG-process. onPointerUp() (you probably know all this already)

https://www.babylonjs-playground.com/#UMWAF7;
Thank you, Wingnut; give me the motivation to continue; this is the playground.

1 Like

Thank you very much; I found out the cause of the bug in the playground.

1 Like

Good to hear, Zhang! Mark thread as solved, please. (thx)