An imported 3D model and a geometry in same canvas/scene

Questions
1

On time relevant replies makes me want to post all my doubts here…and so this time my doubt goes like this:
I imported a 3d .gltf model using three.js and I have a 3d geometry created, but both opens in different window

Screenshot (11)
Screenshot (11)1837×844 25.2 KB
Screenshot (15)
Screenshot (15)1872×895 188 KB
.
1.How can I open both of them in a single window?
2.How can I get the coordinates of the 3D model imported? Because I want to place the 3D geometry on specific locations/coordinates(if known) of the 3D model.

2

What do you mean by that? Can you please explain in more detail how your app is structured? Sharing your code (possibly as a live example) is even better to clarify your issue.

3 
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">

  <meta name="description" content="">

  <meta name="author" content="">

  <title>CAMERA FOV Visualization</title>

  <!-- Bootstrap core CSS -->

  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />

  <!-- Custom styles for this template -->

  <link href="css/simple-sidebar.css" rel="stylesheet">

</head>

<body>

  <div class="d-flex" id="wrapper">

    <!-- Sidebar -->

    <div class="bg-light border-right" id="sidebar-wrapper">

      <div class="sidebar-heading font-weight-bold">CAMERA FOV Visualization</div>

      <div class="list-group list-group-flush">

        <a href="#" class="list-group-item list-group-item-action bg-light" id="callCartoScene">

          Car&nbsp;&nbsp;

          <i class="fa fa-car" aria-hidden="true"></i>

        </a>

        <a href="#" class="list-group-item list-group-item-action bg-light" id="callFOVtoScene">

          Fov&nbsp;&nbsp;

          <i class="fa fa-camera" aria-hidden="true"></i>

        </a>

        <a href="#" class="list-group-item list-group-item-action bg-light">

          Reset&nbsp;&nbsp;

          <i class="fa fa-refresh" aria-hidden="true"></i>

        </a>

      </div>

    </div>

    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->

    <div id="page-content-wrapper">

      <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">

        <button class="btn btn-primary" id="menu-toggle">

          <i class="fa fa-arrows-h" aria-hidden="true"></i>

        </button>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

          <span class="navbar-toggler-icon"></span>

        </button>

      </nav>

      <div class="container-fluid" id="showCanvasHere">

        <!-- you can load things here  -->

      </div>

    </div>

    <!-- /#page-content-wrapper -->

  </div>

  <!-- /#wrapper -->

  <!-- Bootstrap core JavaScript -->

  <script src="vendor/jquery/jquery.min.js"></script>

  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <script src="three.min.js"></script>

  <script src="OrbitControls.js"></script>

  <script src="GLTFLoader.js"></script>

  

  <script>

    let scene, camera, renderer;

    

    function init() {

      scene = new THREE.Scene();

      scene.background = new THREE.Color(0xdddddd);

      camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);

      camera.rotation.y = 45/180*Math.PI;

      camera.position.x = 800;

      camera.position.y = 100;

      camera.position.z = 1000;

      renderer = new THREE.WebGLRenderer({antialias:true});

      renderer.setSize(window.innerWidth,window.innerHeight);

      $("#showCanvasHere").append(renderer.domElement);

      controls = new THREE.OrbitControls(camera, renderer.domElement );

              

      hlight = new THREE.AmbientLight (0x404040,100);

      scene.add(hlight);

      directionalLight = new THREE.DirectionalLight(0xffffff,100);

      directionalLight.position.set(0,1,0);

      directionalLight.castShadow = true;

      scene.add(directionalLight);

      light = new THREE.PointLight(0xc4c4c4,10);

      light.position.set(0,300,500);

      scene.add(light);

      light2 = new THREE.PointLight(0xc4c4c4,10);

      light2.position.set(500,100,0);

      scene.add(light2);

      light3 = new THREE.PointLight(0xc4c4c4,10);

      light3.position.set(0,100,-500);

      scene.add(light3);

      light4 = new THREE.PointLight(0xc4c4c4,10);

      light4.position.set(-500,300,500);

      scene.add(light4);

      

      let loader = new THREE.GLTFLoader();

      loader.load('scene.gltf', function(gltf){

        car = gltf.scene.children[0];

        car.scale.set(0.5,0.5,0.5);

        scene.add(gltf.scene);

        animate();

      });

    }

    function animate() {

      renderer.render(scene,camera);

      requestAnimationFrame(animate);

    }

  </script>

  <!-- Menu Toggle Script -->

  <script>

    $("#menu-toggle").click(function(e) {

      e.preventDefault();

      $("#wrapper").toggleClass("toggled");

    });

    $("#callCartoScene").click(function(e) {

      $("#wrapper").toggleClass("toggled");

      init();

    });

  

  </script>

</body>

</html>

I used http server to run the code. Now when I click on the cam icon, i want camera fov(particularly a rectangular pyramid) to come on the same page along with the car(ie, fov on the top of the car).The camera here acts as a sensor mounted on the car.I need to visualize the coverage(the rectangular pyramid) of the sensor when placed on the car.