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

以下两个球体之间的差异——就其渐变颜色的应用而言，归结为一种说法：

sphereGeometry = sphereGeometry.toNonIndexed();

由于我非常喜欢

.tononindex（）

给我们带来的更流畅的外观，我尝试将其应用于THREE.js GIT上提供的一些导入的“.glb”模型，但它不起作用

例如，以下是我使用此处提供的马模型时发生的情况：

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

但是当我注释掉

.tononindex（）

行时，它给出了我想要的颜色-除了你肯定看到的三角形，这是我试图避免的外观：

以下是我加载对象的代码：

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

    }
}

函数loadAny3DModel（）{
loader.load（“./Horse.glb”），函数（theHorse）{
console.log（“=>“马”已经到了！！！\n”）；
var horseScene=theHorse.scene；
horseMesh=horsecene.children[0]；
var horseGeometry=horseMesh.geometry；
设horseMat=horseMesh.material；
var horseVertexPositionsArray=horseGeometry.attributes.position；
//以下是不起作用的命令：
//horseGeometry=horseGeometry.toNonIndexed（）；
//horseVertexPositionsArray=horseGeometry.attributes.position；
让颜色=新的三种颜色（）；
设colorsArray=[]；
for（设i=0；i

我应该怎么做才能使渐变更平滑

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

更新：

这里是我试图做的一个非常粗略的想法：将渐变延伸到整个模型上，而不是形成模型的每个三角形。（将此图像与上面的图像进行比较。）

---

如果您在下一行中发表评论

horseGeometry=horseGeometry.tononindex（）；

…这意味着您创建了一个新的（！）几何体。只要您不将几何体重新指定给

网格。几何体

，此代码将不会产生任何效果。因此，修复方法是在使用

Tononindex（）

后添加以下行：

horseMesh.geometry=horseGeometry；

你无法避免马上的三角形GLTF。这是一个非常低的多边形模型，因此你总是能够看到几何体。也许你想将它导入到3D编辑器（如Blender）中，并对其进行细分，使几何体变得更平滑、密度更高，然后你可以再次将其导出为GLTF。@Marquizzo我明白你的意思ng但即使我在Blender中更改模型的几何体并使其不那么三角形，问题仍然是一样的，即当我将模型导入

THREE.js

并调用

.toNonIndexed（）时

在它的几何体上，我所有的颜色都会完全消失。这就是我需要帮助的。找出解决办法，这样它就不会发生。好吧，它仍然不起作用。但我制作了一个JSFIDLE，让生活更简单：你的小提琴不起作用。我用你的代码增强了官方示例：谢谢你修复我的小提琴。好的，现在就不用了颜色又出现了——谢谢，因为你让它们在代码中使用

.tononindex

。但是，它们仍然不像我在原始问题中给出的球体示例那样平滑。这仍然是问题的主要目标：让渐变平滑地延伸到整个模型上——如操作所示设置为应用于模型中的每个三角形。我刚刚在Photoshop中快速制作了一张非常粗糙的图像来说明我的意思-请参见上面的更新。那么这是可行的吗？请检查。注意，马没有顶点法线，因此模型为平面着色。您需要禁用平面着色并手动计算顶点法线以获得更好的结果。哦，是的-这看起来正是我需要的！我将查看代码并尝试找出它-谢谢！