Javascript 在运行时更改Threejs汽车的颜色示例

我最近开始在下面的URL上玩Threejs汽车示例：

测试真实物体的奇妙部件。我想在运行时更改此车的材质，但由于网格添加到场景的方式，我被阻止。我会很感激有人能帮我摆脱困境，发一张小提琴或者分享代码

以下是如何将网格添加到场景中：

var loader = new THREE.CTMLoader();
                loader.loadParts( "catalog/view/javascript/models/ctm/camaro/camaro.js", function( geometries, materials ) {
                    hackMaterials( materials );
                    for ( var i = 0; i < geometries.length; i ++ ) {
                        var mesh = new THREE.Mesh( geometries[ i ], materials[ i ] );
                        mesh.position.copy( position );
                        mesh.scale.copy( scale );
                        scene.add( mesh );
                    }

var loader=new THREE.CTMLoader（）；
loadParts（“catalog/view/javascript/models/ctm/camaro/camaro.js”，函数（几何图形、材质）{
材料（材料）；
对于（变量i=0；i

下面是hackMaterials（materials）函数

function hackMaterials( materials ) {
                for ( var i = 0; i < materials.length; i ++ ) {
                    var m = materials[ i ];
                    if ( m.name.indexOf( "Body" ) !== -1 ) {
                        var mm = new THREE.MeshStandardMaterial( );

                       mm.color.setHex( 0x56cc5b );   //
                        mm.lightMap = m.map;
                        //mm.envMap = textureCube;
                        mm.metalness = 0.5;
                        mm.roughness = 0.3;
                        materials[ i ] = mm;
                    } 
                    else if ( m.name.indexOf( "tire_car" ) !== -1 ) {
                        var mm = new THREE.MeshStandardMaterial();
                        mm.color.setHex( 0x000000 );
                        mm.lightMap = m.map;
                        mm.metalness = 0.1;
                        mm.roughness = 0.9;
                        materials[ i ] = mm;
                    }
                     else if ( m.name.indexOf( "mirror" ) !== -1 ) {
                        var mm = new THREE.MeshStandardMaterial();
                        mm.color.setHex( 0x808080 );
                        mm.lightMap = m.map;
                        mm.envMap = textureCube;
                        mm.metalness = 0.9;
                        mm.roughness = 0.5;
                        materials[ i ] = mm;
                    } 
                    else if ( m.name.indexOf( "glass" ) !== -1 ) {
                        var mm = new THREE.MeshStandardMaterial();
                        mm.color.copy( m.color );
//                      mm.lightMap = m.map;
                        mm.envMap = textureCube;
                        mm.metalness = 1;
                        mm.roughtness = 0.1;
                        mm.opacity = m.opacity;
                        mm.transparent = true;
                        materials[ i ] = mm;
                    } 
                    else if ( m.name.indexOf( "Material.001" ) !== -1 ) {
                        var mm = new THREE.MeshPhongMaterial( { map: m.map } );
                        mm.specularMap = m.map;
                        mm.shininess = 30;
                        mm.color.setHex( 0xffffff );
                        mm.metal = true;
                        materials[ i ] = mm;
                   }
                    materials[ i ].side = THREE.DoubleSide;
                }
            }

功能材料（材料）{
对于（变量i=0；i

不用指出，函数hackMaterials在数组中循环遍历材质名称，然后根据名称为材质指定不同的值

我一直在尝试使用dat.gui.js，但到目前为止，我唯一能做的就是通过以下代码创建颜色控件，并通过以下代码生成控制台输出：

var color = 0xffffff;

                     var params = {
                        modelcolor: "#ffffff"
                        };
                    var gui = new dat.GUI();
                    var folder = gui.addFolder('Model Colour');
                    folder.addColor(params, 'modelcolor')
                        .name('Model Color')
                        .onChange(function() {

                    //var mm = new THREE.MeshStandardMaterial( {color: params.modelcolor});
                    //alert(params.modelcolor)
                    color = params.modelcolor.replace("#", "0x");

                    //mm.color.setHex(0xdd5353);
                    console.log(color);
                    for ( var i = 0; i < geometries.length; i ++ ) {
                        //console.log(materials[i].name);
                        if (materials[i].name.indexOf("Plane") !== -1) {
                            materials[i].color.setHex(0x56cc5b);
                            console.log("color should be changed for " + materials[i].name);
                        }
                    }

var color=0xffffff；
变量参数={
modelcolor:#ffffff”
};
var gui=new dat.gui（）；
var folder=gui.addFolder（'Model color'）；
folder.addColor（参数“modelcolor”）
.name（'Model Color'）
.onChange（函数（）{
//var mm=新的三个.MeshStandardMaterial（{color:params.modelcolor}）；
//警报（params.modelcolor）
color=params.modelcolor.replace（“#”和“0x”）；
//mm.color.setHex（0xdd5353）；
控制台。日志（颜色）；
对于（变量i=0；i

它在控制台中输出所需的颜色代码，但不将其应用于汽车。 如果有人能发布一个带有下拉式颜色变换器的基本工作示例，那将是非常有帮助的

---

提前感谢

在THREE.js中，无论何时更新材质，并且希望在整个场景中更新效果，都需要在材质上设置以下标志：

material.needsUpdate = true;

---

这解决了你的问题还是有其他问题？

我想你需要设置

材料[I].needsUpdate=true；

尝试过这个建议。它画了所有东西，但我只需要车身就可以得到新的颜色你到底想匹配什么？

如果（材料[I].name.indexOf（“平面”）==true）

（请注意，在JavaScript中，只有

1==true

，而任何其他数字

！=true

）正确！将我的代码编辑为-（materials[i].name.indexOf（“Plane”）！=-1）我正在尝试获取名为Plane的材质，以便可以将其作为测试绘制。