How to add hotspot to 3D?

Questions
1

Hi,
I am wondering if there is any good way to add hotspot on a 3D?
What I really hope to achieve is that when I am playing a car 3d OBJ, I want to put a hotspot on the door, and when the hotspot is clicked, I need to get a notification so that I will do other staff, such as load another 3D or show some introduction.
So that hotspot needs to be attached to the 3D object itself, when the 3D is rotating, it is always attached to the right place.
Thanks and hope here your advice.

2

A simple solution will be to add a THREE.Mesh, typically using a THREE.SphereBufferGeometry, as child to the nearest THREE.Object3d that can move (such as a car door). Then use a THREE.Raycaster on click, that checks intersections only against the hotspot objects, or checks against all objects (or simplified representations), but acts only on intersections with hotspots.

1 Like
3

Thanks for your reply, below is my function for playing 3D, can you please help to insert method into it? Sorry, I am very new at using three.js.
Or can you show me some example for hotspots on 3D?

play3D() {
const domElement = this.nativeElement.children[0];
domElement.innerHTML = ‘’;
this.renderer = new THREE.WebGLRenderer({
antialias: true,
});
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(domElement.offsetWidth, domElement.offsetHeight);

    domElement.appendChild(this.renderer.domElement);

    this.scene = new THREE.Scene();
    
    this.scene.add(new THREE.AmbientLight(0xcccccc, 0.4));
    this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
    this.camera.add(new THREE.PointLight(0xffffff, 0.8));
    this.scene.add(this.camera);

    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    const loader = new OBJLoader();

    loader.load(this.threeDPath, obj => {
        this.scene.add(obj);
    
    }, this.onProgress);


    window.addEventListener('resize', this.onWindowResize, false);
}
4

No, I encourage you to seek resources separately on the constituent parts: 1. Making a sphere object. 2. Placing it appropriately in the scene hierarchy. 2. Handling mouse clicks. 3. Raycasting.

Here is an example of what I think you request: https://www.genesis.com/us/en/2019/genesis-g70.html/#/car-configurator/G70 (But don’t try to comprehend the JS for that one, as a commercial company will presumably try to hide their jewels.)