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

Questions
,
1

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">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<link rel="stylesheet" href="index.css">

</head>
<body>
	<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

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

    <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
		init();

        // Calling the animate function
        animate();

        function init(){
			// Calling the render function
			render();

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

            // Calling the camera function
            Camera();

            // Calling the model loader function
            loadmodel("../model/","project");
			// Calling the environment light function
			envLight();
			// Calling the controller function
			control();
        }

        function Camera(){
            camera = new PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000);
            camera.position.set(250,400,250);
        }

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

        function loadmodel(folder, name){
        	FBXloader = new FBXLoader();
        	FBXloader.setPath(folder);
        	FBXloader.load(name + ".FBX", function (fbx){
				fbx.position.set(0,0,0);
        		fbx.getObjectByName('box001');
        		scene.add(fbx);
        		renderer.render(scene,camera);
			})
        }

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

            scene.add(light);
        }

        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;

			document.body.appendChild(renderer.domElement);
        }

        function animate() {

            requestAnimationFrame( animate );

            renderer.render(scene, camera);
        }

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

    </script>
</body>
</html>

the final effect like this: Genius / Showroom

2

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.