babyion 加载obj模型_加载MTL材质的Obj模型

拼搏现实的明天。 2022-10-26 14:22 204阅读 0赞

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

运行结果：

![05110913988d][]

总结：

使用MTLLoader之前需要引入MTLLoader.js文件；

材质加载回调函数中的materials存放了所有的材质，需要调用materials.preload()方法才会真正加载材质；

调用ObjLoader的setMaterials方法将材质赋给模型。

[05110913988d]: /images/20221024/299d5f405b3f4c96b24f42cc827323dd.png

babyion 加载obj模型_加载MTL材质的Obj模型

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 ParaView中加载含有材质的OBJ文件

相关 OpenGL加载和显示3D模型（OBJ文件）编程

相关 Qt--OpenGL加载OBJ 3D模型

相关 Cesium - 转换obj模型为3D Tiles 并加载

相关通过超图在网页上加载obj格式3D模型

相关首次使用three.js加载obj模型未成功

相关 babyion 加载obj模型_加载MTL材质的Obj模型

相关 unity通过WWW方式加载.obj文件

相关 three.js 如何加载obj

相关 HTML版的使用three.js加载obj和mtl文件并上贴图