How can I a texture to a json model exported from Blender to Three.js?

Question

In this case, I create two spheres in the scene. One is a SphereGeometry of Three.js(the left one), the other is a json model from Blender(the right one). Both of them use the same material and it does work. As follows:

var material = new THREE.MeshPhongMaterial({
    color: 0xffffff
});

var material = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    wireframe: true
});

I try to add a texture to both of them.

However, the mapping effect does not work on the surface of the json model(the right one).

var material = new THREE.MeshPhongMaterial({
    map: texture,
});

How can I solve this problem?

Here are my Demo and source code.

Answer 1

Check the UVs option in the Blender Three.js exporter:

Answer 2

I got the answer. I have to unwrap a UV sphere in Blender first.

Just like this video.

How To Unwrap A UV Sphere In Blender

After this step, the json file has complete information of the UVs array and mapping effect does work.