Facity

Applying Images/Text to Blender Exports

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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 :(

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.