Blender JSON export adding vertices - THREE.JS

Question

Within blender i have a simple model. When i import this model within THREE.js it seems to have gained faces and vertices. All images below. I am trying to get the middle circle face as a single face so that i can apply an image to it within THREE.js. Also is there an easy way to name a face within Blender so that it can be targeted within THREE?

Thanks all.

Model within blender:

Model within THREE.js:

Blender export settings:

Importing method on THREE.js

loader.load('models/poi.json', ( geometry ) => {
    console.log(geometry.faces.length); // 386 faces  
    let mesh = new THREE.Mesh( geometry, materials );
    scene.add(mesh);
});

Mugen87 Mugen87 · Accepted Answer · 2018-10-25T16:47:23

AFAIK, it's not possible to name a face in Blender. Besides, the Blender JSON exporter is not supported anymore. Please use the glTF Blender exporter and THREE.GLTFLoader. Moreover, faces in three.js are always represented as triangles. So what you are looking for (the middle circle as a single face) is not possible.

If you want to apply a texture to the center part of your mesh, assign a separate material in Blender to the group of respective faces. It's not necessary to create a single face for this. You just have to create a multi-material object.

Blender JSON export adding vertices - THREE.JS

1 Answers