Three.js技术问询：通过两个对角点创建线框立方体的可行性

完全没问题！在Three.js里，只要你有立方体的空间对角顶点（也就是三个坐标轴分量分别对应立方体的最小和最大值的两个点），就能轻松生成对应的线框立方体。下面给你两种实用的实现方法：

方法一：利用Three.js内置几何体（简洁高效） #

这种方法借助Three.js原生的BoxGeometry和EdgesGeometry，不用手动处理顶点，代码更简洁：

1. 处理输入点，计算立方体参数
   假设你已经有两个THREE.Vector3实例的对角点pointA和pointB，先算出立方体的最小/最大坐标、尺寸和中心：

   // 计算min和max点（确保拿到三个轴上的最小/最大值）
   const minPoint = new THREE.Vector3(
     Math.min(pointA.x, pointB.x),
     Math.min(pointA.y, pointB.y),
     Math.min(pointA.z, pointB.z)
   );
   const maxPoint = new THREE.Vector3(
     Math.max(pointA.x, pointB.x),
     Math.max(pointA.y, pointB.y),
     Math.max(pointA.z, pointB.z)
   );
   
   // 计算立方体的长宽高和中心位置
   const cubeSize = maxPoint.clone().sub(minPoint);
   const cubeCenter = minPoint.clone().add(cubeSize.clone().multiplyScalar(0.5));
   

2. 创建线框立方体
   用BoxGeometry生成立方体几何体，再通过EdgesGeometry提取边，最后用LineSegments渲染线框：

   // 创建立方体几何体并平移到正确位置
   const boxGeometry = new THREE.BoxGeometry(cubeSize.x, cubeSize.y, cubeSize.z);
   boxGeometry.translate(cubeCenter.x, cubeCenter.y, cubeCenter.z);
   
   // 提取几何体的边，创建线框材质
   const edgesGeometry = new THREE.EdgesGeometry(boxGeometry);
   const wireframeMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
   
   // 生成线框立方体并添加到场景
   const wireframeCube = new THREE.LineSegments(edgesGeometry, wireframeMaterial);
   scene.add(wireframeCube);
   

方法二：手动构建顶点与边（适合理解原理） #

如果你想深入了解线框的构成逻辑，可以手动定义立方体的8个顶点和12条边：

1. 定义顶点与边的索引
   基于之前算出的minPoint和maxPoint，列出所有顶点坐标，再定义每条边对应的顶点索引：

   // 8个顶点的坐标数组（按底面4个、顶面4个的顺序）
   const vertices = [
     minPoint.x, minPoint.y, minPoint.z,
     maxPoint.x, minPoint.y, minPoint.z,
     maxPoint.x, maxPoint.y, minPoint.z,
     minPoint.x, maxPoint.y, minPoint.z,
     minPoint.x, minPoint.y, maxPoint.z,
     maxPoint.x, minPoint.y, maxPoint.z,
     maxPoint.x, maxPoint.y, maxPoint.z,
     minPoint.x, maxPoint.y, maxPoint.z
   ];
   
   // 12条边的索引对（每两个数字代表一条边的两个顶点）
   const edgeIndices = [
     0,1, 1,2, 2,3, 3,0, // 底面四条边
     4,5, 5,6, 6,7, 7,4, // 顶面四条边
     0,4, 1,5, 2,6, 3,7  // 侧面四条竖边
   ];
   

2. 构建几何体并渲染
   创建BufferGeometry，设置顶点和索引，再生成线框：

   const customGeometry = new THREE.BufferGeometry();
   customGeometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
   customGeometry.setIndex(edgeIndices);
   
   const wireframeMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
   const customWireframeCube = new THREE.LineSegments(customGeometry, wireframeMaterial);
   scene.add(customWireframeCube);
   

注意事项 #

• 确保输入的两个点是空间对角顶点（三个轴上的分量分别为立方体的最小和最大值），如果只是面对角或边对角，计算出的立方体形状会不符合预期。
• LineSegments比Line更适合渲染线框，因为它只会渲染每对顶点之间的线段，不会连成一条连续折线，性能更优。
• 如果需要更粗的线条，注意原生LineBasicMaterial的lineWidth属性在部分浏览器/WebGL环境下不生效，此时可以使用LineMaterial或者通过后期处理实现。

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