Connect line between obj

Hi,
I want connect line yellow ball and red ball.

  1. yellow ball’s parent is FirstFloor
    1-1) three.scene.add(FirstFloor)
    1-2) FirstFloor.add(yellow ball)
  2. red ball’s parent is SecondFloor
    2-1) three.scene.add(SecondFloor)
    2-2) SecondFloor.add(red ball)

can I connect them?

    MakeLayer(){
    let FirstFloorGeometry = new THREE.BoxGeometry( 1000, 5, 1000 );
    let FirstFloorMaterial = new THREE.MeshBasicMaterial( {color: 0xfcba03} );
    let FirstFloor = new THREE.Mesh( FirstFloorGeometry, FirstFloorMaterial );
    FirstFloor.position.set(0, 270, 0);
    three.scene.add( FirstFloor );

    let SecondeFloorGeometry = new THREE.BoxGeometry( 1000, 5, 1000 );
    let SecondFloorMaterial = new THREE.MeshBasicMaterial( {color: 0x0095ff} );
    let SecondFloor = new THREE.Mesh( SecondFloorGeometry, SecondFloorMaterial );
    SecondFloor.position.set(0, 180, 0);
    three.scene.add( SecondFloor );
    }

    MakeYellowObjects(){
       const loader_PC = new FBXLoader();
       loader_PC.load("3dmodels/Ball/ball.FBX", model => {
       YellowObject = model;
       model.scale.set(40 , 40 , 40);
       model.position.set(VecPos.x, VecPos.y, VecPos.z );
       FirstFloor.add(model);
       model.children[0].material.color.set(0x62ff00);
       });
    }

    MakeRedObject() {
        const loader_PC = new FBXLoader();

        loader_PC.load("3dmodels/Ball/ball.FBX", model => {
          model.scale.set(40 , 40 , 40); 
          model.position.set(VecPos.x, VecPos.y, VecPos.z);
          model.children[0].material.color.setHex(0xff1000);

          let lineGeometry = new THREE.Geometry();
                    lineGeometry.vertices.push(new THREE.Vector3( YellowObject.position.x , YellowObject.position.y , YellowObject.position.z) );
          lineGeometry.vertices.push(new THREE.Vector3( VecPos.x , VecPos.y , VecPos.z) );
          let lineMaterial = new THREE.LineBasicMaterial( { color : 0x55eb34 });
          let LineObject = new THREE.Line(lineGeometry, lineMaterial);

          SecondLayer.add(model);
          SecondLayer.add(LineObject);  
        });
      }

my result

Right now, you are deriving the start and end vertex positions of your line from the position property of the FBX root object. Notice that this object is an instance of THREE.Group and its origin might not represent the actual origin of the asset’s geometry. Hence, I suggest you center the FBX models first via:

const box = new THREE.Box3().setFromObject( model );
const center = box.getCenter( new THREE.Vector3() );

model.position.x += ( model.position.x - center.x );
model.position.y += ( model.position.y - center.y );
model.position.z += ( model.position.z - center.z );

Hi,
I’m sorry to ask again.
I Want…The line position is updated as the layer moves.
Control Key : K OR L

I know that parents are not the same.
is it impossible ?

This is my codepen url.

and
This is my code in codepen.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
var FirstLayer, SecondLayer;
var firstcube , secondcube;
renderer.setSize(window.innerWidth , window.innerHeight );
// renderer.setClearColor(0xffcc00);
document.body.appendChild(renderer.domElement);

camera.position.z = 50;

document.addEventListener("keydown", onDocumentKeyDown, false);
 function onDocumentKeyDown(event) {
   let keyCode = event.which;

   if (keyCode === 75)
    {
      console.log("Keycode");
      SecondLayer.position.y += 5; 
    }
   else if (keyCode === 76)
    {
      console.log("Keycode");
      SecondLayer.position.y -= 5; 
      console.log(SecondLayer.position.y);
    }
 }

function InitLayer() {
      //FirstLayer
      let FirstLayerGeometry = new THREE.BoxGeometry( 1000, 5, 1000 );
      let FirstLayerMaterial = new THREE.MeshBasicMaterial( {color: 0xfcba03 , transparent: true, opacity: 0.1} );
      FirstLayer = new THREE.Mesh( FirstLayerGeometry, FirstLayerMaterial );
      FirstLayer.position.set(0, 80, 0);
      scene.add( FirstLayer );
      
      
      //SecondLayer
      let SecondLayerGeometry = new THREE.BoxGeometry( 1000, 5, 1000 );
      let SecondLayerMaterial = new THREE.MeshBasicMaterial( {color: 0x0095ff , transparent: true, opacity: 0.1} );
      SecondLayer = new THREE.Mesh( SecondLayerGeometry, SecondLayerMaterial );
      SecondLayer.position.set(0, -15, 0);
      scene.add( SecondLayer );
  }

function InitObjects () {
  var firstgeometry = new THREE.BoxGeometry(2, 2, 2);
  var firstmaterial = new THREE.MeshBasicMaterial({
    color: 0x970000
  });
  firstcube = new THREE.Mesh(firstgeometry, firstmaterial);
  firstcube.scale.set(3, 3, 3);
  firstcube.position.set(0 ,-70, 0);
  FirstLayer.add(firstcube);
}

function InitObjects_2() {
  var secondgeometry = new THREE.BoxGeometry(2, 2, 2);
  var secondmaterial = new THREE.MeshBasicMaterial({
    color: 0x970000
  });
  secondcube = new THREE.Mesh(secondgeometry, secondmaterial);
  secondcube.scale.set(3, 3, 3);
  secondcube.position.set(0 ,0, 0);
  SecondLayer.add(secondcube);
  
  let lineGeometry = new THREE.Geometry();
  lineGeometry.vertices.push(new THREE.Vector3( firstcube.position.x , firstcube.position.y , firstcube.position.z) );
  lineGeometry.vertices.push(new THREE.Vector3( secondcube.position.x , secondcube.position.y , secondcube.position.z) );

  let lineMaterial = new THREE.LineBasicMaterial( { color : 0x55eb34 });
  let LineObject = new THREE.Line(lineGeometry, lineMaterial);
  SecondLayer.add(LineObject);
}

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

InitLayer();
InitObjects();
InitObjects_2();
render();