如何添加热点three.js panorma图片？

Question

我是three.js的新手我已经创建了一个运行良好的360 panorma。但我只想在三个js的panorma中添加热点，所以热点用户可以指出panorma中的特定对象。

var manualControl = false;
var longitude = 0;
var latitude = 0;
var savedX;
var savedY;
var savedLongitude;
var savedLatitude;
// Boolean for start and restart
var initAnim = true;
var runAnim = false;
var isPlay = false;
var theta = 0;          
// Buttons startButton and resetButton
 var startButton = document.getElementById( 'startButtonId' );

// panoramas background
var panoramasArray = ["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg"];
var panoramaNumber = Math.floor(Math.random()*panoramasArray.length);
// domElement click Start Button
startButton.onclick = function StartAnimation() {
      if (initAnim) {

        initAnim = false;
        runAnim = true;
        longitude = 0;
      }
  // Start and Pause 
      if(runAnim){ 
        startButton.innerHTML = 'Pause';
        runAnim = false;
        isPlay = true;
        animate();
        } else {
              startButton.innerHTML = 'Restart';
              runAnim = true;
              isPlay = false;
        }
  }
// setting up the renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);         
// creating a new scene
var scene = new THREE.Scene();
var scene2 = new THREE.Scene();         
// adding a camera
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.target = new THREE.Vector3(0, 0, 0);
// creation of a big sphere geometry
var sphere = new THREE.SphereGeometry(100, 100, 40);
sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
// creation of the sphere material
var sphereMaterial = new THREE.MeshBasicMaterial();
sphereMaterial.map = THREE.ImageUtils.loadTexture(panoramasArray[panoramaNumber])
//sphereMaterial.map = THREE.ImageUtils.loadTexture("06.jpg")
// geometry + material = mesh (actual object)
var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
scene.add(sphereMesh);
// listeners
document.addEventListener("mousedown", onDocumentMouseDown, false);
document.addEventListener("mousemove", onDocumentMouseMove, false);
document.addEventListener("mouseup", onDocumentMouseUp, false);                         
  //render();               
   function render(){               
    //requestAnimationFrame(render);                
    if(!manualControl){
        longitude += 0.1;
    }
    // limiting latitude from -85 to 85 (cannot point to the sky or under your feet)
    latitude = Math.max(-85, Math.min(85, latitude));
    // moving the camera according to current latitude (vertical movement) and longitude (horizontal movement)
    camera.target.x = 100 * Math.sin(THREE.Math.degToRad(90 - latitude)) * Math.cos(THREE.Math.degToRad(longitude));
    camera.target.y = 100 * Math.cos(THREE.Math.degToRad(90 - latitude));
    camera.target.z = 100 * Math.sin(THREE.Math.degToRad(90 - latitude)) * Math.sin(THREE.Math.degToRad(longitude));
    camera.lookAt(camera.target);
    // calling again render function
    renderer.render(scene, camera);             
}       

// This function runs when start button is pressed//
function animate() {
    if (!isPlay) return;
    requestAnimationFrame(animate);
    theta += 0.01;
    render();
}

// when the mouse is pressed, we switch to manual control and save current coordinates
function onDocumentMouseDown(event){
    event.preventDefault();
    manualControl = true;
    savedX = event.clientX;
    savedY = event.clientY;
    savedLongitude = longitude;
    savedLatitude = latitude;
}

// when the mouse moves, if in manual contro we adjust coordinates
function onDocumentMouseMove(event){

    if(manualControl){
        longitude = (savedX - event.clientX) * 0.1 + savedLongitude;
        latitude = (event.clientY - savedY) * 0.1 + savedLatitude;
    }

}
// This function handles the mouse wheel event in browsers///
function onMouseWheel(event) {
    event.preventDefault();
    if (event.wheelDeltaY) { // WebKit
        camera.fov -= event.wheelDeltaY * 0.05;
    } else if (event.wheelDelta) {  // Opera / IE9
        camera.fov -= event.wheelDelta * 0.05;
    } else if (event.detail) { // Firefox
        camera.fov += event.detail * 1.0;
    }
    camera.fov = Math.max(40, Math.min(100, camera.fov));
    camera.updateProjectionMatrix();
}

document.addEventListener('mousewheel', onMouseWheel, false);
document.addEventListener('DOMMouseScroll', onMouseWheel, false);
// when the mouse is released, we turn manual control off
function onDocumentMouseUp(event){
    manualControl = false;
}           
// pressing a key (actually releasing it) changes the texture map
document.onkeyup = function(event){         
    panoramaNumber = (panoramaNumber + 1) % panoramasArray.length
    sphereMaterial.map = THREE.ImageUtils.loadTexture(panoramasArray[panoramaNumber])

}

所以请告诉我通过哪种方式可以实现全景热点。这将是高度赞赏的。 demo取自{}。