Три js raycaster не работает для css2drenderer

Question

Я пытаюсь добавить 2d горячих точек в 3d-модель. Для этого я добавил WebGLRendere для 3d-модели и CSS2DRenderer для точки доступа. Я использую raycaster для обнаружения горячей точки, но она не обнаруживает горячую точку.

Это мой код -

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 7;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);



var platform;
var loader = new THREE.ColladaLoader();
loader.load('model/platform.dae', function(dae){
    platform = dae.scene;
    platform.position.set(0, -3.5, 0.5);
    scene.add(platform);
    scene.add(hotSpot);
});

var hotSpotDiv = document.createElement('div');
hotSpotDiv.className = 'hotSpot';

var hotSpot = new THREE.CSS2DObject(hotSpotDiv);
hotSpot.position.set(-1, 4.2, 0);


var renderer2D = new THREE.CSS2DRenderer();
renderer2D.setSize( window.innerWidth, window.innerHeight );
renderer2D.domElement.style.position = 'absolute';
renderer2D.domElement.style.top = 0;
renderer2D.domElement.style.backgroundColor = 0xff0000;
document.body.appendChild( renderer2D.domElement );


var light = new THREE.AmbientLight( 0x555555 ); // soft white light
scene.add( light );

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set(-0.5, 0.5, -1);
scene.add( directionalLight );


var mouse = new THREE.Vector2();

document.addEventListener( 'mousemove', onDocumentMouseMove, false );
function onDocumentMouseMove( event ) {
    event.preventDefault();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

var raycaster = new THREE.Raycaster();
var INTERSECTED;


function renderLoop(){
    requestAnimationFrame(renderLoop);
    render();
}
renderLoop();


function render(){
    camera.lookAt( scene.position );
    camera.updateMatrixWorld();
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( scene.children, true );
    if ( intersects.length > 0 ) {
        if ( INTERSECTED != intersects[ 0 ].object ) {
            console.log(intersects.length + " -- " + intersects[0].object);
            INTERSECTED = intersects[ 0 ].object;
        }
    } else {
        INTERSECTED = null;
    }

    renderer.render(scene, camera);
    renderer2D.render(scene, camera);
    console.log(body);
}


var camControls = new THREE.OrbitControls(camera);
camControls.enableDamping = true;
camControls.dampingFactor =  1;

Пожалуйста, дайте мне знать, если есть какой-нибудь другой лучший способ добавить 2d кликабельные кнопки поверх 3d модели.

Заранее всем спасибо за помощь!

Answer 1

Просто кодовая версия того, что Энди уже предоставил в качестве ответа.

Это в контексте с кодом Амода.

hotSpotDiv.addEventListener('click', function(){ // Do your stuff here });