Question

我最近在以下URL上开始使用Threejs汽车示例： https://threejs.org/examples/webgl_loader_ctm_materials.html

测试真实物体的奇幻作品。我想在运行时更改这辆车的材质，但由于将网格添加到场景中的方式而被阻止。我将不胜感激，有人可以为我提供援助，发布小提琴或分享代码。

以下是将网格添加到场景的方式：

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

这是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;
                }
            }

无需指出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);
                        }
                    }

它将在控制台中输出所需的颜色代码，但不会将其应用于汽车。如果有人甚至可以发布带有下拉式换色器的基本工作示例，那将有很大帮助。

预先感谢

Answer 1

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

material.needsUpdate = true;

这是否解决了您的问题，还是还有其他问题？

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

1 个答案: