OBJ MTLLoader material part problem

ninewill · March 26, 2020, 10:17am

Hello, I have a problem with the material, thanks~

Before I posted the material：

loaded script

截圖 2020-03-26 下午6.03.452194×1510 334 KB

2.After attaching the material , MTLLoader and OBJLoader

3.But the browser shows mtlLoader.setTexturePath is not a function

My code:

let container;
let camera;
let renderer; 
let controls;
let scene;
let mesh;

function init() {
  container = document.querySelector('#scene-container');

  //Create a scene 創造場景
  scene = new THREE.Scene();

  //背景顏色
  scene.background = new THREE.Color(0x222222);

  // function 函數整理
  createCamera();
  createControls();
  createLight();
  createRenderer();

  renderer.setAnimationLoop(() => {
    update();
    render();
  });
}

//Create a Camera 建立相機
function createCamera() {
  camera = new THREE.PerspectiveCamera(
    75, //FOV
    window.innerWidth / window.innerHeight, //aspect
    0.1, //near
    1500 //far
  );

  camera.position.set(0, 0, 1000); // x,y,z
}

// Create a Controls 建立控制器
function createControls() {
  //   controls = new THREE.OrbitControls(camera, container);
  controls = new THREE.OrbitControls(camera, container);
  controls.enableDamping = true;
  controls.campingFactor = 0.25;
  controls.enableZoom = true;
}

// Create a Lights 建立光源組
function createLight() {
  const keyLight = new THREE.DirectionalLight(
    new THREE.Color('hsl(30, 100%, 75%)'),
    1.0
  );
  keyLight.position.set(-100, 0, 100);

  const fillLight = new THREE.DirectionalLight(
    new THREE.Color('hsl(240, 100%, 75%)'),
    0.75
  );
  fillLight.position.set(100, 0, 100);

  const backLight = new THREE.DirectionalLight(0xffffff, 1.0);
  backLight.position.set(100, 0, -100).normalize();

  scene.add(keyLight, fillLight, backLight);
}

// Create a Model 載入模型(OBJ)

const mtlLoader = new THREE.MTLLoader();
mtlLoader.setTexturePath('/models/');
mtlLoader.setPath('/models/');
mtlLoader.load('rhinoceros2.mtl', function(materials) {
  materials.preload();

  const objLoader = new THREE.OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.setPath('/models/');
  objLoader.load('rhinoceros2.obj', function(object) {
    scene.add(object);
  });
});

// Creat the Renderer 建立渲染器
function createRenderer() {
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);

  renderer.setPixelRatio(window.devicePixelRatio);

  renderer.gammaFactor = 2.2;
  renderer.gammaOutput = true;

  renderer.physicallyCorrectLights = true;

  container.appendChild(renderer.domElement);
}

function update() {
  // mesh.rotation.z += 0.01;
  // mesh.rotation.x += 0.01;
  // mesh.rotation.y += 0.01;
}

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

function onWindowResize() {
  // console.log( '你調整瀏覽器大小' );

  camera.aspect = window.innerWidth / window.innerHeight;

  // update the camera's frustum 相機錐角
  camera.updateProjectionMatrix();

  // update the size of the renderer AND the canvas
  renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onWindowResize);

init();

Mugen87 · March 26, 2020, 10:19am

setTexturePath() does not exist anymore. Try it with setResourcePath() instead.

ninewill · March 26, 2020, 10:24am

Hi Mugen87,
i try it, but not effect

Mugen87 · March 26, 2020, 10:40am

The console error says the app could not load the texture. Maybe your path is wrong?

ninewill · March 26, 2020, 10:45am

my path is

ninewill · March 26, 2020, 10:57am

It ’s most likely a material issue, because this is a built-in material

naotaro0123 · March 26, 2020, 2:37pm

I think there is no Texture file.
Is there a 404 error because there is no rustediron-streaks_metallic.png?

ninewill · March 26, 2020, 3:06pm

yes, There is something wrong with the Texture, and it will be fine after adjustment! thank

ninewill · March 26, 2020, 3:16pm

I have 2 questions here , thank you all

1.Model cannot rotate

2.Light color GUI has no corresponding color

My code:

let container;
let camera;
let renderer; 
let controls;
let scene;
let mesh;
let stats;

function init() {
  container = document.querySelector('#scene-container');

  //Create a scene 創造場景
  scene = new THREE.Scene();

  //背景顏色
  scene.background = new THREE.Color(0x222222);

  // function 函數整理
  createCamera();
  createControls();
  createLight();
  createRenderer();

  renderer.setAnimationLoop(() => {
    update();
    render();
  });
}

//Create a Camera 建立相機
function createCamera() {
  camera = new THREE.PerspectiveCamera(
    75, //FOV
    window.innerWidth / window.innerHeight, //aspect
    0.1, //near
    1500 //far
  );

  camera.position.set(0, 0, 1000); // x,y,z
}

