如何在react-three-fiber中在两个网格间定位圆柱体？

要精准定位连接两个节点的圆柱体，核心是计算三个关键参数：圆柱体的位置、长度和旋转角度，以下是具体实现方案：

核心计算逻辑 #

假设两个节点的位置分别为 start = [x1, y1, z1] 和 end = [x2, y2, z2]：

1. 位置（中点）：圆柱体的中心应位于两个节点的中点，公式为 [(x1+x2)/2, (y1+y2)/2, (z1+z2)/2]
2. 长度：圆柱体的高度等于两个节点之间的直线距离，用三维距离公式计算：Math.sqrt((x2-x1)² + (y2-y1)² + (z2-z1)²)
3. 旋转角度：需要让圆柱体沿两个节点的连线方向对齐，可通过四元数将默认沿Y轴的圆柱体旋转到目标方向。

封装可复用的Link组件 #

直接封装一个组件来处理所有计算，方便在项目中复用：

import { useRef } from 'react';
import * as THREE from 'three';

function Link({ 
  start, 
  end, 
  color = 'rgb(255,0,0)', 
  radius = 0.1, 
  nodeRadius = 0.5 
}) {
  const cylinderRef = useRef();
  // 将位置转为Three.js向量
  const startVec = new THREE.Vector3(...start);
  const endVec = new THREE.Vector3(...end);
  
  // 计算方向向量并归一化
  const direction = endVec.clone().sub(startVec).normalize();
  
  // （可选）调整起点终点到球体表面，避免圆柱体穿入节点
  const adjustedStart = startVec.clone().add(direction.clone().multiplyScalar(nodeRadius));
  const adjustedEnd = endVec.clone().sub(direction.clone().multiplyScalar(nodeRadius));
  
  // 计算圆柱体中心位置
  const midPoint = adjustedStart.clone().add(adjustedEnd).multiplyScalar(0.5);
  // 计算圆柱体需要的长度
  const length = adjustedStart.distanceTo(adjustedEnd);
  
  // 计算旋转四元数：将默认Y轴方向转为目标方向
  const upVec = new THREE.Vector3(0, 1, 0);
  const rotationQuat = new THREE.Quaternion().setFromUnitVectors(upVec, direction);

  // 初始化圆柱体的位置、缩放和旋转
  if (cylinderRef.current) {
    cylinderRef.current.position.copy(midPoint);
    cylinderRef.current.scale.set(1, length / 2, 1); // 因为基础圆柱体高度为2，缩放一半匹配实际长度
    cylinderRef.current.setRotationFromQuaternion(rotationQuat);
  }

  return (
    <mesh ref={cylinderRef}>
      <cylinderGeometry args={[radius, radius, 2, 32]} />
      <meshStandardMaterial color={color} />
    </mesh>
  );
}

在项目中使用组件 #

将封装好的Link组件引入你的App，直接传入两个节点的位置即可：

import "./styles.css";
import { Canvas } from "@react-three/fiber";
import Link from './Link';

export default function App() {
  const color = "rgb(255,0,0)";
  const nodes = [
    [1, 0, 2],
    [-1, -1, 1],
    [1, -1, 0]
  ];

  return (
    <div className="App" style={{ height: "600px" }}>
      <Canvas camera={{ position: [0, 0, 6.5] }}>
        <ambientLight intensity={0.75} />
        <directionalLight intensity={2.25} position={[1, 1, 5]} />
        <group>
          {/* 渲染所有节点 */}
          {nodes.map((pos, idx) => (
            <mesh key={idx} position={pos}>
              <sphereGeometry args={[0.5, 32, 32]} />
              <meshStandardMaterial color={color} />
            </mesh>
          ))}
          {/* 渲染连接：比如连接第一个和第二个节点，第二个和第三个节点 */}
          <Link start={nodes[0]} end={nodes[1]} />
          <Link start={nodes[1]} end={nodes[2]} />
        </group>
      </Canvas>
    </div>
  );
}

关键细节说明 #

• 基础圆柱体的高度设为2是为了方便缩放，直接用实际长度除以2即可匹配目标高度
• 调整起点终点到球体表面的步骤是可选的，如果不需要严格贴合节点表面，可以跳过这一步，直接用原始的start和end计算中点和长度
• 使用四元数旋转比手动计算欧拉角更稳定，避免万向锁问题

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