Add mesh to scene with drag&drop

[alina]

Hello!

 

 

I'm pretty new to Babylon and I'm trying to build a home designer. My question would be if I can add an extra scene or some type of sidebar where to deposit my meshes and from where to drag and drop them in my original scene. Or maybe I can connect two canvases and transfer somehow from one to another the meshes?

 

I would be sooo grateful if there is someone who can help me. Thank you!

[Wingnut]

Hi Alina, welcome to the forum! 

 

Yes, that is available, both ways, and more.  But you don't HAVE TO use drag'n'drop to "create" a piece of furniture.  You can click on an icon image of certain type of furniture (on a sidebar, toolbar, or selector list), and as soon as you click, the furniture is placed into the scene and "highlighted"... indicating that it is in "edit mode" and can be drag-positioned and drag-rotated.

 

Yes, you can also "drag" an icon onto a scene... or drag a mesh from one canvas to another (harder).  As the mesh passes from one canvas/scene to another... it will likely need to become a "token" or icon for a moment.  For best perfomance, use 2D images/icons on your sidebar/toolbar and maybe what you drag from sidebar to scene... is a "brush".  A brush is sometimes a 2D picture of the piece of furniture that will be placed IF/WHEN the user clicks the mouse button.

 

Often, an editor will mousedrag a "cursor"... sometimes a half-transparent box.  Drag-around as needed.... then click... and boom, a piece of furniture appears.  That's for furniture INITIAL PLACEMENT.  All positionings and rotations that happen after that... would show the chair itself... being moved/rotated (better for visualizing).

 

Yes, it's fancy and cool to drag real mesh into a scene, but you want your designer to be fast-to-drive, too... and that means a fast gui.  Dragging-around miniature ornate furniture MESH... just to place it into the scene... might get "boggy" and annoying.

 

You'll probably need a grid system.  Certain houseplants are 1x1, others 2x2.  Furniture and decoratives of various sizes... all grid-quantized (all set to size 1, 2, 3, 4 grid units, etc). This is similar to furniture-placing in Sims Medieval, but I don't know if you are familiar with that.

 

Others will have more to say, I'm sure.  MANY people are experimenting with various GUI techniques, right this minute.  At this time, there have been ZERO limitations on the types of gui usable with Babylon.js.  It seems unlimited... and likely is. 

 

But... currently, we do not have the abilities to place a working HTML webpage on the face of a BJS mesh.  We can work-around that. 

[Jaskar]

Hi @alina ,

 

If you want, you can check some home designer made with BabylonJS

 

- http://www.sokrate.fr/3ddesigner/index.html , by Sokrate (@Temechon 's team)

- https://www.wanaplan.com/ , by wanadev (@Feldspar 's team)

 

Hope this will help you (ideas, features...)

 

 

If you have new questions, we'll be here to answer it 

 

Have a nice day!

[alina]

Hi!

 

@Wingnut, I find difficult to click on an icon image and then place the furniture in the scene because I first need to find a free space suitable for my furniture, as so not to put it over another piece of furniture. And that's why I thought about drag'n'drop. I like very much the idea of "dragging" an icon onto the scene and then booom the furniture appears, so I'll give it a try.

 

@Jaskar, I'll check right now this sites. Any new idea is welcomed.

 

Thank you both so much for your answers!!! I'll keep you posted about my progress.

[Jaskar]

If you really want to drag'n'drop, maybe you can create a new camera, set the viewport to print it in a fake sidebar, like the exemple in the white zone on the left "Drag zone"

 

 

Then, you can pick 3D object and drop it in the other view (right view with the scene).

I don't know if my idea can work, but it's an idea 

 

May the force be with you!

[Dad72]

I used to make me Jquery-EasyUI drag drop model on scene. (The same can be done with jQuery-UI)

It must also recover the pickResult to place the object where you want.

 

link mesh

<a href="javascript:void(0)" onMouseover="dragModeles(0);"><div id="DragModele_0" class="modele" chemin="'.$Directory.'/">file.babylon</div></a>

Drag

function dragModeles(index){            $('#DragModele_'+index).draggable({			proxy:function(source){				var n = $('<div class="proxy"></div>');				n.html($(source).parent().html()).appendTo('body');				return n;			},			deltaX:8,			deltaY:5,			revert:true,			cursor:'move',								onStartDrag: function() {				dragged = true;				$(this).draggable('options').cursor='move';			},			onStopDrag: function() {				dragged = false;				$(this).draggable('options').cursor='auto';			}		});}

