希望有人可以修复它以便加载?无论哪种方式,就像我说的那样,我正在尝试使用渐变为它上色-但它显示为完全黑色.代码在小提琴中,也在这里: 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.objI'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.Colorslet 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文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!