三个 JS 将渐变应用于导入的模型

Question

以下两个球体之间的区别 - 就其渐变颜色的应用方式而言，归结为一种说法：

sphereGeometry = sphereGeometry.toNonIndexed();

因为我真的很喜欢 .toNonIndexed() 为我们提供的更平滑的外观，所以我尝试将其应用于 THREE.js GIT 上可用的一些导入的“.glb”模型 - 但它不起作用。

例如，当我使用此处提供的马模型时会发生以下情况：https://github.com/mrdoob/three.js/blob/master/examples/models/gltf/Horse.glb

它基本上完全忽略了我的颜色，出于某种原因默认为红色和黑色。

但是当我注释掉 .toNonIndexed() 行时，它会给出我要求的颜色 - 除非你肯定看到三角形，这是我试图避免的外观：

这是我加载对象的代码：

function loadAny3DModel() {
    loader.load("./Horse.glb", function(theHorse) {
       console.log("===>'theHorse' has arrived!!!\n");

       var horseScene = theHorse.scene;
       horseMesh = horseScene.children[0]; 
                
       var horseGeometry = horseMesh.geometry; 
       let horseMat = horseMesh.material;
       var horseVertexPositionsArray = horseGeometry.attributes.position;

       // Here's the command that isn't working:
       // horseGeometry = horseGeometry.toNonIndexed(); 
       // horseVertexPositionsArray = horseGeometry.attributes.position;

        let theColor = new THREE.Color();
        let colorsArray = [];
        for(let i = 0; i < horseVertexPositionsArray.count; i++) {
          let randC1 = "purple"; 
          let randC2 = "white";
          let chosenColor = i % 2 == 0 ? randC1 : randC2;
          theColor.set(chosenColor);
          colorsArray.push(theColor.r, theColor.g, theColor.b);
        }
        horseGeometry.setAttribute("color", new THREE.Float32BufferAttribute(colorsArray, 3));
        horseMat.vertexColors = true;

        render();
        scene.add(horseScene);

    }
}

我应该怎么做才能获得更平滑的渐变？

================================================ =======================

更新：

这是我尝试做的一个非常粗略的想法：将渐变扩展到整个模型，而不是形成模型的每个三角形。 （将这张图片与上一张进行比较。）

Answer 1

如果您在以下行中发表评论...

horseGeometry = horseGeometry.toNonIndexed();

...这意味着您创建了一个新的 (!) 几何体。只要您不将几何图形分配回Mesh.geometry，此代码就不会产生任何影响。所以解决方法是在使用toNonIndexed()后添加以下行：

horseMesh.geometry = horseGeometry;