Texture not rendering

This project has been a long slog but I’m so close…

I managed to get my full chair rendering and moving as I want, but now it seems the texture isn’t loading, and when I select it to drag it I get the errors
Uncaught TypeError: Cannot read property 'material' of undefined at app.js:379
and then later,
Uncaught TypeError: Cannot read property 'mesh' of null at app.js:379.

I’ve tried using separate texture loaders etc, and editing. On that line, the variable is INTERSECTED and when I console log it, it’s an object which looks like this:
{uuid: "B91B9B57-35D5-42DF-998E-5FDA69D438B3", name: "", type: "Mesh", parent: Group, children: Array(0), …}

I’ve also tried changing the variable names but to no avail. Any help greatly appreciated!

Here’s my git repo:

I’ve downloaded your repo in order to test your application on my computer. Unfortunately, I get the following error when opening your index.html in the browser:

ReferenceError: Argon is not defined

Please ensure to share a self-contained repository which contains all dependencies. In this way, it’s far easier for community members to debug your application.

1 Like

Gives the same error for me.

@Mugen87 @prisoner849

Sorry, incomplete repo linked facepalm.

This one should be good. There are also running instructions in the main ‘Samples’ file.


The following line in your code is wrong since you can’t add materials to the scene:

Besides, the way you are traversing through importedObject.scene is not correct. First you only add objects to your group array that have a material. That means you miss objects of type Object3D or Group which contain important transformations for the 3D asset (like a scaling or translation). Besides, you also destroy the hierarchy of your glTF asset because all objects in your group array are added as a child to your chair object. In this way, your asset will definitely look different like in the content creation tool where it was originally created.

So I suggest you only perform changes to the material but don’t manipulate the structure of importedObject.scene. Maybe like this

function ( importedObject ) {

      importedObject.scene.traverse( function ( object ) {

          if ( object.material ) {

              if ( Array.isArray( object.material ) ) {

                  for ( var i = 0, il = object.material.length; i < il; i ++ ) {

                      var material = new THREE.MeshBasicMaterial();
                      THREE.Material.prototype.copy.call( material, object.material[ i ] );
                      material.color.copy( object.material[ i ].color );
                      material.map = object.material[ i ].map;
                      material.skinning = object.material[ i ].skinning;
                      material.morphTargets = object.material[ i ].morphTargets;
                      material.morphNormals = object.material[ i ].morphNormals;
                      object.material[ i ] = material;


              } else {
                  var material = new THREE.MeshBasicMaterial({});
                  THREE.Material.prototype.copy.call( material, object.material );
                  material.color.copy( object.material.color );
                  material.map = object.material.map;
                  material.skinning = object.material.skinning;
                  material.morphTargets = object.material.morphTargets;
                  material.morphNormals = object.material.morphNormals;
                  object.material = material;


      } );

      chair = importedObject.scene

      chair.position.x = 0;
      chair.position.y = 0;
      chair.position.z = -100;
      chair.rotation.x = 100;
      chair.rotation.y = 0;
      chair.rotation.z = -45;
      chair.scale.x = .5;
      chair.scale.y = .5;
      chair.scale.z = .5;
      chair.castShadow = true;
      chair.receiveShadow = true;



With this code, I see no errors in the console.

1 Like