How to add hotspot to 3d models?

Questions
, ,
1

I’m a beginner to three.js.I’m trying to build something similar to this https://virtualshowroom.nissan.in/car-selected.html?selectedCar=ext360_deep_blue_pearl. I built everything using three.js, but I’m not able to figure out how to create a hotspot(like the red dot in the above link) and show pop up when you click on it. below is my project code, let me know if anything else is required.

    <html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { display: block; }
        </style>
    </head>
    <body>
        <h1></h1>
    
        <script src="./three.js"></script>
        
        <script type="module">
                import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
            import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
            var renderer,scene,camera;
            
            
           
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xfff6e6)
            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
                
            document.body.appendChild( renderer.domElement );
            var loader = new GLTFLoader();
            var hlight = new THREE.AmbientLight(0x404040, 100)
    scene.add(hlight)

    var directionalLight = new THREE.DirectionalLight(0xffffff, 100)
    directionalLight.position.set(0,1,0)
    directionalLight.castShadow = true
    scene.add(directionalLight)
            

    var light = new THREE.PointLight(0xffffff, 10)
    light.position.set(0, 300, 500)
    scene.add(light)

        var light2 = new THREE.PointLight(0xffffff, 10)
    light2.position.set(500, 100, 0)
    scene.add(light2)

    var light3 = new THREE.PointLight(0xffffff, 10)
    light3.position.set(0, 100, -500)
    scene.add(light3)

    var light4 = new THREE.PointLight(0xffffff, 10)
    light4.position.set(-5000, 300, 0)
    scene.add(light4)
    var controls = new OrbitControls(camera, renderer.domElement);
    document.body.appendChild(renderer.domElement)
            
            


    var loader = new GLTFLoader(); 
            loader.load( './scene.gltf', function ( gltf ) 
                        { 
                scene.add( gltf.scene ); 
            }, undefined, function ( error ) { console.error( error ); } );
           
            

// load a image resource
            

camera.position.z = 5;
            

            
            var animate = function () {
                requestAnimationFrame( animate );

                

                renderer.render( scene, camera );
            };

            animate();
            
            
            
        </script>
    </body>
</html>
2

Should be already answered at stackoverflow:

3

Also see this previous post

4

Hi, this blog might help you: