无法使用 THREE.js 导入 Blender 2.79 JSON

Posted 2023-03-23

【中文标题】无法使用 THREE.js 导入 Blender 2.79 JSON

【英文标题】：Cannot import Blender 2.79 JSON using THREE.js

【发布时间】：2018-08-31 12:57:50

【问题描述】：

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

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

代码如下：

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

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

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

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

    "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"
    

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

抱歉这个问题有点长。

【参考方案1】：

Blender 导出器最终将在今年被移除，所以我建议你改用 glTF Blender Exporter。 three.js 有一个很好的 GLTFLoader，你可以用它来代替 JSONLoader。

这是一种更加稳健且面向未来的方法。

【讨论】：

使用 var loader = new THREE.GLTFLoader() 会给出错误声明 GLTFLoader is not a constructor。如何在 Angular 项目中导入 GLTFLoader？

是的，GLTFLoader 仍然是示例的一部分。我希望我们可以在某个时候将其移至核心。无论如何，我不熟悉 Angular 项目的结构。您需要 GLTFLoader 作为模块吗？

可以像npmjs.com/package/three-gltf-loader?activeTab=readme一样使用yarn导入它。

也许吧。 TBH，在这种情况下我不知道一个好的解决方案。我希望其他人可以给你一个建议。