How to pop up a window after click a child model in the scene?

I want to pop up a window or customized DOM element after click a child model in the scene. the content in the window can be <div> ,<img>, <video> etc.

Note: Every child models are seperated, and they have a common parent model.

I tried raycaster and interaction.But I don’t know how to done it.
And I tried the thrid party libraries, like threex and three.interaction.js. But these are doesn’t work.
Here is the code is as follows:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
	<link rel="stylesheet" href="index.css">

	<script async src=""></script>

	<script type="importmap">
			"imports": {
				"three": "./build/three.module.js",
				"three.interaction": "../node_modules/three.interaction/build/three.interaction.module.js"

    <script type="module">

        import * as THREE from 'three';

        // Try to use three.interaction but it doesn't work
		import { Interaction } from 'three.interaction';

		import { PerspectiveCamera } from "./src/cameras/PerspectiveCamera.js";
		import { FBXLoader } from "./examples/jsm/loaders/FBXLoader.js";
		import { OrbitControls } from "./examples/jsm/controls/OrbitControls.js";

		let scene, container, camera, controls;
        let renderer, loader, FBXloader, materials;

        let raycaster = new THREE.Raycaster();

Preparing for create DOM Elements and then use appendChild() to show the content.
Hoping for using document.createElement to create a new DOM element in the HTML page. 
Other methods are OK of course.
		let body = document.body;

        // Calling the init function

        // Calling the animate function

        function init(){
			// Calling the render function

            // Setting up a new scene
            scene = new THREE.Scene();
            scene.background = new THREE.Color( 0x999999 );

            // Calling the camera function

            // Calling the model loader function
			// Calling the environment light function
			// Calling the controller function

        function Camera(){
            camera = new PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000);

        function control(){
			controls = new OrbitControls(camera, renderer.domElement);
			// controls.addEventListener('change', render);
			controls.minDistance = 75;
			controls.maxDistance = 500;,150,0);
			window.addEventListener('resize', onWindowResize);

        function loadmodel(folder, name){
        	FBXloader = new FBXLoader();
        	FBXloader.load(name + ".FBX", function (fbx){

        function envLight(){
            const light = new THREE.AmbientLight( 0xffffff, 1);


        function render(){
            renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
			renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );

            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFShadowMap;


        function animate() {

            requestAnimationFrame( animate );

            renderer.render(scene, camera);

		function onWindowResize() {
			camera.aspect = window.innerWidth / window.innerHeight;
			renderer.setSize( window.innerWidth, window.innerHeight );


the final effect like this: Genius / Showroom

i guess this won’t be much of a solution for you but this stuff isn’t something you’d have to struggle with Sky dome with annotations - CodeSandbox manually appending and inflating dom nodes, i … don’t know how good of an idea that really is tbh, we have largely abolished that practice.