无法使用THREE.js导入Blender 2.79 JSON文件的技术求助

看起来你碰到的问题主要来自两个核心点：THREE.JSONLoader的异步加载特性，以及这个Loader本身已被废弃导致的兼容性问题，再加上模型加载失败引发的渲染警告。我来一步步帮你梳理解决：

1. 为什么loader.load()返回undefined？ #

THREE.JSONLoader.load()是异步方法——当你执行var house = loader.load(...)时，加载请求刚被发送，还没完成，所以house自然是undefined。你必须通过回调函数或Promise来获取加载完成后的模型对象。

更关键的是：THREE.js从r125版本开始就彻底废弃了JSONLoader，官方推荐使用ObjectLoader（针对旧版JSON格式模型）或更现代的GLTFLoader（强烈推荐，因为glTF是当前3D模型的标准格式，Blender也能完美导出）。

2. 渲染警告：Render count or primcount is 0的原因 #

这个警告本质是你的节点没有有效的可渲染几何体——要么模型加载失败，要么没有正确将模型挂载到3D Force Graph的节点上，导致渲染时没有可绘制的元素。

具体修复步骤（推荐使用GLTFLoader） #

第一步：确保Angular项目依赖正确 #

如果还没安装相关依赖，执行以下命令：

npm install three 3d-force-graph

GLTFLoader现在是three.js的官方附加组件，可直接从three/addons/loaders/GLTFLoader.js导入。

第二步：从Blender导出正确的glTF模型 #

打开你的Blender模型：

• 清理冗余：删除空对象、未使用的材质，确保模型原点在几何中心（方便后续在图中定位）
• 导出选择glTF 2.0格式，勾选“导出选中对象”（仅导出需要的模型），将导出的.glb或.gltf文件放到Angular项目的assets文件夹下。

第三步：在Angular组件中正确加载模型并替换节点 #

以下是完整示例代码，注意异步加载的顺序处理，以及如何将模型绑定到力导向图的节点上：

import { Component, AfterViewInit } from '@angular/core';
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import ForceGraph3D from '3d-force-graph';

@Component({
  selector: 'app-3d-graph',
  template: '<div id="3d-graph-container" style="width: 100%; height: 80vh;"></div>'
})
export class Graph3dComponent implements AfterViewInit {
  private forceGraph: any;
  private houseModel: THREE.Object3D | null = null;

  ngAfterViewInit(): void {
    // 先加载模型，完成后再初始化力导向图
    this.loadHouseModel().then(() => {
      this.initForceGraph();
    }).catch(err => {
      console.error('模型加载失败:', err);
    });
  }

  private loadHouseModel(): Promise<void> {
    return new Promise((resolve, reject) => {
      const loader = new GLTFLoader();
      // 替换为你的模型路径
      loader.load('assets/models/house.glb', 
        (gltf) => {
          // 克隆模型，避免复用同一实例导致的渲染冲突
          this.houseModel = gltf.scene.clone();
          // 根据你的图比例调整模型大小
          this.houseModel.scale.set(2, 2, 2);
          resolve();
        },
        (progress) => {
          console.log(`加载进度: ${(progress.loaded / progress.total * 100).toFixed(2)}%`);
        },
        (err) => {
          reject(err);
        }
      );
    });
  }

  private initForceGraph(): void {
    this.forceGraph = ForceGraph3D()(document.getElementById('3d-graph-container')!)
      .graphData({
        nodes: [
          { id: 'node1', name: '住宅节点1' },
          { id: 'node2', name: '住宅节点2' }
          // 你的节点数据
        ],
        links: [
          { source: 'node1', target: 'node2' }
          // 你的连线数据
        ]
      })
      // 替换默认节点为自定义3D模型
      .nodeThreeObject(() => {
        // 每次创建节点时克隆模型实例，避免复用冲突
        return this.houseModel?.clone() || new THREE.Mesh(
          // 备用几何体：模型加载失败时显示红色立方体
          new THREE.BoxGeometry(2, 2, 2),
          new THREE.MeshBasicMaterial({ color: 0xff0000 })
        );
      });
  }
}

额外注意事项 #

• 异步加载顺序：必须等模型加载完成后再初始化力导向图，否则节点找不到模型会触发渲染警告。
• 模型调整：Blender导出的模型可能大小或位置偏移，可通过scale.set(x,y,z)调整大小，position.set(x,y,z)修正原点。
• 路径验证：确保模型文件在assets文件夹下，且angular.json的assets配置包含该路径（默认已包含整个assets文件夹）。
• 错误排查：如果仍有问题，查看浏览器控制台的具体错误（比如404说明路径错误，格式错误则是模型导出有问题），也可以用three.js官方在线编辑器验证模型是否能正常加载。

内容的提问来源于stack exchange，提问作者Fleur