// Create a Controls 建立控制器
function createControls() {
  //   controls = new THREE.OrbitControls(camera, container);
  controls = new THREE.OrbitControls(camera, container);
  controls.enableDamping = true;
  controls.campingFactor = 0.25;
  controls.enableZoom = true;
}

// Create a Lights 建立光源組
function createLight() {
  const keyLight = new THREE.DirectionalLight(
    lightColor.light,
    1
  );
  keyLight.position.set(-100, 0, 200);

  const fillLight = new THREE.DirectionalLight(
    new THREE.Color('hsl(240, 100%, 75%)'),
    0.75
  );
  fillLight.position.set(100, 0, -300);

  const backLight = new THREE.DirectionalLight(0xffffff, 1.0);
  backLight.position.set(100, 0, -100).normalize();

  const helper1 = new THREE.DirectionalLightHelper( keyLight, 100 );
  const helper2 = new THREE.DirectionalLightHelper( fillLight, 100 );
  const helper3 = new THREE.DirectionalLightHelper( backLight, 100 );

  scene.add(keyLight, fillLight, backLight, helper1, helper2, helper3);
}

// model

var onProgress = function ( xhr ) {

  if ( xhr.lengthComputable ) {

    var percentComplete = xhr.loaded / xhr.total * 100;
    console.log( Math.round( percentComplete, 2 ) + '% downloaded' );

  }

};

var onError = function () { };

var manager = new THREE.LoadingManager();


// Create a Model 載入模型(OBJ)

const mtlLoader = new THREE.MTLLoader(manager);
mtlLoader.setResourcePath('models/');
mtlLoader.setPath('models/');
mtlLoader.load('rhinoceros-Psychedelic.mtl', function(materials) {
  materials.preload();

  const objLoader = new THREE.OBJLoader(manager);
  objLoader.setMaterials(materials);
  objLoader.setPath('models/');
  objLoader.load('rhinoceros-Psychedelic.obj', function(object) {
    scene.add(object);

    object.rotation.z += 0.01;
    object.rotation.x += 0.01;
    object.rotation.y += 0.01;

  }, onProgress, onError);
});


// Creat the Renderer 建立渲染器
function createRenderer() {
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);

  renderer.setPixelRatio(window.devicePixelRatio);

  renderer.gammaFactor = 2.2;
  renderer.gammaOutput = true;

  renderer.physicallyCorrectLights = true;

  container.appendChild(renderer.domElement);

  stats = new Stats();
  container.appendChild(stats.dom);

}

function update() {
  
  stats.update();
}

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

function onWindowResize() {
  // console.log( '你調整瀏覽器大小' );

  camera.aspect = window.innerWidth / window.innerHeight;

  // update the camera's frustum 相機錐角
  camera.updateProjectionMatrix();

  // update the size of the renderer AND the canvas
  renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onWindowResize);




//GUI Display

const gui = new dat.GUI();

// gui light 
const lightColor = function() {

  this.light = { h: 350, s: 0.9, v: 0.3 }; // Hue, saturation, value

};

  const lightD = new lightColor();


const lightFolder = gui.addFolder("Rhinoceros")
lightFolder.addColor(lightD, 'light').onChange(regenerate);;
lightFolder.open();



function regenerate() {
  //Geometry

  function createLight() {
    const keyLight = new THREE.DirectionalLight(
      lightColor.light
    );

    keyLight.position.set(-100, 0, 200);
  
    scene.add(keyLight);
  }
  createLight();


}

init();

naotaro0123 · March 27, 2020, 1:12pm

1.Model cannot rotate

I think rotation should be done in render ().

Some examples are your helpful.
examples/#webgl_loader_collada
The code is below.
three.js/examples/webgl_loader_collada.html at d540bbf7ddeec011ba5bbf09691e8cf542be3a05 · mrdoob/three.js · GitHub

2.Light color GUI has no corresponding color

I don’t understand this answer without an editable live example .

ninewill · March 30, 2020, 12:37pm

thanks you are solution, I later searched for the answer to this problem thanks.

Topic		Replies	Views
OBJLoader + MTLLoader not loading texture image Questions textures , loaders , mtl-loader , obj-loader	7	6693	April 23, 2018
Object not loading when using MTLLoader Questions mtl-loader	2	1548	October 20, 2018
Using mtl-obj loader 3dModel is not looking same in terms of texture and material as it is looking in microsoft 3Dviewer Questions mtl-loader , obj-loader	5	741	September 19, 2019
MTLLoader Not Working Questions mtl-loader	8	4491	January 3, 2020
How to change mtl & obj Loader mesh change Questions materials , loaders	3	3920	September 17, 2019

OBJ MTLLoader material part problem

Related topics