使用Three.js绘制3D网络图形遇黑屏问题求解决方案

问题诊断 #

你的代码存在两个核心问题导致图形无法显示：

1. 相机未对准目标物体：默认情况下PerspectiveCamera朝向原点(0,0,0)，但你的立方体位于y=4的高度，相机在z=5的位置，视线完全没有覆盖到物体区域。
2. 已弃用的THREE.Geometry：你使用的THREE.Geometry在后续Three.js版本中已被移除，即使v0.119还兼容，也存在潜在的兼容性风险。

修复后的完整代码 #

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/three@0.119.0/build/three.min.js"></script>
    <style>
      body { margin: 0; }
      canvas { display: block; }
    </style>
  </head>
  <body>
    <script>
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      var node1_geometry = new THREE.BoxGeometry( 1, 1, 1 );
      var node1_material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
      var node1 = new THREE.Mesh( node1_geometry, node1_material );
      node1.position.set(-2, 4, 1);

      var node2_geometry = new THREE.BoxGeometry( 1, 1, 1 );
      var node2_material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
      var node2 = new THREE.Mesh( node2_geometry, node2_material );
      node2.position.set(2, 4, 1);

      // 用BufferGeometry替代已弃用的Geometry创建连线
      var edge_geometry = new THREE.BufferGeometry();
      var vertices = new Float32Array([
        node1.position.x, node1.position.y, node1.position.z,
        node2.position.x, node2.position.y, node2.position.z
      ]);
      edge_geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
      var edge_material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 2 } );
      var edge = new THREE.Line( edge_geometry, edge_material );

      scene.add( node1 );
      scene.add( node2 );
      scene.add( edge );

      // 调整相机位置并对准物体中心
      camera.position.set(0, 4, 8);
      camera.lookAt(new THREE.Vector3(0, 4, 1)); // 指向两个立方体的中间位置

      var animate = function () {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
      };

      animate();
    </script>
  </body>
</html>

关键修复点说明 #

• 相机调整：将相机位置移到(0,4,8)，与立方体处于同一y高度，再通过camera.lookAt()明确指向物体所在区域，确保视线覆盖目标。
• 几何体替换：使用官方推荐的THREE.BufferGeometry替代THREE.Geometry，提升性能同时避免版本兼容问题。
• 顶点数据处理：直接传入顶点坐标值而非对象引用，避免因引用关联导致的顶点数据异常。

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