Question

我正在使用3D Force Graph在Angular项目中创建3D图表可视化，并且需要使用Blender设计的3D模型作为图表中的节点。我尝试了以下代码，但使用three.js导入的对象返回undefined，并且多次生成以下警告。

Offscreen-For-WebGL-0000014E33B8D990]RENDER WARNING: Render count or primcount is 0.

代码如下：

＆＃13;

var self = this;
var loader = new THREE.JSONLoader();
var house = loader.load("assets/model/house.json",
    function ( obj ) {
      // After object is loaded      
      console.log("house -- "+house);     // returns undefined
      self.showGraph(gData,house,themeNum);
      console.log("graph drawn");
    },
    // onProgress callback
    function ( xhr ) {
      console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
    },
    // onError callback
    function ( err ) {
      console.error( 'An error occurred -- '+err );
    }
);
    
// function to draw the graph -- to be executed on 3D model load
showGraph(gData:any, house:any, themeNum: any){
    const Graph = ForceGraph3D()
      (document.getElementById('3d-graph'))
      .nodeThreeObject(({ group }) => new THREE.Mesh(
        [
          new THREE.BoxGeometry(Math.random() * 20, Math.random() * 20, Math.random() * 20),          
          house,
          new THREE.CylinderGeometry(Math.random() * 10, Math.random() * 10, Math.random() * 20),
          new THREE.DodecahedronGeometry(Math.random() * 10),
          new THREE.SphereGeometry(Math.random() * 10),
          new THREE.TorusGeometry(Math.random() * 10, Math.random() * 2),
          new THREE.TorusKnotGeometry(Math.random() * 10, Math.random() * 2)
        ][group],
        new THREE.MeshLambertMaterial({
          color: this.themes[themeNum][group],
          transparent: true,
          opacity: 0.75
        })
      ))
        .nodeAutoColorBy('group')  
        .onNodeClick(node => {    
          this.attach3DNodeClickEvent(node);
        })      
        .graphData(gData); 
  }

＆＃13;

使用three.js中可用的其他形状绘制图形，但导入的3D模型返回undefined，因此未在图形中显示（请参见没有形状的链接）。（根据节点组分配形状。）

我有Blender 2.79和最新的Blender JSON导出器以及来自Github的three.min.js。

导出的house.json文件如下所示。我在导出时检查了Face Materials选项。

＆＃13;

