Can babylon do this?

[typohneworte]

Hi,

I would like to create an interactive 3D visualisation for my website. I would like to have an object exported from 3D max to display in a canvas on a html webpage.

I would like to have a form outside of the canvas environment which feeds values into the canvas object displayed. Please see my image mockup for an example of this. So, if a user selects a color 1 value, that color value changes a particular area on the object.

Additionally to the color drop downs, I would like to have a textfield that allows the user to type in a word, and have it display on the object on a specific side (in real time if possible).

For my live version I won't be using a cube, I'll be using a vehicle or something more complex but would like to use this as a starting point.

I'd like the user to be able to rotate the camera around the object, giving the illusion of the object spinning on the spot.

Is this possible using babylon js?

[GameMonetize]

Yes it is possible

did you see this: http://editor.babylonjs.com/ ?

https://github.com/BabylonJS/Editor

[typohneworte]

Great thankyou! Looks very complex!

Do you know or does anyone out there know of a basic tutorial which imports a 3d max object onto a canvas and allows its color to change based on the value of a  dropdown field?

Thanks

[typohneworte]

Thanks anyways

[Boz]

Hi, sorry you get no response here

• Information about 3DSMax exporter to BabylonJS format : http://doc.babylonjs.com/exporters/3DSMax
• Change color of an object : you have to change the color of the material. For example :
  • material.diffuseColor = BABYLON.Color3.Purple()
  • or material.diffuseColor = new BABYLON.Vector3(0.8, 0.4, 0.2);
• Get information from a drop down list :  <select onchange="myFunction(this.value)">. Then in your function you can call material.diffuseColor with the value in parameter

[dbawel]

@typohneworte -

I believe that @Pouet answered most of your questions, and if not please ask again anything specific that you might still need assistance with. As for a drop dowm menu, I highly recommend using either the Dialoge extension, CastorGUI extension, or the bGUI extension as you will be able to quickly add a rich and highly functional graphic interface (certainly a pull down menu); and in using any or all of these, have the flexability to add additional GUI elements as your scene, game, or application requires.

And welcome to the forum. As mentioned above, sorry you didn't receive a response sooner to your questions, as this is not normal on this specific forum; you'll find that this community is the very best in supporting and welcoming anyone at any skill level, and will be there to make certain you're successful with whatever you are using babylon.js to develop.

Cheers,

DB

[typohneworte]

This is a great starting point for me and thank-you for all the help! It's a scary world learning something new.

And I see from various posts out there that I can also add the one submaterial to my object in 3d Max and apply different colors to each sub material id using:

material.subMaterials[1].diffuseColor = BABYLON.Color3.Purple()

The user inputted text field will be a small challenge for me. I'd like the user to be able to type in a text string into a textfield and have the text centered at the top of a circular path on one single side on the 3d object, as it is typed in (see attached) - do you think it's possible?

Thanks again

[dbawel]

@typohneworte -

This is actually very simple in babylon.js by using a dynamic texture. I rely on these often, and they are fantastic for many applications in your scene. The following playground scene was created by someone else on the forum, and shows the power of dynamic textures. If you aren't certain how to adapt this to your specific needs, let us know and this is an easy thing for most users on this forum to set up. And if @Wingnut reas this post, I'm guessing he already has a playground scene functioning specifically to your needs. If not, he'll build one! (We can't keep him in control, ya know?) 

http://www.babylonjs-playground.com/#1BAPRM#31

As I said, this is easy - just wait until you get into the real power of this framework.

Cheers,

DB

[typohneworte]

Very excited about the possibilities for my project. I'll look up dynamic textures and see how far I get with the circular text component.

Can't tell you how grateful I am. Cheers!

[typohneworte]

Okay so I have managed to export the object and display within a html canvas.

I'm not sure if I have the correct syntax, but here it goes... I am trying to load the object by refreshing the page, and have the sub material color change using my code below but with no luck. (for simplicity I am not using drop downs for now)

var subMaterial1 = new BABYLON.StandardMaterial("colormat", newScene);
subMaterial1.subMaterials[1].diffuseColor = BABYLON.Color3.Purple();

The sub material in 3D Max is labelled colormat. I am using a VRay material and I hope this is okay...

 

[dbawel]

I can't see how a VRay material will work. My advice is since you are new to babylon, start simply by creating a plane, box, or sphere solely in JavaScript, and then create a StandardMaterial and apply to your babylon mesh. Once this is rendering the mesh and the material correctly, only then should you begin replacing elements one at a time. Otherwise, you'll not be able to tell what the problem might be, and you'll not truly understand the process of building and rendering scenes in BJS.

It's human nature to want to jump right in and recieve immediate rewards, but you'll find yourself on the forum 2 months from now asking basic questions about structure and syntax. Begin simple and small, and you'll be able to progress quickly. Otherwsie, I guarantee frustration is in your future.

Cheers,

DB

[typohneworte]

Good advice! I'll keep chipping away

Thanks

[typohneworte]

Okay, so I have managed to create a select drop down with colors that on a selection change sends the value to a function which changes the color of the first sub material id of the mesh.

I found the following link which talks about multi materials

https://www.eternalcoding.com/?p=283

This example doesn't work for me as my mesh is not build like this and won't work by dividing up the vertices as seen below:

sphere.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, 900, sphere));
sphere.subMeshes.push(new BABYLON.SubMesh(1, 0, verticesCount, 900, 900, sphere));
sphere.subMeshes.push(new BABYLON.SubMesh(2, 0, verticesCount, 1800, 2088, sphere));

Inside 3D Max I have the object which has a Multi/Sub Material applied to it. 5 different Ids in fact. I'm stuck on how I go about applying individual colors to each material id inside html canvas babylon environment.

Thanks

[typohneworte]

Figured it out with

newMesh.subMeshes[1].materialIndex = 1

and placed inside a switch statement for each color change select.

[dbawel]

Again, I prefer dynamic materials over sub-materials for many application - as I find far less limitations using dynamic materials. If I were you, I would look at accomplishing the same or more specific result using dynamic textures. And many new users worry about overhead and resources using DT, however DTs  are extremely efficient along with the immense power they provide in developing color schemes and textures which sub-materials cannot accomplish. But it all depends on your specific needs.

DB

[typohneworte]

How do I set up a Playground?

It has html dropdowns and radiobuttons attached to it... am I best to send a link instead?

[dbawel]

The best solution is to use an existing Playground scene and modify it to demonstrate you specific issues. It's not necessary and also much simpler for the community to help solve any issues if you leave out GUIs and other elements to make as simple as possible. You can always post a link but this only complicates things and doesn't allow for other developers to make modifications to provide you with a solution and the code used to solve.

DB

[typohneworte]

Thanks, where do I upload babylonmesh.babylon file to?

 

BABYLON.SceneLoader.ImportMesh("", "", babylonmesh.babylon, scene, true);

 

[NasimiAsl]

use github for test

and get raw path

BABYLON.SceneLoader.ImportMesh("", 'https://raw.githubusercontent.com/NasimiAsl/Extensions/master/ShaderBuilder/Samples/', 'female01.obj', scene,(meshes) => {
});

 

[typohneworte]

Okay, I have posted my work onto gitHub.

Link: Here

 

I have two cubes in 3D Max (Cubes will be replaced with models in my final version).

Based on the radio button select, sets the camera target. The camera target position at initial page load is different to when cube01 radio button is selected. It's almost as if the target is locking into a different pivot point...

I would love to add text as displayed below, so that when a user types it is triggered using key up.

Any help is appreciated.

[dbawel]

