Skip to content
Advertisement

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

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?

Advertisement

Answer

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.

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement