我需要用第一张图的数据画圆柱体，把两个圆柱体的B点不重合（像第二张图）

Question

**我需要用第一张图的数据画圆柱体，把两个圆柱体的B点不重合（如第二张图）**

var geometry = new THREE.CylinderGeometry(10, 10,151.02648774304458, 20, 1, false); 
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(1,75.5,1);

scene.add(mesh);

var material1 = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
var geometry1 = new THREE.CylinderGeometry(10, 10,158.8741640418605, 20, 1, false); 
var mesh1 = new THREE.Mesh(geometry1, material1); 
mesh1.position.set(-30,217,32.5);
mesh1.rotation.set(2,151,2);


scene.add(mesh1);

Answer 1

您必须将红色圆柱体添加到 Group。以这种方式设置位置，即圆柱体的底部位于 (0, 0, 0)。以这种方式设置组的位置，它的原点在黑色圆柱体的顶部。
最后你必须轮换组：

let height = 151.02648774304458;
let height1 = 158.8741640418605;

var geometry = new THREE.CylinderGeometry(10, 10, height, 20, 1, false); 
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(1, 75.5, 1);

scene.add(mesh);

var material1 = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
var geometry1 = new THREE.CylinderGeometry(10, 10, height1, 20, 1, false); 
var mesh1 = new THREE.Mesh(geometry1, material1); 
mesh1.position.set(0, height1/2, 0);

group = new THREE.Group();
group.position.set(mesh.position.x, mesh.position.y + height/2, mesh.position.z);
group.add(mesh1);

group.rotation.set(...);

scene.add(group);

(function onLoad() {
  var container, camera, scene, renderer, orbitControls;
  
  init();
  animate();

  function init() {
    container = document.getElementById('container');
    
    renderer = new THREE.WebGLRenderer({
      canvas: my_canvas,
      antialias: true,
      alpha: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    //container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 200, -400);
    camera.lookAt( 0, 0, 0 );

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    scene.add(camera);
    
    window.onresize = function() {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
    }
    
    orbitControls = new THREE.OrbitControls(camera, container);
    
    createModel();

  }

  var group;
  function createModel() {

    var material = new THREE.MeshPhongMaterial({color:'#ff0000'});
    var material1 = new THREE.MeshPhongMaterial({color:'#000000'});

    let height = 151.02648774304458;
    let height1 = 158.8741640418605;

    var geometry = new THREE.CylinderGeometry(10, 10, height, 20, 1, false); 
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(1, 75.5, 1);

    scene.add(mesh);

    var material1 = new THREE.MeshBasicMaterial({ color: 0xff0000 }); 
    var geometry1 = new THREE.CylinderGeometry(10, 10, height1, 20, 1, false); 
    var mesh1 = new THREE.Mesh(geometry1, material1); 
    mesh1.position.set(0, height1/2, 0);

    group = new THREE.Group();
    group.position.set(mesh.position.x, mesh.position.y + height/2, mesh.position.z);
    group.add(mesh1);

    //group.rotation.set(2, 151, 2);

    scene.add(group);
  }

  var rotate = 0.0;
  function animate() {
  
    group.rotation.set(0, 0, rotate);
    rotate += 0.01;
    requestAnimationFrame(animate);
    orbitControls.update();
    render();
  }

  function render() {
    renderer.render(scene, camera);
  }
})();

<script src="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115/examples/js/controls/OrbitControls.js"></script>
<div id="container"><canvas id="my_canvas"> </canvas></div>

要通过特定矢量设置特定旋转，我建议通过 .setRotationFromQuaternion 设置旋转。
Quaternion 定义了如何从向上的方向(0, 1, 0) 旋转到目标方向。目标方向是从关节到上圆柱体端点的矢量（-62-1、283-151、61-1）：

例如：

let upVector = new THREE.Vector3(0, 1, 0);
let targetVector = new THREE.Vector3(-62 - 1, 283 - height, 61 - 1);
let quaternion = new THREE.Quaternion().setFromUnitVectors(
    upVector, targetVector.normalize());
group.setRotationFromQuaternion(quaternion)

我需要用第一张图的数据画圆柱体，把两个圆柱体的B点不重合（像第二张图）

I need to use the data from first picture to draw cylinder,put two cylinders point B is not coincide(like second picture)

rotation

three.js