hi, I just started three.js
I want to know how to load obj and mtl to modify the material
From default (MeshPhongMaterial) to MeshBasicMaterial
For example, blender exported obj and mtl
and I loaded it from three.js
But, How do i implement shadeless in Blender in three.js?
Can I change the material?
As follows I want to lighten the dark part of the object.
Could you tell me how to make a realistic feel?
Thank you for your kind reply.
function init() {
//공간과 카메라
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
var webGLRenderer = new THREE.WebGLRenderer({
//alpha: true,
antialias: true
});
webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
camera.position.set(30, 30, 0);
camera.lookAt(scene.position);
console.log(camera);
//빛
var light = new THREE.PointLight( 0xffffff, 1.5 );
camera.add( light );
var ambientLight = new THREE.AmbientLight( 0xffffff, 0.5 );
scene.add( ambientLight );
scene.add( camera );
//control - 회전과 카메라 인터렉션
var orbitControls = new THREE.OrbitControls(camera);
console.log(orbitControls);
orbitControls.autoRotate = false;
var clock = new THREE.Clock();
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) { };
var path = "./resources/projects/";
var fileName = "FL002.mtl";
var url = "./resources/projects/FL002.mtl";
var mtlLoader = new THREE.MTLLoader();
var objLoader = new THREE.OBJLoader();
var materials = new THREE.MeshBasicMaterial();
mtlLoader.setPath(path);
mtlLoader.load( fileName, function( materials ) {
materials.preload();
objLoader.setPath(path);
objLoader.setMaterials( materials );
console.log(materials);
objLoader.load( 'FL002.OBJ', function ( object ) {
console.log(object);
object.children[0].material.map.anisotropy = 3;
//object.children[0].material.needsUpdate = true;
scene.add( object );
}, onProgress, onError);
});
document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
render();
function render() {
var delta = clock.getDelta();
orbitControls.update(delta);
requestAnimationFrame(render);
webGLRenderer.render(scene, camera);
}