{
    "geometries":[{
        "data":{
            "colors":[],
            "vertices":[-1,-1,-1,-1,1,-1,1,1,-1,1,-1,-1,-1,-0.999999,0.53238,-0.999999,1,0.53238,1,1,0.53238,1,-1,0.53238,1.3411e-07,1.78814e-07,1.22749,-0.481218,0.446494,0.784553,-1,-1,-1,-1,1,-1,1,-1,-1,-1,-0.999999,0.53238,-0.999999,1,0.53238,1,1,-1,1,1,0.53238,1,-1,0.53238,-1,-1.00272,0.536646,-0.999999,0.997281,0.536646,1,-1.00272,0.536646,1,0.99728,0.536646,1.33285e-07,-0.00271987,1.23176,-1,-1.00272,-0.995734,-1,0.99728,-0.995734,1,-1.00272,-0.995734,-1,-1.00272,0.536646,-0.999999,0.997281,0.536646,1,0.99728,-0.995734,1,0.99728,0.536646,1,-1.00272,0.536646,-1,-1.00272,0.536646,-0.999999,0.997281,0.536646,1,-1.00272,0.536646,1,0.99728,0.536646,1.33285e-07,-0.00271987,1.23176,-1,-1.00272,-0.995734,-1,0.99728,-0.995734,1,-1.00272,-0.995734,-1,-1.00272,0.536646,-0.999999,0.997281,0.536646,1,0.99728,-0.995734,1,0.99728,0.536646,1,-1.00272,0.536646,-1,-1,-1,-1,1,-1,1,-1,-1,1,1,-1,1,1,0.53238,1,-1,0.53238,1,1,0.53238,1,-1,0.53238,-1,-1.00272,0.536646,-0.999999,0.997281,0.536646,1,-1.00272,0.536646,1,0.99728,0.536646,1.33285e-07,-0.00271987,1.23176,-1,-1.00272,-0.995734,-1,0.99728,-0.995734,1,-1.00272,-0.995734,-1,-1.00272,0.536646,-0.999999,0.997281,0.536646,1,0.99728,-0.995734,1,0.99728,0.536646,1,-1.00272,0.536646,-1,-1,-1,-1,1,-1,1,-1,-1,1,1,-1,1,1,0.53238,1,-1,0.53238,1,1,0.53238,1,-1,0.53238,-1,-1.00272,0.536646,-0.999999,0.997281,0.536646,1,-1.00272,0.536646,1,0.99728,0.536646,1.33285e-07,-0.00271987,1.23176,-1,-1.00272,-0.995734,-1,0.99728,-0.995734,1,-1.00272,-0.995734,-1,-1.00272,0.536646,-0.999999,0.997281,0.536646,1,0.99728,-0.995734,1,0.99728,0.536646,1,-1.00272,0.536646,-1,-3.61101,-1,-1,-1.61101,-1,1,-3.61101,-1,1,-1.61101,-1,1,-1.61101,0.53238,1,-3.61101,0.53238,1,-1.61101,0.53238,1,-3.61101,0.53238,-1,-3.61373,0.536646,-0.999999,-1.61373,0.536646,1,-3.61373,0.536646,1,-1.61373,0.536646,1.33285e-07,-2.61373,1.23176,-1,-3.61373,-0.995734,-1,-1.61373,-0.995734,1,-3.61373,-0.995734,-1,-3.61373,0.536646,-0.999999,-1.61373,0.536646,1,-1.61373,-0.995734,1,-1.61373,0.536646,1,-3.61373,0.536646],
            "normals":[-0,-0,0,1,-5.66244e-07,-3.61076e-07,2.83122e-07,1,-1.36139e-07,-1,5.66244e-07,3.61076e-07,2.72162e-07,0.570765,0.821113,0.424942,0.763253,0.486693,1,-2.43996e-07,-1.55587e-07,-0.424941,0.763251,0.486697,1,-2.38419e-07,-1.52027e-07,-1,-0,0,-2.13617e-07,-0.843167,-0.537651,2.13617e-07,0.843167,0.537651,-1.63325e-07,-0.843168,-0.537651,-1,2.08616e-07,1.33025e-07,1,-2.08616e-07,-1.33025e-07,-1,6.70993e-07,4.27864e-07,-0,0,-1,-0.570765,-0,0.821113,1,-0,-1.55587e-07,0.570765,-0,0.821114,-0,-0,-1,0.570765,-1.19071e-07,0.821114,-1.36081e-07,-0.570765,0.821113,-0.570765,3.23192e-07,0.821114,-1,2.83122e-07,5.83451e-08,1,-2.23517e-07,-1.75035e-07,-2.38419e-07,-1,3.11174e-07,-0,-0,1,-0,-0,1,-0,0,-1,-1,-0,4.27865e-07],
            "uvs":[],
            "faces":[35,36,38,59,57,2,0,0,0,0,35,13,14,27,26,0,1,1,1,1,35,1,0,10,11,2,0,0,0,0,35,1,5,6,2,2,2,2,2,2,35,43,39,60,64,0,0,0,0,0,35,5,1,11,14,2,0,0,0,0,35,5,4,18,19,0,3,3,3,3,34,6,5,8,0,4,4,4,35,8,5,19,22,0,5,5,5,5,35,15,16,29,28,2,6,6,6,6,35,6,8,22,21,0,7,7,7,7,35,12,15,28,25,2,8,8,8,8,35,7,4,13,17,0,0,0,0,0,35,3,2,15,12,2,0,0,0,0,35,0,3,12,10,2,0,0,0,0,35,4,5,14,13,0,0,0,0,0,35,2,6,16,15,2,0,0,0,0,35,26,27,40,39,0,0,0,0,0,35,22,19,32,35,0,0,0,0,0,35,28,29,42,41,2,0,0,0,0,35,21,22,35,34,0,0,0,0,0,35,25,28,41,38,2,0,0,0,0,35,27,24,37,40,2,0,0,0,0,35,11,10,23,24,2,9,9,9,9,35,4,7,20,18,0,10,10,10,10,35,17,13,26,30,0,11,11,11,11,35,10,12,25,23,2,12,12,12,12,35,16,17,30,29,0,13,13,13,13,35,7,6,21,20,0,14,14,14,14,35,14,11,24,27,2,15,15,15,15,35,32,31,52,53,0,0,0,0,0,35,37,36,57,58,2,0,0,0,0,35,39,40,61,60,0,0,0,0,0,35,2,3,46,47,2,0,0,0,0,35,35,32,53,56,0,0,0,0,0,35,16,6,48,50,2,0,0,0,0,35,24,23,36,37,2,0,0,0,0,35,19,18,31,32,0,0,0,0,0,35,30,26,39,43,0,0,0,0,0,35,23,25,38,36,2,0,0,0,0,35,18,20,33,31,0,0,0,0,0,35,29,30,43,42,0,0,0,0,0,35,20,21,34,33,0,0,0,0,0,35,51,50,71,72,0,0,0,0,0,35,55,56,77,76,0,0,0,0,0,35,59,62,83,80,2,0,0,0,0,35,48,49,70,69,0,0,0,0,0,35,61,58,79,82,2,0,0,0,0,35,47,46,67,68,2,0,0,0,0,35,54,55,76,75,0,0,0,0,0,35,45,47,68,66,2,0,0,0,0,35,31,33,54,52,0,0,0,0,0,35,42,43,64,63,0,0,0,0,0,35,0,1,45,44,2,0,0,0,0,35,33,34,55,54,0,0,0,0,0,35,3,0,44,46,2,0,0,0,0,35,40,37,58,61,2,0,0,0,0,35,38,41,62,59,2,0,0,0,0,35,17,16,50,51,0,0,0,0,0,35,34,35,56,55,0,0,0,0,0,35,1,2,47,45,2,0,0,0,0,35,41,42,63,62,2,0,0,0,0,35,6,7,49,48,0,0,0,0,0,35,7,17,51,49,0,0,0,0,0,35,65,66,87,86,2,0,0,0,0,35,81,82,103,102,0,16,16,16,16,35,71,69,90,92,2,0,0,0,0,35,77,74,95,98,0,17,17,17,17,35,70,72,93,91,0,0,0,0,0,35,83,84,105,104,2,18,18,18,18,35,72,71,92,93,0,16,16,16,16,35,76,77,98,97,0,19,19,19,19,35,62,63,84,83,2,0,0,0,0,35,49,51,72,70,0,0,0,0,0,35,56,53,74,77,0,0,0,0,0,35,50,48,69,71,2,0,0,0,0,35,60,61,82,81,0,0,0,0,0,35,44,45,66,65,2,0,0,0,0,35,58,57,78,79,2,0,0,0,0,35,53,52,73,74,0,0,0,0,0,35,64,60,81,85,0,0,0,0,0,35,46,44,65,67,2,0,0,0,0,35,57,59,80,78,2,0,0,0,0,35,52,54,75,73,0,0,0,0,0,35,63,64,85,84,0,0,0,0,0,35,86,87,89,88,2,20,20,20,20,35,90,91,93,92,0,0,0,0,0,34,96,97,98,0,21,21,21,34,94,96,98,0,22,22,22,34,95,94,98,0,23,23,23,35,99,102,103,100,2,24,24,24,24,35,104,105,106,101,2,25,25,25,25,35,102,99,101,106,2,26,26,26,26,35,79,78,99,100,2,0,0,0,0,35,74,73,94,95,0,27,27,27,27,35,85,81,102,106,0,27,27,27,27,35,67,65,86,88,2,28,28,28,28,35,78,80,101,99,2,29,29,29,29,35,73,75,96,94,0,16,16,16,16,35,84,85,106,105,0,27,27,27,27,35,66,68,89,87,2,16,16,16,16,35,75,76,97,96,0,16,16,16,16,35,68,67,88,89,2,27,27,27,27,35,82,79,100,103,2,30,30,30,30,35,69,70,91,90,0,27,27,27,27,35,80,83,104,101,2,16,16,16,16]
        },
        "name":"CubeGeometry.2",
        "uuid":"1D367B89-D7FF-406F-90CF-EAEE8DFD2C3F",
        "materials":[{
            "doubleSided":false,
            "opacity":1,
            "DbgIndex":0,
            "visible":true,
            "depthWrite":true,
            "blending":1,
            "DbgName":"Material",
            "colorEmissive":[0,0,0],
            "DbgColor":15658734,
            "wireframe":false,
            "colorDiffuse":[0.00340347,0.265646,0.64],
            "shading":"phong",
            "colorSpecular":[0.5,0.5,0.5],
            "depthTest":true,
            "specularCoef":50,
            "vertexColors":false,
            "transparent":false
        },{
            "doubleSided":false,
            "opacity":1,
            "DbgIndex":1,
            "visible":true,
            "depthWrite":true,
            "blending":1,
            "DbgName":"Material.001",
            "colorEmissive":[0,0,0],
            "DbgColor":15597568,
            "wireframe":false,
            "colorDiffuse":[0.64,0.522705,0.194265],
            "shading":"phong",
            "colorSpecular":[0.5,0.5,0.5],
            "depthTest":true,
            "specularCoef":50,
            "vertexColors":false,
            "transparent":false
        },{
            "doubleSided":false,
            "opacity":1,
            "DbgIndex":2,
            "visible":true,
            "depthWrite":true,
            "blending":1,
            "DbgName":"Material.002",
            "colorEmissive":[0,0,0],
            "DbgColor":60928,
            "wireframe":false,
            "colorDiffuse":[0.8,0.8,0.8],
            "shading":"phong",
            "colorSpecular":[0.5,0.5,0.5],
            "depthTest":true,
            "specularCoef":50,
            "vertexColors":false,
            "transparent":false
        }],
        "type":"Geometry"
    }],
    "materials":[{
        "shininess":50,
        "blending":1,
        "vertexColors":0,
        "specular":8355711,
        "uuid":"C4F1B257-3506-4E1C-A581-619B0FE029E1",
        "emissive":0,
        "color":17315,
        "name":"Material",
        "depthTest":true,
        "type":"MeshPhongMaterial",
        "depthWrite":true
    },{
        "shininess":50,
        "blending":1,
        "vertexColors":0,
        "specular":8355711,
        "uuid":"F2C9FF35-9ED6-45DF-B2D8-F2935B87BFAB",
        "emissive":0,
        "color":10716465,
        "name":"Material.001",
        "depthTest":true,
        "type":"MeshPhongMaterial",
        "depthWrite":true
    },{
        "shininess":50,
        "blending":1,
        "vertexColors":0,
        "specular":8355711,
        "uuid":"A71FE7F3-E5A4-4306-8F59-198C016C08A4",
        "emissive":0,
        "color":13421772,
        "name":"Material.002",
        "depthTest":true,
        "type":"MeshPhongMaterial",
        "depthWrite":true
    }],
    "animations":[{
        "fps":24,
        "name":"default",
        "tracks":[]
    }],
    "metadata":{
        "version":4.4,
        "generator":"io_three",
        "sourceFile":"house.blend",
        "type":"Object"
    },
    "textures":[],
    "images":[],
    "object":{
        "matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
        "children":[{
            "name":"Camera",
            "uuid":"169B1981-2D8B-459D-B3D3-F4CCE910665F",
            "matrix":[-0.685921,0,0.727676,0,0.324013,0.895396,0.305421,0,-0.651558,0.445271,-0.61417,0,-7.48113,5.34367,-6.50764,1],
            "visible":true,
            "type":"PerspectiveCamera",
            "far":100,
            "near":0.1,
            "aspect":1.77778,
            "fov":28.8415
        },{
            "name":"Cube",
            "uuid":"79970BCB-5486-4B8D-BC8B-71E259CC3B6A",
            "matrix":[-1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,1],
            "visible":true,
            "type":"Mesh",
            "material":["C4F1B257-3506-4E1C-A581-619B0FE029E1","F2C9FF35-9ED6-45DF-B2D8-F2935B87BFAB","A71FE7F3-E5A4-4306-8F59-198C016C08A4"],
            "castShadow":true,
            "receiveShadow":true,
            "geometry":"1D367B89-D7FF-406F-90CF-EAEE8DFD2C3F"
        },{
            "name":"Lamp",
            "uuid":"FE6AE0D8-B40F-4613-9635-6EF11E990ECA",
            "matrix":[0.290865,-0.0551891,0.955171,0,0.771101,0.604525,-0.199883,0,-0.566393,0.794672,0.218391,0,-4.07625,5.90386,1.00545,1],
            "visible":true,
            "type":"PointLight",
            "color":16777215,
            "intensity":1,
            "distance":0,
            "decayExponent":2
        }],
        "uuid":"CD09763F-8B2D-4E50-A1CF-895409665508",
        "type":"Scene"
    }
}

＆＃13;

我在这里做错了什么？非常感谢任何帮助。

对这个相当长的问题感到抱歉。

Answer 1

Blender出口商今年最终会被删除，因此我建议您尝试使用glTF Blender Exporter。 three.js有一个非常好的GLTFLoader，您可以将其用作JSONLoader的替代。

这是一种更加强大且面向未来的方法。

无法使用THREE.js

1 个答案: