Adding a secondary texture to a model #99

forthtemple · 2025-09-06T10:43:07Z

forthtemple
Sep 6, 2025

I have been using wasabias threes_dart and I have a terrain that I created with blender with many different groups and I apply a secondary texture based upon the group name eg if its a wall, the ground, the ground outside like below:

      mesh?.traverse((object) {
        if (object is THREE.Mesh && object.material is THREE.Material ) {
            var  mat=object.material?.clone();
            if (object.name == "surfaceaerial") {
               object.material= [mat, mataerial];
            } else if (object.name.contains("surface")) {
               object.material = [mat,surface];
            }
          }

but this code doesnt work in three_js so I use the three_js THREE.GroupMaterial

      mesh?.traverse((object) {
        if (object is THREE.Mesh && object.material is THREE.Material ) {
            var  mat=object.material?.clone();
            if (object.name == "surfaceaerial") {
               object.material= THREE.GroupMaterial([mat, mataerial]);
            } else if (object.name.contains("surface")) {
               object.material = THREE.GroupMaterial([mat, surface]);
            }
          }

but when I run this code I get the following error

[ERROR:flutter/runtime/dart_vm_initializer.cc(40)] Unhandled Exception: Null check operator used on a null value
#0      WebGLShaderCache.update (package:three_js_core/renderers/webgl/web_gl_shader_cache.dart:15:59)
#1      WebGLPrograms.getParameters (package:three_js_core/renderers/webgl/web_gl_programs.dart:111:22)
#2      WebGLRenderer.getProgram (package:three_js_core/renderers/web_gl_renderer.dart:1273:37)
#3      WebGLRenderer.setProgram (package:three_js_core/renderers/web_gl_renderer.dart:1486:17)
#4      WebGLRenderer.renderBufferDirect (package:three_js_core/renderers/web_gl_renderer.dart:635:28)
#5      WebGLRenderer.renderObject (package:three_js_core/renderers/web_gl_renderer.dart:1256:7)
#6      WebGLRenderer.renderObjects (package:three_js_core/renderers/web_gl_renderer.dart:1216:9)
#7      WebGLRenderer.renderScene (package:three_js_core/renderers/web_gl_renderer.dart:1096:35)
#8      WebGLRenderer.render (package:three_js_core/renderers/web_gl_renderer.dart:943:7)

I am wondering what I might be doing wrong and if there is a way to add a secondary texture to an existing model like in three_dart?

Answered by forthtemple

Oct 19, 2025

I solved it. If I add

                object.geometry?.addGroup(0,object.geometry!.attributes['position'].length, 0);
                object.geometry?.addGroup(0,object.geometry!.attributes['position'].length, 1);

like in the code below it works and get secondary textures:

      mesh?.traverse((object) {
        if (object is THREE.Mesh && object.material is THREE.Material ) {
            var  mat=object.material?.clone();
            if (object.name == "surfaceaerial") {
                object.geometry?.addGroup(0,object.geometry!.attributes['position'].length, 0);
                object.geometry?.addGroup(0,object.geometry!.attributes['position'].length, 1);
               object.mater…

View full answer

Knightro63 · 2025-09-06T16:36:30Z

Knightro63
Sep 6, 2025
Maintainer

Hi @forthtemple ,

The renderer in three_dart and three_js is now completely different. So there could be something I missed when updating the renderer. The error looks to be related to that or if you are using a shader material that has an issue.

I changed the objects material property from being a dynamic to only accept Material classes. This was more for users experience, so using Group material fixes this issue.

If you could provide an example of the model I could look to see how to resolve the issue.

0 replies

forthtemple · 2025-09-07T01:04:06Z

forthtemple
Sep 7, 2025
Author

Thanks for offering to help. The blender file I use is terrain.blend under the directory
https://github.com/forthtemple/openworlddart/tree/main/examplesecondtemple/blender/terrain

I convert the blender file to OBJ format to be loaded into my game because OBJ preserves the mesh names which I use to set the secondary textures. I found for glb files the mesh name isn't preserved. The terrain.obj file is under the directory:
https://github.com/forthtemple/openworlddart/tree/main/examplesecondtemple/assets/models/temple

The full code I use for three_dart to add the secondary texture is as follows:

    var manager = THREE.LoadingManager();
    var mtlLoader = THREE_JSM.MTLLoader(manager);
    mtlLoader.setPath('assets/models/temple/');
    print("loading terrain materials");
    var materials = await mtlLoader.loadAsync('temple.mtl');
    print("loaded terrain materials");
    await materials.preload();
    var loader = THREE_JSM.OBJLoader(null);
    loader.setMaterials(materials);
    Group mesh = await loader.loadAsync('assets/models/temple/temple.obj');

    // Create a detail texture applied to the terrain surface only
    print("load terrain detail");
    THREE.Texture textureii = await THREE.TextureLoader()
        .loadAsync('assets/models/temple/detailmap.png');
    textureii.wrapS = THREE.RepeatWrapping;
    textureii.wrapT = THREE.RepeatWrapping;
    textureii.needsUpdate = true;
    textureii.repeat.set(2, 2);

    var mat2 = new THREE.MeshBasicMaterial({
      'map': textureii,
      'transparent': true,
      //  'alphaTest': .5
    });

    THREE.Texture textureaerial = await THREE.TextureLoader()
        .loadAsync('assets/models/temple/detailmap2.png');
    textureaerial.wrapS = THREE.RepeatWrapping;
    textureaerial.wrapT = THREE.RepeatWrapping;
    textureaerial.needsUpdate = true;
    textureaerial.repeat.set(20, 20);

    var mataerial = new THREE.MeshPhongMaterial({
      'map': textureaerial,
      'transparent': true,

    });

    scene.add(mesh);
    OPENWORLD.Space.init(mesh, scene);

    mesh.traverse((object) {
      if (object is Mesh && object.material is THREE.Material) {
        THREE.MeshPhongMaterial mat = object.material as THREE
            .MeshPhongMaterial;

        if (mat.alphaMap != null) mat.alphaMap = null;

        mat.shininess = 0;

        mat.emissive = THREE.Color(0x000000);

        // Only apply texture to surface and not walls, roof etc
        if (object.name=="surfaceaerial") {

          object.material = [mat, mataerial];

        } else  if (object.name.contains("surface"))
          object.material = [mat, mat2];
      }
    });

2 replies

Knightro63 Sep 9, 2025
Maintainer

Hi @forthtemple ,

For group materials you need to have a mesh with a group. Like BoxGeometry. I think this is the issue. I will be updating the renderer to prevent the error with the group material with no group mesh. It will use the first material in the group if it exists. I have not looked at three_dart renderer to see what it does but if it follows three.js it should be the same.

forthtemple Sep 10, 2025
Author

Thanks. I'll wait for you next update

Knightro63 · 2025-10-03T19:36:30Z

Knightro63
Oct 3, 2025
Maintainer

Hi @forthtemple,

I have fixed the issue in the newest update. Please use three_js: ^0.2.5.

0 replies

forthtemple · 2025-10-04T06:33:41Z

forthtemple
Oct 4, 2025
Author

Thanks for looking into it. I've updated to 0.2.5 but unfortunately I'm not seeing the secondary texture but it is no longer raising an error. Initially saw I saw a lot of flickering when I added a secondary texture but this reduced when I used

object.material?.needsUpdate=true;

after assigning the groupMaterial to the mesh, though the flickering still appears occasionally. I've attached a video showing it flickering.

Untitled.video.-.Made.with.Clipchampsmall.mp4

0 replies

forthtemple · 2025-10-19T11:19:02Z

forthtemple
Oct 19, 2025
Author

I solved it. If I add

                object.geometry?.addGroup(0,object.geometry!.attributes['position'].length, 0);
                object.geometry?.addGroup(0,object.geometry!.attributes['position'].length, 1);

like in the code below it works and get secondary textures:

      mesh?.traverse((object) {
        if (object is THREE.Mesh && object.material is THREE.Material ) {
            var  mat=object.material?.clone();
            if (object.name == "surfaceaerial") {
                object.geometry?.addGroup(0,object.geometry!.attributes['position'].length, 0);
                object.geometry?.addGroup(0,object.geometry!.attributes['position'].length, 1);
               object.material= THREE.GroupMaterial([mat, mataerial]);
            } else if (object.name.contains("surface")) {
                object.geometry?.addGroup(0,object.geometry!.attributes['position'].length, 0);
                object.geometry?.addGroup(0,object.geometry!.attributes['position'].length, 1);
               object.material = THREE.GroupMaterial([mat, surface]);
            }
          }``

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Adding a secondary texture to a model #99

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 5 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Adding a secondary texture to a model #99

Uh oh!

Uh oh!

forthtemple Sep 6, 2025

Replies: 5 comments · 2 replies

Uh oh!

Knightro63 Sep 6, 2025 Maintainer

Uh oh!

forthtemple Sep 7, 2025 Author

Uh oh!

Knightro63 Sep 9, 2025 Maintainer

Uh oh!

forthtemple Sep 10, 2025 Author

Uh oh!

Knightro63 Oct 3, 2025 Maintainer

Uh oh!

forthtemple Oct 4, 2025 Author

Uh oh!

forthtemple Oct 19, 2025 Author

forthtemple
Sep 6, 2025

Replies: 5 comments 2 replies

Knightro63
Sep 6, 2025
Maintainer

forthtemple
Sep 7, 2025
Author

Knightro63 Sep 9, 2025
Maintainer

forthtemple Sep 10, 2025
Author

Knightro63
Oct 3, 2025
Maintainer

forthtemple
Oct 4, 2025
Author

forthtemple
Oct 19, 2025
Author