Colors THREE.js无法将渐变颜色应用于导入的OBJ文件

我正在尝试从THREE.jsGIT中加载一个名为“WaltHead.obj”的示例文件，该文件位于以下位置：

我可以将它加载到我的项目中，但当我尝试使用渐变颜色绘制它时，使用的代码已经100%适用于我的GLTF/GLB模型-它不适用于此“.obj”文件

我制作了一个小提琴，使生活更轻松-但出于某种原因，模型没有加载到小提琴文件中：

希望有人能修好它，让它加载

不管怎样，就像我说的，我试着用渐变来给它上色——但它显示的是完全黑色的。 代码在小提琴中，也在这里：

const loader = new OBJLoader();

loader.load( "https://github.com/mrdoob/three.js/blob/dev/examples/models/obj/walt/WaltHead.obj", function ( theScene ) {
       console.log("  =>'theScene' = ", theScene);

       theScene.traverse(function(child) {
       console.log("\n==>Traversing the Scene now...");
          if(child.isMesh) {
             console.log("1. 'child' - FULL MESH INFO = ", child);
      
             if(child.name) {
                console.log(" 2. 'child.name' = ", child.name);
                console.log(" 3. 'child.geometry' = ", child.geometry, "\n");

                if(child.name.startsWith("Mesh_Mesh_head")) {
                   // Calling a convenience method I made here - code below:
                   let theColors = makeSmoothGradientColorsForMesh(child, "orange", "white");

                   child.geometry.setAttribute("color", new THREE.Float32BufferAttribute(theColors, 3));     
                   child.material.vertexColors = true;
                   child.material.flatShading = false;
                } 
             } 
          } 
       }); 
  
      scene.add(theScene);
      theScene.position.set(0, 0, 0);
    }) 

以下是我的便利方法：

function makeSmoothGradientColorsForMesh(theMesh, c1, c2) {
   console.log("\n\n===>In 'makeSmoothGradientColorsForMesh()'!\n");
   console.log(">Incoming meshObject: \n", theMesh);

   let meshGeometry = theMesh.geometry;
   let meshMaterial = theMesh.material;

   // Do the Geometry-Dance:
   const positionAttribute = meshGeometry.getAttribute("position");
   console.log(">positionAttribute = \n", positionAttribute);
   meshGeometry.computeVertexNormals();

   // "BoundingBox" business:
   meshGeometry.computeBoundingBox();
   const aabb = meshGeometry.boundingBox;
   console.log(">aabb = \n", aabb);
   const f = aabb.max.z - aabb.min.z;
   const vertex = new THREE.Vector3();

   // COLORS business:
   let randomColor = new THREE.Color();
   let colorsArray = [];
   const c = new THREE.Color();                     

   console.log("positionAttribute.count = ", positionAttribute.count);

   for(let i = 0; i < positionAttribute.count; i++) {
      vertex.fromBufferAttribute( positionAttribute, i );
      c.lerpColors( c1, c2, ( vertex.z - aabb.min.z) / f );
      colorsArray.push(c.r, c.g, c.b); 
   }

   console.log("\n\n-->Will be returning the following colors:\n");
   console.log(colorsArray);

   return colorsArray;
}

您的

c.lerpColors（）

实现错误。您试图将字符串传递给该方法

（“橙色”、“白色”）

，但该方法无法识别并返回

NaN

该方法需要两个

三个.Color

对象，因此应首先初始化这些对象：

//我们使用字符串初始化三种颜色
设color1=新的三种颜色（c1）；
设color2=新的三种颜色（c2）；
for（设i=0；i

啊，早上好！当然我应该传递颜色，而不是字符串。我真傻！谢谢你，非常感谢@Marqizzo-你能告诉我为什么我的小提琴没有从THREE.js git加载“.obj”模型吗？很高兴知道我以后创作的小提琴。@Sirab33使用以下路径：@prisoner849完美-谢谢您，先生！

Array(145440) [ NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, … ]