babyion 加載obj模型_加載MTL材質的Obj模型

Object Loader And MTL Loader

body {

margin: 0;

overflow: hidden;

}

init();

function init() {

// show FPS

let stats = initStats();

// resize

window.addEventListener('resize', onResize, false);

let scene = new THREE.Scene();

let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.x = 50;

camera.position.y = 50;

camera.position.z = 30;

camera.lookAt(new THREE.Vector3(0, 15, 0));

let renderer = new THREE.WebGLRenderer();

renderer.setClearColor(new THREE.Color(0x000000));

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.shadowMap.enabled = true;

document.getElementById("container").appendChild(renderer.domElement);

// init trackball control

let trackballControls = initTrackballControls(camera, renderer);

let clock = new THREE.Clock();

let mtlLoader = new THREE.MTLLoader();

mtlLoader.load("../assets/models/female02/female02.mtl",

function(materials){

// load materials

materials.preload();

let loader = new THREE.OBJLoader();

loader.setMaterials(materials)

.load('../assets/models/female02/female02.obj', function (mesh) {

mesh.scale.set(0.2, 0.2, 0.2);

mesh.position.set(0, 0, 0);

scene.add(mesh);

}

);

}

);

// add spotlight

let spotLight = new THREE.SpotLight(0xffffff, 1, 180, Math.PI / 4);

spotLight.shadow.mapSize.set(2048, 2048);

spotLight.position.set(0, 60, 0);

spotLight.castShadow = true;

spotLight.intensity = 3;

spotLight.angle = 1.2;

scene.add(spotLight);

// add a plane

let planeGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);

let planeMaterial = new THREE.MeshLambertMaterial({

color: 0xffffff

});

let plane = new THREE.Mesh(planeGeometry, planeMaterial);

plane.receiveShadow = true;

plane.rotation.x = -0.5 * Math.PI;

scene.add(plane);

// attributes which can be modified in GUI

const controls = {

};

// init GUI

initGUI();

renderScene();

function initGUI(){

let gui = new dat.GUI();

}

function onResize() {

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

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

}

function renderScene(){

trackballControls.update(clock.getDelta());

stats.update();

requestAnimationFrame(renderScene);

renderer.render(scene, camera);

}

}

運作結果：

總結：

使用MTLLoader之前需要引入MTLLoader.js檔案；

材質加載回調函數中的materials存放了所有的材質，需要調用materials.preload()方法才會真正加載材質；

調用ObjLoader的setMaterials方法将材質賦給模型。