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
@Mugen87 @prisoner849
Sorry, incomplete repo linked facepalm.
This one should be good. There are also running instructions in the main ‘Samples’ file.
https://github.com/hannahjn/samples/tree/master/code/draggablecubes
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;
boxScene.add(chair);
objects.push(chair);
},
With this code, I see no errors in the console.
1 Like