Get geometry and material of 3D Model – Three.js

August 24, 2022

I am attempting to make one 3D model orbit another, but as soon as I change my mesh from a wireframe box to a 3D Model’s geometry it disappears.

//this is inside a GLTFLoader.load (glftLoader.load('<model path>', (gltfScene) => {)

var geometry = new THREE.BoxGeometry(1, 1, 1);
            
var material = new THREE.MeshBasicMaterial( {
  color: 0xffffff, 
  wireframe: true
});

let pivot = new THREE.Object3D()
pivot.rotation.z = 0;
gltfScene.scene.add(pivot);

//let mesh = new THREE.Mesh(geometry, material); WORKING LINE
let mesh = new THREE.Mesh(gltfScene.scene.geometry, gltfScene.scene.material);
mesh.position.y = 2;
pivot.add(mesh);

What am I doing wrong? I get no errors, I have a feeling it may be to do with the scale of the 3D model but I’m unsure. Am I getting the geometry and material properties correctly?

>Solution :

let mesh = new THREE.Mesh(gltfScene.scene.geometry, gltfScene.scene.material);

I suppose this line breaks your code since gltfScene.scene (the result of GLTFLoader‘s onLoad() callback) is an instance of THREE.Group which has no material or geometry property.

A glTF asset can hold more than one mesh so if you really want to extract the geometries and materials from it, you have to traverse through gltfScene.scene and process all meshes.