THis should be easy to re-create in the Playground, and many users will then be able to provide any solutions you need as well as much more for you to consider. I am under a deadline, but will build tis if tou still don't understand how to do when I deliver my nextbuild in a couple of days. Otherwise, if @Wingnut has the time, I'm guessing he wil take a stab at this. However, I could build this in short time, but I'm on a 24/7 schedule until I deliver by Tuesday evening. Message me Wed. if you don;t have your answers by then, and I can build for you as  this is a fairly simple scene. I wish I had the time this evening. Wingy?

Cheers,

DB

[Wingnut]

Hi guys.  Are you volunteering me for things, @dbawel?   

Others make playgrounds too, ya know?  heh.  Usually, I just steal others' playgrounds via playground search... and then modify to fit the issue.

http://playground.babylonjs.com/#21K2OV

Just barely operational, so far.  I'm no expert in scene loading.  As we can see by @typohneworte .babylon file, there is a "clearColor":[0.0,0.0,0.0], so this is a SCENE load and not a meshes load.  The differences between the two actions... is blurry to me.

Line 14 in that PG demo... loads the boxes (cubes) just fine, but there is no scene.clearColor set to black when loading that way.

If I use line 15 instead (the append method)... it just plain doesn't finish loading.... but I am new to the .append instruction, and could be doing it wrong.

@JCPalmer suggests that we avoid using SceneLoader.Load, but... maybe that is the only way to get BJS to treat the .babylon file... as a "scene".  (and thus give us the black clearColor).  I need to do some more learning.

The camera seems to be using red box 0 (or origin 0, 0, 0) as its target, by default.  Normal... especially when no camera comes-in with the import.

Maybe some scene loading experts can clean up my mess.  SceneLoader importMesh, load, append?, I'm not sure which to use, here.  The only version of 3D Max I have... is v10, not new enough for our Max exporters (I'm a poor man.).  So... hmm... my hands are somewhat tied on this.

Anyway, we have a playground to play-with now, so maybe we can advance this quickly.  Fellow helpers, climb aboard, please.  I need to find some morning coffee, now.  brb. 

[JCPalmer]

Append can do anything Load can do.  Load just calls Append.  Sorry I have no comment in general on a 20+ post topic.  Too much to read to catch up.  When appending multiple .babylon files, you should either make the handful of scene properties the same across all files, or just set them afterward.  Last file loaded wins.

Here is how these are set in Blender:

[typohneworte]

Wow, my first playground!

Not sure how easy this will be as i'll have roughly 10 html elements including radiobuttons and dropdowns all being used to change the appearance of these boxes.

I have made changes to display a text string (from my input text field) but in doing so I have lost one of the boxes! Can anyone help me find it?

If the text does reappear, is it possible to have this text curve around an invisible circular path?

http://playground.babylonjs.com/#21K2OV#1

(I have added lines #27-#39)

Thanks for starting the playground

[dbawel]

@Wingnut -

Thank you for always being reliable in helping others to achieve their goals. I appriciate that you allow me to help represent your talents and support of others on the forum (especially newbies.) Receiving a response from you is someting I would equate with the right of passage in a kind of babylon.js baptism - at least that's the way I look at things.

It is a generous gesture to offer your help to others, and I'm certain that you are due some substantial karma which I hope will be returned to you in droves. I almost always learn from each post you contribute to, and hope this continues as long as possible while BJS continues to grow and will eventually become much greater that the sum of all parts. I believe both you and I are very lucky to have been here from nearly it's inception, and are able to help others navigate through the areas we once found difficult ourselves. Karma is a real thing, and you have accumulated plenty. As previously mentioned, I hope that both you and I, as well as others can get together and meet soon to share a "brew" as well as some of the "war" stories we most likely have in common.

We're all glad you're here, and have become an essential piece of the much larger picture - which is quickly evolving ito the best of the best in WebGL frameworks. I simply got lucky as I often do, however, am not at all certain how or why. I'm simply grateful, as this journey has been a "game" changer for me - no pun intended.

DB