Applying Images/Text to Blender Exports

[Facity]

Hi,

 

I'm fairly new to javascript/blender/babylon as a whole, and I came across this website: https://us2.cupprint.com/personalize/index/index/id/34/selection/prod_27_1502984627_78/idProduct/27/qty/1000/o/47/form_key/KjUBWujiFqxt1AKz/product/27/fixed-quantities/1000/bttg/1/

 

And I would like to mimic the setup they have, I've managed to get as far as creating an object in blender, exporting it out as a babylon file, and inserting it into a scene that shows on a web browser, however doing the next bit is completely lost to me.

 

Is there a simple (simpler) way of doing it compared to how it's done on the above link or am I way out of my depth?

[GameMonetize]

Hey,

They are using babylon.js

You are on the right way already. Next step will be to use GUI to generate a text as texture: https://www.babylonjs-playground.com/#ZI9AK7#1

 

GUI documentation: http://doc.babylonjs.com/overviews/gui

[Facity]

Hi @Deltakosh thanks for your reply, where in this would I add the GUI code? Doesn't seem to matter where I add it, my scene just infinitely loads in my browser.

 

	<script>
        if (BABYLON.Engine.isSupported()) {
            var canvas = document.getElementById("renderCanvas");
            var engine = new BABYLON.Engine(canvas, true);
    
            BABYLON.SceneLoader.Load("", "Render.babylon", engine, function (newScene) {
                // Wait for textures and shaders to be ready
                newScene.executeWhenReady(function () {
			
						
					var camera =  new BABYLON.ArcRotateCamera("ArcRotateCamera", 6, 1, 20, new BABYLON.Vector3(0, 0, 0), newScene);
					
					newScene.activeCamera = camera;  // this line might be removable - done automatically.
					camera.attachControl(canvas);
					
		
										
                    // Once the scene is loaded, just register a render loop to render it
                    engine.runRenderLoop(function() {
                        newScene.render();
                    });
                });
            }, function (progress) {
                // To do: give progress feedback to user
            });
        }
    </script>

 

[RaananW]

hi @Facity,

the first callback is called after the scene was created. this would be the right time to start setting up your GUI. So, Technically, right after function (newScene) {

About our scene not being loaded - do you see any error in the console? 

[Facity]

Hi @RaananW, the console says this:

 

"TypeError: mesh.getScene is not a function [Learn More]  babylon.gui.js:385:111"

[RaananW]

This is your GUI code (which I can't see). Are you using the CreateForMesh() function? What mesh are you providing?

Maybe try reproducing it on the playground, we can help much better.

[Facity]

Hi @RaananW

 

I think i'm just way out of depth here with what I want to achieve, considering I don't know any javascript, I don't really understand the question you've asked me haha.

 

I was pulling the GUI.js from the CDN (CND?) "https://preview.babylonjs.com/gui/babylon.gui.js"

 

If I knew how to load my own render inside the playground I would do that, when I copy my code into the playground, it tells me I need to attach a camera?

 

var camera =  new BABYLON.ArcRotateCamera("ArcRotateCamera", 6, 1, 20, new BABYLON.Vector3(0, 0, 0), newScene);
					
					newScene.activeCamera = camera;  // this line might be removable - done automatically.
					camera.attachControl(canvas);

I thought this was a camera? It's all very confusing for me haha, thanks for the help anyway!

[GameMonetize]

Do you mind trying to use the playground for now? This will be easier for us to see what you are working on

(And it is never too late to learn js ;))

[Facity]

Hi @Deltakosh as I mentioned, I do not know how to load my rendered object from blender into the playground, so I cannot load up my code into the playground for you guys to help.

 

If you can help we do that, I can start using the playground

[GameMonetize]

Just save your object in a github repo, you can then use cdn.rawgit.com to get an url to it:

BABYLON.SceneLoader.Append("https://cdn.rawgit.com/Wingnutt/misc/master/", "Goku3.babylon", scene, function (mesh) {

 

[Facity]

Hi Guys,

 

I have a playground link for you!

 

https://www.babylonjs-playground.com/#XCPP9Y#260

[RaananW]

Hi @Facity,

I made a few changes to your scene, so it will work correctly:

https://www.babylonjs-playground.com/#XCPP9Y#261

createScene was missing (a function that returns a scene). There is also no need to create the render loop. And! It is recommended to use the Append function, so you wouldn't create 2 scenes.

Hope this makes sense and moves you forward!

[Facity]

Thanks @RaananW,

The code you provided doesn't work with my HTML document (but solve that issue at a later date)

To the playground though (https://www.babylonjs-playground.com/#XCPP9Y#262) so I start building a GUI to ultimately apply images/text to the rendered object in the scene.

I think using fullscreen is the better route as it will keep the "artwork canvas" let's call it static instead of moving with the camera, but being a complete javascript novice, how do I move the position of it? say I want it to the left of the render, I though "button1.position.y = 5;" would work but it tells me that button1.position is undefined

[RaananW]

Hi @Facity,

you can read about positioning here - http://doc.babylonjs.com/overviews/gui#position-and-size . For example, notice line 28 - https://www.babylonjs-playground.com/#XCPP9Y#263

[Facity]

Thanks raanan and deltakosh, you've both been a tremendous help!

I'll try and get some stuff working on my own before coming back and bothering you both with trivial stuff

[Facity]

Hi guys,

this thread has been marked as solved? which isn't the case, my original question hasn't been solved, and could be mis-leading to others.

[RaananW]

Howdy,

Someone added the solved tag  

I just removed it - I guess you are right to say that the question asked was not solved. Did you find a solution to your problem?

[Facity]

Not even close lol.

 

I have got absolutely no idea how to achieve the end goal that I want, I'm just currently playing around with GUI elements.

[Facity]

I just had a thought, tell me if I'm wrong,

 

But to achieve what I want to do, I will need to use UV Mapping? So build a canvas with GUI so the user can enter text/images, and link that up to UV Mapping to have it displayed on the object?