javascript - obj 文件中的 Threejs UV 映射

标签 javascript three.js texture-mapping uv-mapping

我在单个面上对 STL 模型应用了简单的 UV 贴图,这就是结果:

enter image description here

现在我从 blender 导出 .obj.mtl 文件。 Here如果您愿意,可以下载它们。当我使用 OBJLoader 和 MTLLoader 加载此 obj 和 mtl 文件时,结果如下:

enter image description here

为什么映射不一样?我虽然 two.js 可以从文件中读取 UV 映射。有没有其他方法可以将 UV 贴图导出到模型,或者我做错了什么?

这是我用来加载 objmtl 文件的代码:

this.loadOBJ = function (baseURL, objFile, mtlFile, type) {
        return new Promise(function (resolve, reject) {
            console.log("Adding OBJ file '" + objFile + "' with MTL file '" + mtlFile + "'");
            scope.clearScene();

            // OBJ file loader
            function loadOBJ(materials) {
                var objLoader = new THREE.OBJLoader();
                if (materials) {
                    objLoader.setMaterials(materials);
                }

                objLoader.setPath(baseURL);
                objLoader.load(objFile, function (object) {

                    loadedMesh = object.children[0];

                    scene.add(loadedMesh);
                    centerCamera(loadedMesh);

                    render();
                    resolve();
                }, function (xhr) {
                    if (xhr.lengthComputable) {
                        var percentComplete = xhr.loaded / xhr.total * 100;
                        console.log("Loading OBJ file: " + Math.round(percentComplete, 2) + '% downloaded');
                    }
                }, function (xhr) {
                    console.log("Error loading OBJ: " + JSON.stringify(xhr));
                    reject();
                });
            };

            if (!mtlFile) {
                console.log("No MTL file specified, just loading OBJ");
                loadOBJ();
            }
            else {
                // Try to load the materials file first
                var mtlLoader = new THREE.MTLLoader();
                mtlLoader.setPath(baseURL);
                mtlLoader.load(mtlFile, function (materials) {

                    // File loaded, load the OBJ file now
                    materials.preload();
                    loadOBJ(materials);

                }, function (xhr) {
                    if (xhr.lengthComputable) {
                        var percentComplete = xhr.loaded / xhr.total * 100;
                        console.log("Loading MTL file: " + Math.round(percentComplete, 2) + '% downloaded');
                    }
                }, function (xhr) {
                    // We couldn't load the MTL file, load the OBJ anyway
                    console.log("Error loading MTL file: " + JSON.stringify(xhr) + ". Will load only OBJ file");
                    loadOBJ();
                });
            }
        });
    }

最佳答案

这只是 Blender 导出问题。我刚刚使用此设置导出了我的模型,它运行得非常好!

enter image description here

关于javascript - obj 文件中的 Threejs UV 映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43077378/

相关文章:

javascript - 为什么 bind() 不适用于对象内部另一个函数内的函数?

javascript - 改变脸部朝向光线的方向不会更新其颜色

c++ - OpenGL 绑定(bind)纹理到顶点缓冲对象(使用 CG 着色器)

three.js - Threejs 基准测试和渐进增强

java - 需要帮助将不同的纹理添加到 JOGL 中的不同对象

c++ - C++ 球体光线追踪中的纹理映射

javascript - 使用 rect() 的 HTML5 Canvas 性能很差

javascript - 通过 Javascript 将简单的 URL 变量传递到输入字段

javascript - Bootstrap 具有多种形式的单一模式窗口

javascript - Three.js 禁用深度测试