Material not showing properly

I just created a sample ball in Blender (2.8) and exported it to the Wavefront(.obj and .mtl) format. It has a simple material (it rendered successfully in Blender).

I have loaded it in my HTML. According to the console log, everything looks good but the material. It is not showing properly.

The source code is according to example:

Rendered in Blender, Expected
Google Photos

Actual rendering result in threejs.
Google Photos

Is there a special reason for using OBJ? The recommended 3D format by three.js is the more modern glTF which is also supported by Blender.

This is due to the system requirement required to backward compatible with old software. The existing software support STL and OBJ.

I tried to use the STL, but there has no material on it.

I read the example, but it use the separated material that created by code manually.

var material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );

I also tried to use the STL object with material exported by blender (The file created by Blender when I export the OBJ file). But it showing the blank (without any material) for me.

I had also tried to convert the OBJ file to GLB file (by Blender). But it showing blank for me when I tried to load it (refer to github examples/webgl_loader_gltf.html).

new GLTFLoader(manager)
   .load('./ball.glb', function(o){
      var mesh=o.scene.children[2];
      console.log('loaded mesh');
      mesh.position.set(0, 0, 0);

Google Photos

My code is here:

After discuss with customer, they agree to use the GLB file. but I got the same issue:

Three.js rendered result:

Blender rendered result:

Blender setting:

GLB file:

import * as THREE from '/static/threejs/build/three.module.js';
import { GLTFLoader } from '/static/threejs/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from '/static/threejs/examples/jsm/controls/OrbitControls.js';
const $=jQuery;

var container, control;
var params;
var camera, scene, renderer, paused=false;


function init(){
  container = document.getElementById('three');

function reset(param=null){

  //Prepare the camera
  camera = new THREE.PerspectiveCamera( 45, $(container).width()/$(container).height(), 1, 2000 );
  camera.position.x = 0; camera.position.y = 0; camera.position.z = 100;

  //Prepare the Scene and Lighting
  scene = new THREE.Scene();
  var light = new THREE.AmbientLight( new THREE.Color('white'), 1 );
  scene.add( light );
  scene.add( camera );
  scene.background=new THREE.Color(params.background);

  if(!renderer)renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( $(container).width(), $(container).height() );
  container.appendChild( renderer.domElement );

  control = new OrbitControls( camera, renderer.domElement );
  control.addEventListener( 'change', render ); // use if there is no animation loo

function render(){
    renderer.render( scene, camera );

function pause( val=true ){

function loadModel( file ){
  //Loading GLTF
  console.log(`Loading model: ${file}...`);
  var loader=new GLTFLoader();
    function( loaded ){
      console.log('Loaded, adding scene...');

function resized() {
  renderer.setSize( parseInt($(container).width()), parseInt($(container).height()) );
  $(container).find('canvas').attr('width', $(container).width()).attr('height', $(container).height());

I’ve imported your glb in the three.js editor with a basic lighting setup:

Try to add a directional light to your scene. Since the material has a metalness value of 1, you don’t see an effect when using just an ambient light.

…by modern Blender :wink: it only works in 2.79+, and before 2.8 you had to install the plugin manually.