在web端，three.js如何操作3d模型obj对象的子构件

Posted 2023-05-03

例如：我用three.js将一个obj模型对象添加到web端，然后操作这个模型（比如选中这个模型的某一个部分，查看属性，修改颜色等）。但是导入的是一个整体，这样的话只能操作整个模型。对threejs涉及也不深，不知道有没有这方面的api

1.两种着色器
WebGL没有固定的渲染管线，你无法直接使用一个黑盒子式的着色器（译者注：上个世纪的显卡基本都只支持固定渲染管线）；WebGL提供的是可编程的管线，这种方式更强大但也更难理解和使用。长话短说，可编程渲染管线意味着编写程序的人要自己负责获取顶点并将它绘制在屏幕上了。着色器是渲染管线的一部分，有两种着色器：
1.顶点着色器
2.片元着色器
你应当知道的是，这两种着色器都完全运行在显卡的GPU上，我们将需要它们处理的数据从CPU上卸下，装到GPU上，减轻了CPU的复旦。现代的GPU追问

我要的是模型的拆解方面的解决办法，而不是对模型的着色。

参考技术A 你好，你解决了吗，我也有类似需求

如何将 obj 和 mtl 文件导入到 three.js

【中文标题】如何将 obj 和 mtl 文件导入到 three.js

【英文标题】：How to import obj and mtl file to three.js

【发布时间】：2015-01-15 19:22:10

【问题描述】：

我很难导入这些 obj 和 mtl 文件来加载三个 js 的模型。我试试这个代码：

var loader = new THREE.OBJMTLLoader();

loader.load("test.obj", "test.mtl"); loader.addEventListener("load", function (object) scene.add(object);, false);

我应该做更多的事情吗？我发现了一些关于将 js/OBJMTLLoader.js 之类的脚本导入到 html.if 我应该从某个地方下载它们吗？

【问题讨论】：

loader.load() 中的对象路径很可能是错误的。查看示例threejs.org/examples/#webgl_loader_obj_mtl 并尝试加载您的对象。

不，路径是正确的，我知道您共享的示例..我将它们与脚本放在同一个文件夹中以加载它们。我找不到任何错误..还有其他帮助吗？

我的 OBJMLTLoader.js 出错了！

请问你能告诉我它有什么问题吗？

我相信可能是脚本本身。

【参考方案1】：

            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 ) ;
            THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

        if (name == "House")
            var loader = new THREE.OBJMTLLoader();
            loader.load( 'models/House/house_obj/house_obj.obj', 'models/House/house_obj/house_obj.mtl', function ( object ) 
                object.traverse( function ( child ) 

                    if ( child instanceof THREE.Mesh ) 

                        child.material.side = THREE.DoubleSide;

                    

                 );


                object.rotation.x = Math.PI/2;
                 var scale = 0.15/ (MapWidth*0.5/3);//upsos tabani
                object.scale.set(scale,scale,scale);
                House = object;


            , onProgress, onError );
            

这是我使用的代码。在此示例中，我检查用户是否选择插入房屋模型。 onProgress 和 onError 函数说明加载程序的完整性。我使用 OBJMTLLoader.js 和 DDSLoader.js