在three.js中使用jquery

Question

再次感谢大家之前的帮助，但我再次需要你们的帮助。 现在我的地图上有标记，就像我想要的那样。但是，现在这些标记需要是可点击的。事实上，他们需要在点击时显示另一个 div（所以需要 jquery）。

我试过这样：

首先，我首先将我的画布放在一个带有 id 的 div 中：

    container = document.createElement( 'div' );
    container.setAttribute("id", "driedkaart");
    document.body.appendChild( container );

然后，通过添加这样的标记：

// ADD SPRITES FOR MARKERS
var pin = THREE.ImageUtils.loadTexture( 'pin.png' );

var marker = new THREE.SpriteMaterial( { map: pin } );
var sprite = new THREE.Sprite( marker );
sprite.position.set( 1.3, 1.9, -1.7 );
sprite.scale.set(0.2, 0.6, 0.5 );

var marker = new THREE.SpriteMaterial( { map: pin } );
var sprite1 = new THREE.Sprite( marker );
sprite1.position.set( -2.3, 1.9, -1.9 );
sprite1.scale.set(0.2, 0.6, 0.5 );

//Group the markers to set them relative to the map

    group = new THREE.Object3D;
    group.add(sprite);
    group.add(sprite1);
    scene.add(group);

现在，我想让它们可点击（jquery 已正确链接）：

    sprite = document.createElement('img');
    sprite.setAttribute("id", "Eersteslagomieper");
    sprite.src = 'pin.png';
    document.body.appendChild(sprite);

这会在画布之后创建 img。但我需要精灵（在地图上）是可点击的。

ps：标记图像还没有设置正确，但不要担心:)

再次感谢

直播代码：http://www.bensjitestsite.site50.net

Answer 1

three.js 中可点击对象的关键字是 RayCaster。

// Projector to generate the 3D coordinates from the click
var projector = new THREE.Projector();

// push all the clickable objects into this array
var clickableObjects = [];    
clickableObjects.push(sprite,sprite1);

// Bind the mousedown handler
document.addEventListener( 'mousedown', onDocumentMouseDown, false );

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

  // transforms the 2D click coordinates into a THREE.Vector3 for 3D coordinates
  var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
            projector.unprojectVector( vector, camera );

  // casts a ray from the camera position directly to the calculated vector
  var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

  // iterates through the clickable objects and checks if they intersect with the ray
  var intersects = raycaster.intersectObjects( clickableObjects );

  if ( intersects.length > 0 ) {
    // The intersects array contains all the elements,
    // that intersect with the casted ray. intersects[0] is the nearest object.
    console.log('Intersects:',intersects)
  }

}

将光线从相机位置投射到使用鼠标按下事件值计算的归一化向量后，您将获得与投射光线相交的对象数组。您现在可以识别单击的对象并显示所需的 div。