Drop

            $("#canvasTerrain").droppable({							accept: '.modele',			onDragEnter:function(e,source) {				$(source).draggable('options').cursor='default';							}, onDragLeave:function(e,source) {				$(source).draggable('options').cursor='not-allowed';							}, onDrop:function(e,source) {			                dragged = false;				var Fichier = $(source).text(),							CheminModeles = $(source).attr("chemin");								BABYLON.SceneLoader.ImportMesh("", CheminModeles, Fichier, scene, function (newMeshes, particleSystems, skeletons) {														});								}					});

[Wingnut]

Hey, good comments, gang!

 

 

alina - because I first need to find a free space suitable for my furniture, as so not to put it over another piece of furniture.

 

Actually, that is not true.  You CAN first... find the SIZE of the piece of furniture that the user wants to place.

 

Picture this.  User selects fireplace from sidebar.  A red semi-transparent box is attached to the mouse pointer.  The red box represents the needed size for the fireplace.  The user rotates and positions the box within the scene/floorplan... by draggings, and shift-draggings and control-draggings... and whenever the red box turns green, THAT's when the user can hit the spacebar to PLACE the fireplace.  Only when the "cursor" goes green.  Spacebar will not work if the user has a red cursor box.

 

See how you didn't need to find a place to put the fireplace?  You simply put a box that is the SIZE of the fireplace... on the pointer... and let the user drag it around to see if he/she can find space.   If they cannot make the box turn green (find a good place to put the fireplace) then too bad for them.  They will need to expand their floorplan, I guess. 

 

Just another idea.  Works with wall tapestries, too, at least it does for Sims Medieval.  Its the only "Sims" game I have, so I wouldn't know if the other Sims games are similar.  Um... Sim City... I think it used the actual model as a cursor... but it was "red" until placed.  (if I rem correctly) 

 

Tooltips, tokens, brushes, cursors, I dunno.  I like 'em all. 

[alina]

Hey guys!

 

Thank you again for all your answers. 

 

@dad72, I've been trying to do as you suggested but I'm having some troubles with draggable and droppable functions. It keeps telling me it doesn't recognize them even though I add path to jQuery-UI scripts... I'm working on solving this.

 

@Wingnut, it is a really cool idea. Thank you so much! I want to try this. Do you happen to have an example or an idea of how I could attach the box to the mouse pointer? It would be really helpful.

[Dad72]

My code uses jQuery-EasyUI for drag and drop not jQuery-UI. You will need to convert my code to drag drop jQuery-UI

[Wingnut]

Hi guys

 

  Alina... I don't know how to do that (attach mesh or icon to over-canvas pointer arrow).

 

Let's pretend you divide the task into 2-parts.

 

1. Initial placement - installing the object into the scene

2. Edit mode - drag positioning and rotating an object that has already been placed into the scene.

 

Much depends upon your floorplan grid system.  I wouldn't do drags across the border from toolbar to canvas.  Let's pretend that you decided not to use drag-from-toolbar.    Assuming that is true...

 

Initial placement:

- Click an icon on your toolbar... let's say a chair icon. Let's say it needs 3 x 3 grid tiles of floor. 

- Mouseover your floorplan and 3 x 3 areas of grid tiles... change colors as you mouse-around.

- If the tiles are red, mouse click does nothing.  If the tiles are green, good to go... click to place object.

 

Edit mode:

- Click on an object in the scene.  Maybe make the tiles beneath it turn green (again) to tell users it is being edited.

- Optional control-click many objects and position/rotate them as a group (not much fun). 

- Click anywhere in empty space... to exit edit mode

 

We really never attached an object to the pointer, right?  We just changed the colors-of (or highlighted) grid tiles as the pointer crossed them.  But, you'll need to shoot a picking ray from camera thru pointer to floor grid.  (huh?)  You'll need to know WHERE the pointer is located on the floor grid.  I have very little experience with canvas/scene mouseover techniques, as you can tell.

 

If you DID use a semi-transparent box instead of floor tile coloring, then you get the advantage of showing what the HEIGHT of the object will be.  Here is an example.  You want to place a 10 foot artificial palm tree in the room.  There is also a chandelier in the center of the room, and the user cannot place the tree beneath the chandelier... won't fit.  So, by using a box for initial placement AND edit mode... you can check for intersections (furniture overlap) on all 3 axes, and not just 2 (floor tiles method).

 

And I STILL don't know how to attach a box to the end of the pointer. 

 

I would put a little section of floor grid... off to the side of the main floor grid... and call that "the staging grid".  Click on a toolbar icon, and the furniture appears on the staging grid.  Initial placement - DONE!  YAY! 

 

Now edit mode:  The user drags the furniture off of the staging grid and onto the floorplan grid.  The staging grid (the little side grid) could disappear when no item is staged on it).

 

Just thoughts.  You'll likely get much better ideas from others' editors and from folks who know what they are doing.  I just speculate, mostly. 

[alina]

Thank you all again. 

 

