THREE.js无法将渐变颜色应用于导入的OBJ文件 [英] THREE.js fails to apply Gradient colors to Imported OBJ file

问题描述

我正在尝试从位于以下位置的 THREE.js GIT加载名为"WaltHead.obj" 的示例文件并为其着色:

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，函数(theScene){console.log("=" theScene" ＝，theScene)；theScene.traverse(function(child){console.log("\ n ==>现在遍历场景...")；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")){//调用我在此处创建的便捷方法-下面的代码:let theColors = makeSmoothGradientColorsForMesh(child，"orange"，"white");child.geometry.setAttribute("color"，新的THREE.Float32BufferAttribute(theColors，3))；child.material.vertexColors = true;child.material.flatShading = false;}}}});scene.add(theScene);theScene.position.set(0，0，0);}) 

这是我的便捷方法:

 函数makeSmoothGradientColorsForMesh(theMesh，c1，c2){console.log("\ n \ n ===>在'makeSmoothGradientColorsForMesh()'！\ n")中；console.log(传入的meshObject:\ n"，theMesh)；让meshGeometry = theMesh.geometry;让meshMaterial = theMesh.material;//做几何舞蹈:const positionAttribute = meshGeometry.getAttribute("position")；console.log(> positionAttribute = \ n"，positionAttribute)；meshGeometry.computeVertexNormals();//"BoundingBox"商业:meshGeometry.computeBoundingBox();const aabb = meshGeometry.boundingBox;console.log("aabb = \ n"，aabb)；const f = aabb.max.z-aabb.min.z;const vertex = new THREE.Vector3();//颜色业务:让randomColor = new THREE.Color();让colorsArray = [];const c = new THREE.Color();console.log("positionAttribute.count ="，positionAttribute.count)；for(让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->将返回以下颜色:\ n")；console.log(colorsArray);返回colorsArray;} 

由于某种原因，我的 makeSmoothGradientColorsForMesh()方法返回的颜色如下:

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

解决方案

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

该方法需要两个 THREE.Color 对象，因此您应该首先初始化这些对象:

 //我们使用字符串来初始化我们的THREE.Colors让color1 = new THREE.Color(c1);让color2 = new THREE.Color(c2);for(让i = 0; i< positionAttribute.count; i ++){vertex.fromBufferAttribute(positionAttribute，i);//现在我们可以将它们用于色彩控制c.lerpColors(color1，color2，(vertex.z-aabb.min.z)/f);colorsArray.push(c.r，c.g，c.b);} 

I'm trying to load and color a sample file from the THREE.js GIT called "WaltHead.obj" located here:

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

I'm able to load it into my project, but when I try to paint it with gradient colors using code that has already worked 100% for me with GLTF/GLB models - it doesn't work with this ".obj" file.

I made a fiddle to make life easier - but for some reason the model isn't loading into the fiddle file:

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

Hopefully someone can fix it so it loads?

Either way, like I said, I'm trying to color it with gradients - but it's showing up totally black. The code is in the fiddle, and also here:

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

Here's my convenience method:

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

For some reason, the colors coming back from my makeSmoothGradientColorsForMesh() method, return as follows:

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

解决方案

Your c.lerpColors() implementation is wrong. You're trying to pass a string into that method ("orange", "white"), which it won't recognize and return NaN.

That method is expecting two THREE.Color objects, so you should initialize those first:

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

这篇关于THREE.js无法将渐变颜色应用于导入的OBJ文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！