场景中三个js可点击的Img答案

【问题标题】：Three js clickable Img in Scene场景中三个js可点击的Img
【发布时间】：2023-03-28 11:03:02
【问题描述】：

我有一个 360 度的场景，我在其中放置了一些 imgs（精灵）。我想让这个 imgs 可点击，这样如果我点击它，我就会收到一个功能。

我的代码：

var map = new THREE.TextureLoader().load( "arrow-poi.png" );
var material = new THREE.SpriteMaterial( { map: map, color: 0xffffff, fog: true } );
var sprite = new THREE.Sprite( material );
var geometry = new THREE.PlaneGeometry(6,6);

sprite.material.side = THREE.DoubleSide,
sprite.position.x= 40,
sprite.position.y= -6,
sprite.position.z= 10,
sprite.scale.set(6,6,1),
sprite.name="arrow",
sprite.directto=r,

document.addEventListener( 'mousedown', onDocumentMouseDown, false );

raycaster = new THREE.Raycaster();
mouse = new THREE.Vector3( 0, 1, 0 );

projector = new THREE.Projector();
clickableObjects = [];
clickableObjects.push(sprite, sprite1);

function onDocumentMouseDown(event){
 event.preventDefault();

 var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
 projector.unprojectVector( vector, camera );

 var raycaster = new THREE.Raycaster( camera.position, vector.sub(  camera.position ).normalize() );
 var intersects = raycaster.intersectObjects( clickableObjects );

  if ( intersects.length > 0) { 
   intersects[0].object.onClick();  
  }
}
sprite1.onClick = function(){console.log('Clicked');}

【问题讨论】：

标签： javascript raycasting clickable-image

【解决方案1】：

我一直在寻找类似的东西，经过一番研究，我发现最后一个 THREE.js 版本在 Raycasting 中有新功能。所以我正在使用这个函数来检测精灵的点击，它正在工作。

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function clickOnSprite(event){
    console.log("CLICK! " + event.clientX + ", " + event.clientY);      

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; 
    raycaster.setFromCamera( mouse, camera );   

    var intersects = raycaster.intersectObjects( iconsSprites );

    intersects.forEach(function(element){
        console.log("Intersection: " + element.object.id);
    });
}

【讨论】：