Material not showing properly

Questions
,
1

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: https://github.com/mrdoob/three.js/blob/b11f897812a8a48bcd81e9bd46785d07939ec59e/examples/webgl_loader_obj_mtl.html

Rendered in Blender, Expected
Google Photos

Actual rendering result in threejs.
Google Photos

2

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.

3

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.

4

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)
   .setPath('./')
   .load('./ball.glb', function(o){
      console.log(o);
      var mesh=o.scene.children[2];
      console.log('loaded mesh');
      console.log(mesh);
      mesh.position.set(0, 0, 0);
      scene.add(mesh);
   });

Google Photos

My code is here: http://bit.ly/2PWqjIl

5

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

Three.js rendered result:
https://app.box.com/s/2412naa3e7jkw82uozhwkc7vwfhccnud

Blender rendered result:
https://app.box.com/s/ih4wxc7hr83umx0s4ua6wingknkv16r8

Blender setting:
https://app.box.com/s/ponxozskwdma77ez0f4k3wdc3cj3mtvl

GLB file:
https://app.box.com/s/0wg43jav16e6952wuq83u5iz2jrbsrcm

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;

init();
render();

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

function reset(param=null){
  if(scene)scene.dispose();
  container.innerHTML='';

  //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);

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

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

function render(){
  if(!paused)
    renderer.render( scene, camera );
};

function pause( val=true ){
  paused=val;
};

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

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

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

image
image2174×1342 302 KB

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.

7

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