Jump to content

Fixing texture repeat


Recommended Posts


I am a newbie to babylon js, and I already have problems. I have loaded textures to my object (stick/bar)  and problem is when I resize my object,  texture resizes too. I tried to apply texture after scaling object, but texture resizes anyway.  I really don't want to create a new texture for every object just because its size changes. 

So, my questions are: 

Is there a way in babylon js to set its size to be fixed?

Or is there a way to set texture to repeat itself rather than scale itself to wrap the object.




Image is attached (mind the upper bar is longer and its texture is scaled <-- that's my problem).


Link to comment
Share on other sites

 Hello Luka_friend :)


Considering you have only a diffuse texture, juste load the texture and set uScale / vScale, create a standard material and apply the material to your bars.

Just play with uScale and vScale to see the effect

var myTexture = new BABYLON.Texture(path, scene);myTexture.uScale = myScale;myTexture.vScale = myScale2;var myMaterial = new BABYLON.StandardMaterial('barMaterial', scene)myMaterial.diffuseTexture = myTexture;myBar1.material = myBar2.material = myMaterial;

Bye :)

Link to comment
Share on other sites

Ok. First of all I appologise for replying so long. I have a lot of work and little free time for by Babylon js project. 


I have tried both of your solutions, and the problem is still the same. The texture always resizes, no matter what I do (yes I set uScale/vScale). 

This time I am posting my code if maybe you see my problem in code. 


Code for creating models and applying textures:

for (var i = 0; i < number1; i++) {            var cylinder = BABYLON.Mesh.CreateCylinder("rebarGrayZAxis" + i, length, this.diameter, this.diameter, this.subdivs, this.scene, false);            cylinder.material = this.textures['RebarGray'];    // APPLYING MY TEXTURE            cylinder.position.z = z1;            cylinder.position.y = y1;            cylinder.position.x = x1 + (i * divisions);            cylinder.rotation.x = Math.PI / 2;        }        divisions = length / number2;        for (var i = 0; i < number2; i++) {            // Rebar name, height, diamTop, diamBottom, tessellation, [optional height subdivs], scene, updatable            var cylinder = BABYLON.Mesh.CreateCylinder("rebarGrayXAxis" + i, width, this.diameter, this.diameter, this.subdivs, this.scene, false);            cylinder.material = this.textures['RebarGray'];  APPLYING MY TEXTURE ()            cylinder.position.z = z2;            cylinder.position.y = y2;            cylinder.position.z = z2 + (i * divisions);            cylinder.rotation.x = Math.PI / 2;            cylinder.rotation.y = Math.PI / 2;        }

And my code for texture load - init:

    var myTexture = new BABYLON.Texture("Images/Textures/rebar.jpg", scene);    myTexture.uScale = 2.0;    myTexture.vScale = 2.0;    textures['Gray'] = new BABYLON.StandardMaterial('barMaterial', scene)    textures['Gray'].diffuseTexture = myTexture;
Link to comment
Share on other sites

Hi Luka,


would be great to see this demo in babylon's playground, this way we can help you better with the issue.  Go here - http://www.babylonjs-playground.com/ , create the scene and press save. The paste the url here and we can work on that together.


I don't see you scaling the objects, I assume the different is in the way the mesh is built. What is the difference between length and width ? This seems to be the only difference between the two cylinder types you are creating.

Link to comment
Share on other sites

Ok. Here is my example URL: http://www.babylonjs-playground.com/#1EJRYH#2


I tried to add my own textures but I didn't know how to upload them, so I just used texture of the tree from official Babylon js website tutorial.  


You can see the difference in the size of leaves. 


And for Raananw: Yes you assumed correctly. What I meant by resizing was setting higher value (length) for 2nd bar the the first one - I created second bar longer than first one (there was no scaling afterward). I appologise for my misuse of words.

Link to comment
Share on other sites

Hi Luka,




This is a simple hack (not really "clean" I might add) to achieve what you wanted. if you are scaling it is much easier - you know exactly the factor you should scale your v(or u) values with.

And no need to apologize, it is simply about understanding what you mean :-)

Link to comment
Share on other sites

Thank you, I really appreciate quick response, but your solution implies that I need 2 standard materials (or in another words each new materal for  bar with different length). So if I want to have 40 bars with different lengths, this would meant 40 new standard materials.   And this is a lot of unnecessary overload of code(not mentioning the additional code if user want's copy bars and then resize them).


But if you have any solution (even crazy one) about how to achieve having only 1 standard material for diffrent bar lengths, I am open for ideas.



Link to comment
Share on other sites

  • 2 years later...
53 minutes ago, NasimiAsl said:


that is a solution like planar ( i don't know why that not work )  but this is alternative solution

Strange...I can't get it to work.  I'm using the latest babylon 3.0 beta (I just re-downloaded the JS file ) and I get an error "BABYLON.CustomMaterial is not a constructor"

Link to comment
Share on other sites

16 minutes ago, NasimiAsl said:

maybe that is cache ? clear your browsers data

Yes, my browser cache is cleared.  console is saying:

BJS - [17:00:43]: Babylon.js engine (v3.0-beta) launched
Uncaught TypeError: BABYLON.CustomMaterial is not a constructor


Link to comment
Share on other sites

ok, I got it running, but it doesn't work the same way for instances:


I have a building which I want to create many instances from.  The buildings will be different height via scaling.y property.  Is there a way for the texture to be fixed scale when using the scaling property?  I don't think there's any other way when using instances

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.

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.


  • Recently Browsing   0 members

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