For now, I've decided to add the furniture by selecting it from a list and clicking on the spot from the scene where I want to add it.

 

@dad72, I've added jQuery-EasyUI scripts and there is no change. I really can't figure out what it is that I'm doing wrong.

 

And I have another question and I hope some of you might be able to help me... I use drag'n'drop to move the furniture, but can I drag the margins of the furniture in order to resize it?

[Dad72]

Do you use the good selector : $("selector_here")  Your jquery code be interpreted after the html code be built?

[Jaskar]

Thank you all again.

You're welcome =)

 

And I have another question and I hope some of you might be able to help me... I use drag'n'drop to move the furniture, but can I drag the margins of the furniture in order to resize it?

Maybe you can add a 3D border ?

[Wingnut]

Yeah!  Or maybe use SHIFT-drag or CONTROL-drag... for sizing (scaling).

 

How 'bout voice command?  PARTY!!!  (ahem) 

[alina]

Hey!

 

@dad72, I believe I use the good selector. Look:

 

In HTML:

<canvas id="myCanvas" width="500" height="500"></canvas> <a href="javascript:void(0)" onmouseover="dragModeles(0);"><div id="DragModele_0" class="modele"> <img he="100" width="150" src="~/Images/04318_HD.jpg" /> </div></a>         

In Javascript:

$(function () {    $("#myCanvas").droppable({        accept: '.modele',        onDragEnter: function (e, source) {            $(source).draggable('options').cursor = 'default';        }, onDragLeave: function (e, source) {            $(source).draggable('options').cursor = 'not-allowed';        }, onDrop: function (e, source) {            dragged = false;            var searchMesh = false;            //here I declare the object I want to add        }    });});function dragModeles(index) {    $('#DragModele_' + index).draggable({        proxy: function (source) {            var n = $('<div class="proxy"></div>');            n.html($(source).parent().html()).appendTo('body');            return n;        },        deltaX: 8,        deltaY: 5,        revert: true,        cursor: 'move',        onStartDrag: function () {            dragged = true;            $(this).draggable('options').cursor = 'move';        },        onStopDrag: function () {            dragged = false;            $(this).draggable('options').cursor = 'auto';        }    });}

@Jaskar and @Wingnut, I like both ideas. But can you help me with a sample or an idea of how to get the new size and scale the mesh in real time, please?

[Dad72]

your problem is here: I used a path attribute and the name of the file that I recover to import the model.
 
You:
<a href="javascript:void(0)" onmouseover="dragModeles(0);"><div id="DragModele_0" class="modele" ???> <img he="100" width="150" src="~/Images/04318_HD.jpg" /> </div></a>
 
Me:
<a href="javascript:void(0)" onMouseover="dragModeles(0);"><div id="DragModele_0" class="modele" chemin="./pathMesh/' /">file.babylon</div></a>
 
you must do:  (with code that I show you)

<a href="javascript:void(0)" onmouseover="dragModeles(0);"><div id="DragModele_0" class="modele" chemin="~/Images/" /> 04318_HD.jpg </div></a>

 

Otherwise you have to readjust my code to you.

[alina]

And... I still have some questions, where, again, I hope you might be able to help me.

 

1. Can I make my cube look like a chair or any piece of furniture I want without using Blender or similar programs? Maybe by adding the texture in a certain way... :-?

2. I saw there is a way to import a mesh, but I wasn't able to find a way to export a mesh (something like serialization). Am I missing something or I should start write my own version of serialization?

3. Is there a way to move an object on Y axis too? I mean something like picking it up from the ground.

4. I have a problem when picking a plane type mesh. Look:

var walls = new Array();wallMaterial.emissiveColor = BABYLON.Color3.Magenta();walls.push(createPlane("leftWall", 0, 150, 500, wallMaterial, 1000, 300, newScene, "left"));wallMaterial1.emissiveColor = new BABYLON.Color3.Black();walls.push(createPlane("rightWall", 0, 150, -500, wallMaterial1, 1000, 300, newScene, "right"));

function createPlane(name, x, y, z, planeMaterial, xScale, yScale, newScene, planeSide) {    var plane = BABYLON.Mesh.CreatePlane(name, 0, newScene);    plane.position = new BABYLON.Vector3(x, y, z);    plane.scaling.x = xScale;    plane.scaling.y = yScale;    plane.material = planeMaterial;//other stuff    return plane;}

Well, when I click on magenta color, it should say I've hit leftWall... but it doesn't. It has times when recognizes the correct name, but it has also times when says that I've hit rightWall even thought I've clicked on the magenta color. I can't seem to find any reasonable explanation for this behavior. I really hope any of you is able to figure out what is wrong.

 

Thank you so much again!

[alina]

@dad72, I'm gonna modify the code and come back with the result. Thanks!