如何在 Three.js 中为金环添加反射率？答案

【问题标题】：How to add reflectivity to the golden ring in Three.js?如何在 Three.js 中为金环添加反射率？
【发布时间】：2018-07-03 18:39:51
【问题描述】：

我有一个从搅拌机导出的金戒指网格的 stl 文件。当我将它导入三个 JS 并添加图像纹理以获得金色金属效果时，纹理没有得到正确应用。

有什么建议吗？

这是代码，

loader.load( objaddress, stladdress, function ( object ) {

    object.traverse( function ( child ) {

            if ( child instanceof THREE.Mesh ) {                               
                    material = new THREE.MeshPhongMaterial({map: new THREE.ImageUtils.loadTexture("Gold.jpg")});
                                child.material = material;

                      }

                  } );

这是我使用的 jpg 文件网址： http://cdn.designbeep.com/wp-content/uploads/2012/10/7.gold-textures.jpg

【问题讨论】：

您是否尝试将材料更改为MeshPhongMaterial，请查看链接threejs.org/docs/#Reference/Materials/MeshPhongMaterial
是的，我确实将材料更改为 Phong 仍然无法正常工作。当我使用 Face 材质时，我在三个 js 源本身中遇到错误
能否请您创建一个 jsfiddle 或类似的或发布您的代码（或类似的测试用例），因为它很难用更多的代码查明问题

标签： three.js blender

【解决方案1】：

从外部文件加载几何图形后，使用三个 js ShaderMaterial 为加载的几何图形创建材质。在 ShaderMaterial 中指定图像纹理以及平滑度、噪声、包裹以获得更好的外观和感觉。

供参考：http://threejs.org/docs/#Reference/Materials/ShaderMaterial

这是为几何体创建着色器材质的代码，

var material = new THREE.ShaderMaterial({
                    uniforms: {
                       tMatCap: {
                            type: 't',
                            value: THREE.ImageUtils.loadTexture('Gold.jpg')
                        },
                        time: {
                            type: 'f',
                            value: 0
                        },
                        bump: {
                            type: 'f',
                            value: 0
                        },
                        noise: {
                            type: 'f',
                            value: .04
                        },
                        useNormal: {
                            type: 'f',
                            value: 0
                        },
                        normalScale: {
                            type: 'f',
                            value: .5
                        },
                        normalRepeat: {
                            type: 'f',
                            value: 1
                        } });

【讨论】：