Jump to content

BabylonJS EditControl


satguru
 Share

Recommended Posts

Good idea.

I was going to work on multi selection for my scene editor but never thought about adding that feature to the Edit Control itself. Now, the more I think about it the more it makes sense to have it as part of the Edit Control.

So tentatively the Edit Control will have an additional constructor and this will  take an array of mesh, instead of single mesh as an argument.

Internally it will create an empty mesh and parent that to this array of mesh. Th edit control will then control this empty mesh. Finding the center of  this array would require some thought .

Doable. I will work on this.

BTW

Here is a preview of my live scene editor Vishva.

Will be loading source code soon.

About 8.6 MB , so give it a few seconds to load.

Warning : work in progress :)

http://ssatguru.appspot.com/BabylonJS-Vishva/intro.html

To select an item. "mouse right click" the item

To unselect "esc" key

To move, rotate, scale - "1 2 or 3" key

To focus "F" key (the camera animates between avatar and selected item)

Move avatar using standard "WASD" key or arrow key

 

 

Edited by satguru
changed demo url
Link to comment
Share on other sites

I like the idea to integrate a multi select function!

When I try your Vishva in my Chrome I end up hearing sounds and seeing a menu, but no scene. I have this error in my console:

babylon.2.4-03-23.js:3 GET http://ssatguru.appspot.com/babylonjs/Vishva/webapp/vishva/assets/vegetations/farm_tree_01/farm_trees_rocks_flowers_D.tga 500 (Internal Server Error)h @ babylon.2.4-03-23.js:3r.LoadFile @ babylon.2.4-03-23.js:3o.createTexture @ babylon.2.4-03-23.js:4i @ babylon.2.4-03-23.js:13(anonymous function) @ babylon.2.4-03-23.js:13t.Parse @ babylon.2.4-03-23.js:2i.Parse @ babylon.2.4-03-23.js:13t.Parse @ babylon.2.4-03-23.js:2r.Parse @ babylon.2.4-03-23.js:15t.Parse @ babylon.2.4-03-23.js:14e.SceneLoader.RegisterPlugin.load @ babylon.2.4-03-23.js:15u @ babylon.2.4-03-23.js:15t.Append @ babylon.2.4-03-23.js:15Vishva.onTaskSuccess @ Vishva.js:101task.onSuccess @ Vishva.js:90(anonymous function) @ babylon.2.4-03-23.js:24e.onreadystatechange @ babylon.2.4-03-23.js:3
babylon.2.4-03-23.js:3 Uncaught Error: Error status: 500 - Unable to load vishva/worlds/demos/demo1/../../../../vishva/assets/vegetations/farm_tree_01/farm_trees_rocks_flowers_D.tgae.onreadystatechange @ babylon.2.4-03-23.js:3
rain_ny.jpg:1 GET http://ssatguru.appspot.com/babylonjs/Vishva/webapp/vishva/assets/skyboxes/rain/rain_ny.jpg 500 (Internal Server Error)
babylon.2.4-03-23.js:3 BJS - [17:56:21]: Error while trying to load texture: vishva/worlds/demos/demo1/../../../../vishva/assets/skyboxes/rain/rain_ny.jpgr._ErrorEnabled @ babylon.2.4-03-23.js:3s.onerror @ babylon.2.4-03-23.js:3

 

Link to comment
Share on other sites

@iiceman

Not sure why you are getting that error.

This is running on Google App engine. I checked the server logs, no errors there.

The app is just a bunch of static html pages, javascript and textures. No server side processing.

Wonder if other people are also having issues accessing my site?

Checked with few of my friends. No issues 

 

 

 

Link to comment
Share on other sites

  • 6 months later...
On 10/14/2016 at 3:24 PM, joshcamas said:

oooo I like it! Very lightweight!

Someday I need to get back to my editor hahaha

You should msg me, we should talk cause I think Ive seen your editor you were working on. and I have some resources that may be of great value to you.

And im pretty sure your getting hit by the same storm as me so are prolly stuck inside as well ^_^

Link to comment
Share on other sites

@satguru I love this edit control.

However.....in my editor i ONLY use eulerian values. So i made a speciall version of your edit control v1.0.1

Se attached file. This version is for using ONLY eulerian.

All changes i made are marked "DHZ removed" and "DHZ added"

I also added a method named IsChanging. You can call this medtod with ex:

if(editControl.isChanging()){

console.log('a value is changing);

}

It returns true when you are holding down the mouse AND move the mouse, otherwize it returns false.

I also added so the pointer is changed when you are over the edit control and when you are moving the pointer while holding the mouse down.

In the function doTranslation i fixed a bug:

//this.meshPicked.position.x += dl;//DHZ removed (bug, does not allways give a float value)

this.meshPicked.position.x=Number(this.meshPicked.position.x) + Number(dl);//DHZ added (bug fix with value not being a float)

(Same for the Y and Z axis)

Tested on BJS v2.5 beta

 

Note:

in your documentation on https://github.com/ssatguru/BabylonJS-EditControl

There is a typo.

editControl.isScalingEnabled();

it should be: editControl.isScaleEnabled();

 

EditControl.js

Link to comment
Share on other sites

  • 2 weeks later...

@satguru

No it does not return eulerian values if i use eulerian values, it always gives back rotationQuaternion values.

In my editor i only use eulerian values, and when i tested with YOUR version of Edit control, it gave back  rotationQuaternion values.

After my changes it gave back eulerian values.

You can figure it out by looking what i removed and added in MY version.

I am not here to teach you javascript :) he he, i know you are good at it.

I just wanted to notify you about the issue, so that you might correct it.

Note, try console.log(mesh.rotation)......and you will se it is 0,0,0

Link to comment
Share on other sites

@DigiHz Data

do have few plans

a. multi-selection as discussed somewhere above

b. when I wrote this, line wasn't pickable so I had to put in a bunch of code to get around that. Now that it is, I can simplify the code a bit

c. the UI for rotation can be made better

d. like to add movement in plane (XY, XZ, YZ)

Unfortunately do not have much time, so might be a while before I  get to it :(

 

Link to comment
Share on other sites

  • 2 weeks later...

Hey, amazing little project you got here! I have high hopes for it, and is currently implementing it into my little game editor!
Question: when you add features, are you adding it to both the Vishva demo as well as the github repository? I can't wait to see the multi-selection! :D

Link to comment
Share on other sites

I have a new idea for you @satguru.

You should attach the edit control to the mesh pivot position instead of to the mesh position.

If we move the pivot matrix, then the edit control is not where it should be.

I think that @Dad72 agrre about this to?

I have a playground with pivot here for you to get idea from.

http://www.babylonjs-playground.com/#M0UJB

Link to comment
Share on other sites

When i start thinking a bit more.....i ment to position the edit control at pivot location when we use rotate.

(We not want to show the edit control at the mesh position, we want to show it where the mesh pivot is).

For positioning, the edit control can still be at the mesh position.

Have anything to say about this idea @Dad72 ?

Link to comment
Share on other sites

To use the pivot as rotation axis, change:

EditControl.prototype.renderLoopProcess = function () {
   this.setAxesScale();
   this.theParent.position = this.meshPicked.absolutePosition;
   this.onPointerOver();
};

To this:

EditControl.prototype.renderLoopProcess = function () {
   this.setAxesScale();
   if(this.rotEnabled==true){
      var result1 = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0, 0, 0), this.meshPicked.getPivotMatrix());
      var result2 = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(this.meshPicked.position.x, this.meshPicked.position.y,this.meshPicked.position.z), this.meshPicked.getPivotMatrix());
      this.theParent.position=result2.subtract(result1);
   }else{
      this.theParent.position = this.meshPicked.absolutePosition;
   }
   this.onPointerOver();
};

 

Link to comment
Share on other sites

2 minutes ago, DigiHz Data said:

@joshcamas

Do you have a url to your editor?

Haha yeahh but I haven't worked on it in a while... http://samacstudios.com/projects/SamacEditor/index.html

(click "create project", then go to the maps tab, create a map, create a terrain, and do ya thing!)

Right now I'm working on a mini editor for a little game I'm making... think DOOM 2 Editor and that's basically it xD

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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