How to import a texture 3D from a picture jpg

Hi everyone !,
I have a question, I want to import a 3d model , I have already did it, with assetManager.
But now I want to import his texture from a picture jpg.

I can’t do a playground because the model’s size is too big so I can share with you on a playground (>20 MB) . But I can share the result of my research :
test pull .

I used dynamic Texture because I have found an example here :

So I have looking for something , and I have found rawTexture3D, but I don’t know if it can be used with a JPG, and how to use it. I have search in the doc of babylon, the constructor is : new RawTexture3D(data: ArrayBufferView, width: number, height: number, depth: number, format: number, scene: Scene, generateMipMaps?: boolean, invertY?: boolean, samplingMode?: number, textureType?: number): RawTexture3D
But if I have a picture JPG, data == path to my JPG ?
Or if you have another solution please share it !
Here is the result with a lot of code + blender + format .glb (not what I want but it works) :

Have a nice day !

We currently only support 3d textures from array buffers from the use of RawTexture3d as all our shaders are based on 2d textures except for colorgrading which relies on the raw texture.

Nevertheless we are totally open for any contrib in this area ? and we can definitely assist in the process.

Oh ok, I don’t know how he did , but he convert the .obj in .fbx and he add a code to it then export with blenders. But I have seen on a github page of an user of Babylon : BabylonJS Documentation.
I use the assetManager way but I have a different render :

So I have an .obj , and .mtl in the same folder. I have understood that the mtl is loading automaticaly.

var createScene = function () {
var scene = new BABYLON.Scene(engine);


            //Adding a light

            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);


            //Adding an Arc Rotate Camera

            var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0,0,-5), this.scene)

            camera.attachControl(canvas, true);


           var assetsManager = new BABYLON.AssetsManager(scene);


            var meshTask = assetsManager.addMeshTask("Lacost task", "", "scenes/", "Pull.obj");

            //var meshTask = assetsManager.addMeshTask("Lacost task", "", "scenes/", "Pull.glb");


            meshTask.onSuccess = function (task) {

               task.loadedMeshes[0].position = new  BABYLON.Vector3(0,-3,10);

          var rotation = function(){ scene.registerBeforeRender(function () {

                task.loadedMeshes.forEach(element => {

                    element.rotation.y += 0.01;







            // Move the light with the camera

            scene.registerBeforeRender(function () {

                light.position = camera.position;



            assetsManager.onFinish = function (tasks) {

                engine.runRenderLoop(function () {







            //scene.environmentTexture = new BABYLON.CubeTexture.CreateFromPrefilteredData("scenes/environment.env", scene);

            return scene;


Maybe it is because of one option? Because before the light wasn’t like that, the pull wasn’t shinning like that. And we can see that there are more foldings than on the .glb (cf last picture of my previous comment).

Hmm I have seen that my .glb doesn’t care about my light, if there is scene.environnmentTexture, but my .obj need a light to shine too, so afterall I think it’s just a light problem ?

So obj uses standard materials whereas glb are relying on pbr ones which are totally different pipelines reacting to lights in a different way.

1 Like