gpt4 book ai didi

javascript - 如何使用 three.js 将 Material (.mtl) 添加到对象 (.obj)?

转载 作者:行者123 更新时间:2023-11-30 10:59:36 29 4
gpt4 key购买 nike

我已经成功地使用 three.js 从我在网上找到的一段代码中获得了一个 .obj 文件来显示,我根据自己的需要进行了调整。但是我现在正在尝试添加 .mtl Material 文件并且卡住了。

我尝试了一些方法,但似乎没有任何效果。我是 three.js 的新手,所以我肯定在这里误解了一些东西......

这是我当前使用的代码,可以完美地显示我的 .obj 文件:

var renderer, scene, camera, Nefertiti;

var ww = window.innerWidth,
wh = window.innerHeight;

function init(){

renderer = new THREE.WebGLRenderer({canvas : document.getElementById('scene')});
renderer.setSize(ww,wh);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(50,ww/wh, 0.1, 10000 );
camera.position.set(0,0,500);
scene.add(camera);

//Add a light in the scene
directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
directionalLight.position.set( 0, 0, 350 );
directionalLight.lookAt(new THREE.Vector3(0,0,0));
scene.add( directionalLight );

//Load the obj file
loadOBJ();
}

var loadOBJ = function(){

//Manager from ThreeJs to track a loader and its status
var manager = new THREE.LoadingManager();
//Loader for Obj from Three.js
var loader = new THREE.OBJLoader( manager );

//Launch loading of the obj file, addNefertitiInScene is the callback when it's ready
loader.load( '/mypath/Nefertiti-3d.obj', addNefertitiInScene);

};

var addNefertitiInScene = function(object){
Nefertiti = object;
//Move the Nefertiti in the scene
Nefertiti.scale.set(0.7,0.7,0.7);
Nefertiti.rotation.x = 0.5;
Nefertiti.rotation.y = 5.5;
Nefertiti.rotation.z = 0.2;
Nefertiti.position.y = -40;
Nefertiti.position.z = 1;
//Go through all children of the loaded object and search for a Mesh
object.traverse( function ( child ) {
//This allow us to check if the children is an instance of the Mesh constructor
if(child instanceof THREE.Mesh){
child.material.color = new THREE.Color(0XFFFFFF);
//Sometimes there are some vertex normals missing in the .obj files, ThreeJs will compute them
child.geometry.computeVertexNormals();
}
});
//Add the 3D object in the scene
scene.add(Nefertiti);

var canvas = renderer.domElement;
canvas.addEventListener('mousemove', onMouseMove);

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

function onMouseMove(event) {
Nefertiti.rotation.y += event.movementX * 0.001;
Nefertiti.rotation.x += event.movementY * 0.0005;
}
};


init();

这是我尝试添加的一个片段,用于加载不起作用的 mtl 文件(我只是缩短了到/mypath/的实际路径以保持整洁)

var loadOBJ = function(){

    var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl( '/mypath/' );
mtlLoader.setPath( '/mypath/' );
var url = "/mypath/Nefertiti-3d.mtl";
mtlLoader.load( url, function( materials ) {

    materials.preload();

    //Manager from ThreeJs to track a loader and its status
    var manager = new THREE.LoadingManager();
    //Loader for Obj from Three.js
    var loader = new THREE.OBJLoader( manager );

    loader.setMaterials( materials );
    loader.setPath( '/mypath/' );

    //Launch loading of the obj file, addNefertitiInScene is the callback when it's ready 
    loader.load( '/mypath/Nefertiti-3d.obj', addNefertitiInScene);

    object.position.y = - 95;
        scene.add( object );

    }, onProgress, onError );


};

通过研究我可以看出必须有一个网格才能使 Material 工作,但我只是无法从任何文档中弄清楚如何正确地实现它。

非常感谢能够将 mtl 文件添加到我的代码中的任何帮助!!

** 编辑 **

所以我根据 Mugen87 的建议将代码片段更改为以下内容:

var loadOBJ = function(){

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( '/mypath/' );
var url = "/mypath/Nefertiti-3d.mtl";
mtlLoader.load( url, function( materials ) {

materials.preload();

//Manager from ThreeJs to track a loader and its status
var manager = new THREE.LoadingManager();
//Loader for Obj from Three.js
var loader = new THREE.OBJLoader( manager );

loader.setMaterials( materials );
loader.setPath( '/mypath/' );

//Launch loading of the obj file, addNefertitiInScene is the callback when it's ready
loader.load( '/mypath/Nefertiti-3d.obj', addNefertitiInScene);

}, onProgress, onError );


};

而且我还包含了 three.js 示例中的 MTLLoader.js(我不确定这是否正确,我发现很难找到这方面的信息)并且在控制台中出现以下错误:

Uncaught SyntaxError: Cannot use import statement outside a module

(index):136 Uncaught TypeError: THREE.MTLLoader is not a constructor
at loadOBJ ((index):136)
at init ((index):132)
at (index):199
loadOBJ @ (index):136
init @ (index):132
(anonymous) @ (index):199

有什么想法吗?我在代码中使用 MTL 的方式有问题吗?

最佳答案

object.position.y = - 95;
scene.add( object );

我想您已经从 official OBJ/MTL example 复制了两行代码, 正确的?不幸的是,它们在这里没有意义,因为 objectundefined。请记住,addNefertitiInScene 是您的 onLoad() 回调,它负责将加载的对象添加到场景中。

此外,mtlLoader.setBaseUrl( '/mypath/' ); 应该不是必需的。该方法很久以前就被删除了。

同时使用浏览器的开发工具确保 MTL 文件已实际加载。

three.js R109

关于javascript - 如何使用 three.js 将 Material (.mtl) 添加到对象 (.obj)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58450159/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com