How to draw line in diffrent parent

Questions
1

Hi,
I want draw lines.
When drawing a line between the children of different parents,
I have multiple parents…then,
Should I bring each parent’s position?
Isn’t there an easy way?
Do I have to draw like the 74th and 77th lines of the codepen example?
(lineGeometry.vertices.push)
codepen example: - https://codepen.io/Novice_/details/bGeyNQE

let camera, scene, renderer;
let isCameraMove = false;
let isTestCameraMove1 = false;
let controls;
init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 1000 );
    camera.position.z = 100;
    scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    controls = new THREE.OrbitControls( camera, renderer.domElement );
  

  //DownModels
    const DownLevel0geometry = new THREE.BoxGeometry( 10, 10, 10 );
    const DownLevel0material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
    const DownLevel0cube = new THREE.Mesh( DownLevel0geometry, DownLevel0material );
    scene.add( DownLevel0cube );

    const DownLevel1geometry = new THREE.BoxGeometry( 10, 10, 10 );
    const DownLevel1material = new THREE.MeshBasicMaterial( {color: 0xff1100} );
    const DownLevel1cube = new THREE.Mesh( DownLevel1geometry, DownLevel1material );
    DownLevel1cube.position.set(25, 0, 0);
    DownLevel0cube.add( DownLevel1cube );

    const DownLevel2geometry = new THREE.BoxGeometry( 10, 10, 10 );
    const DownLevel2material = new THREE.MeshBasicMaterial( {color: 0x00ff88} );
    const DownLevel2cube = new THREE.Mesh( DownLevel2geometry, DownLevel2material );
    DownLevel2cube.position.set(25, 0, 0);
    DownLevel1cube.add( DownLevel2cube );

    const DownLevel3geometry = new THREE.BoxGeometry( 10, 10, 10 );
    const DownLevel3material = new THREE.MeshBasicMaterial( {color: 0x8400ff} );
    const DownLevel3cube = new THREE.Mesh( DownLevel3geometry, DownLevel3material );
    DownLevel3cube.position.set(25, 0, 0);
    DownLevel2cube.add( DownLevel3cube );


    //UpModels
    const UpLevel0geometry = new THREE.CircleGeometry( 5, 32 );
    const UpLevel0material = new THREE.MeshBasicMaterial( {color: 0x8400ff} );
    const UpLevel0circle = new THREE.Mesh( UpLevel0geometry, UpLevel0material );
    UpLevel0circle.position.set(25, 50, 0);
    scene.add( UpLevel0circle );

    const UpLevel1geometry = new THREE.CircleGeometry( 5, 32 );
    const UpLevel1material = new THREE.MeshBasicMaterial( {color: 0x8400ff} );
    const UpLevel1circle = new THREE.Mesh( UpLevel1geometry, UpLevel1material );
    UpLevel1circle.position.set(25, 0, 0);
    UpLevel0circle.add( UpLevel1circle );

    const UpLevel2geometry = new THREE.CircleGeometry( 5, 32 );
    const UpLevel2material = new THREE.MeshBasicMaterial( {color: 0x8400ff} );
    const UpLevel2circle = new THREE.Mesh( UpLevel2geometry, UpLevel2material );
    UpLevel2circle.position.set(25, 0, 0);
    UpLevel1circle.add( UpLevel2circle );


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

    lineGeometry.vertices.push(new THREE.Vector3( DownLevel0cube.position.x, DownLevel0cube.position.y, DownLevel0cube.position.z ) );
    lineGeometry.vertices.push(new THREE.Vector3( UpLevel0circle.position.x, UpLevel0circle.position.y, UpLevel0circle.position.z) );

    lineGeometry.vertices.push(new THREE.Vector3( DownLevel0cube.position.x, DownLevel0cube.position.y, DownLevel0cube.position.z ) );
    lineGeometry.vertices.push(new THREE.Vector3( UpLevel1circle.position.x + UpLevel0circle.position.x, UpLevel1circle.position.y + UpLevel0circle.position.y, UpLevel1circle.position.z + UpLevel0circle.position.z) );

    lineGeometry.vertices.push(new THREE.Vector3( DownLevel0cube.position.x, DownLevel0cube.position.y, DownLevel0cube.position.z ) );
    lineGeometry.vertices.push(new THREE.Vector3( UpLevel2circle.position.x + UpLevel1circle.position.x + UpLevel0circle.position.x, UpLevel2circle.position.y + UpLevel1circle.position.y + UpLevel0circle.position.y, UpLevel2circle.position.z + UpLevel1circle.position.z + UpLevel0circle.position.z) );
    DownLevel0cube.add(LineObject);
}
function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
2

You can use Object3D.getWorldPosition to get a global position of both parents / objects inside parents, and then draw a line between them (just be sure to draw the line outside of either parent, otherwise it’ll inherit local transformations.)

3

thank you, but i am sorry, I didn’t understand
=> (just be sure to draw the line outside of either parent, otherwise it’ll inherit local transformations.)
this mean…

I used Object3D.getWorldPosition ,but failed.
the position is wrong result.

4

  1. Here’s a quick example of how adding objects and transformation inheritance works. You can add objects to other objects the same way you’d add them to a scene, but they will then follow the translation and rotation of their parents.

  2. Here’s an example on how to use world position to connect objects in world space.

5

Hi,
If it’s okay, please let me know why?

-url : Connect lines, same position but different result