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

如何解决THREE.js 无法将渐变颜色应用于导入的 OBJ 文件

我正在尝试从位于此处的名为 “WaltHead.obj” 的 THREE.js GIT 加载示例文件并为其着色：

https://github.com/mrdoob/three.js/blob/dev/examples/models/obj/walt/WaltHead.obj

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

我做了一个小提琴来让生活更轻松 - 但由于某种原因模型没有加载到小提琴文件中：

https://jsfiddle.net/gilomer88/tp2hkxne/27/

希望有人能修复它以便加载？

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

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

这是我的方便方法：

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

出于某种原因，从我的 makeSmoothGradientColorsForMesh() 方法返回的颜色返回如下：

Array(145440) [ NaN,NaN,… ]

解决方法

您的 c.lerpColors() 实现是错误的。您正在尝试将一个字符串传递给该方法 ("orange","white")，它无法识别并返回 NaN。

该方法需要两个 THREE.Color 对象，因此您应该先初始化它们：

// We use the strings to init our THREE.Colors
let color1 = new THREE.Color(c1);
let color2 = new THREE.Color(c2);

for(let i = 0; i < positionAttribute.count; i++) {
  vertex.fromBufferAttribute( positionAttribute,i );
  // Now we can use them for color lerping
  c.lerpColors( color1,color2,( vertex.z - aabb.min.z) / f );
  colorsArray.push(c.r,c.g,c.b); 
}