<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
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 );

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.