CODEWITHSUNDEEP
javascripthtmlthree.js
Ashwath Shetty
Ashwath Shetty

Reputation: 106

How to create hotspots in 3d enviroment using threejs?

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>

Upvotes: 1

Views: 5320

Answers (2)

FutureCake
FutureCake

Reputation: 2953

I can give a walkthrough on the steps required to get the desired effect since I have done it a few times myself.

  1. define a 3d point in your scene where the hotspot should be. You can optionally nest this in a an other Object3D to make sure it scales, moves and rotates with the model / parent.

  2. Add a plane to this point load a image texture to this plane. and there you have your visible hotspot

  3. update the hotspots to make sure they are always looking at the camera by using the lookAt function.

  4. when the user clicks the screen cast a raycast against all the hotspots you have in your scene. Easiest way to do this is by storing all your hotspots in an array.

  5. When the raycast hits a hotspot get the location either of the hitpoint or the hotspots location. Transform that to screen coordinates. Search on stackoverflow how to do this. I am sure there is a post about this.

  6. Final step display your html on the correct location you obtained from the previous step.

The advantage of this method is that the hotspot will integrate nicely with the model in your scene. Since html based hotspots will always be on top of the scene.

That is about all that is to it. Let me know if you need any further clarification!

Upvotes: 1

jscastro
jscastro

Reputation: 3780

Those “hotspots” as you call them are Annotations where the annotation content is basically pure HTML. enter image description here

The tutorial in the link is probably the best step-by-step readiness you can follow to learn how to do it in your scene.

Upvotes: 5

Related Questions