Threejs Sprite光线投射不一致

Question

我在精灵上遇到的光线投射效果很差。我会说当精灵居中时效果最好但后续事件的激活不一致。

 var touchCounter=0;

function onDocumentMouseDown( event ) 
{
touchCounter ++;
$('#footer .social h2').text("event " + touchCounter);
   // update the mouse variable
    mouse.x =  ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
    mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
    mouse.z = 0.75;
    Raycasting();       
}


function onDocumentTouchStart( event ) 
{
touchCounter ++;
$('#footer .social h2').text("event " + touchCounter);

  if ( event.touches.length == 1 ) {

        event.preventDefault();    

        mouse.x = ( ( event.targetTouches[0].pageX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
        mouse.y = - ( ( event.targetTouches[0].pageY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
        mouse.z = 0.75;

        Raycasting();   
    }
}

function Raycasting() {
    var ray = new THREE.Raycaster( camera.position, mouse.sub( camera.position ).normalize() );
    var intersects = ray.intersectObjects( targetList );

    if ( intersects.length > 0 )
    {
        if ( intersects[ 0 ].object != INTERSECTED ) 
        {
            if ( INTERSECTED ) 
                INTERSECTED.material.color.setHex( INTERSECTED.currentHex );

              $('#footer .social h2').text("event " + touchCounter + " and hit");

                controls.autoRotate = false;
                modal.show();
            INTERSECTED = intersects[ 0 ].object;
            INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
            INTERSECTED.material.color.setHex( 0xffff00 );
        }
    } 
    else // there are no intersections
    {
        controls.autoRotate = true;
        modal.hide();
        if ( INTERSECTED ) 
            INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
        INTERSECTED = null;
    }
}

targetList数组当前sprite ...

        var spriteList = new Array(
        "solar",
        "wind",
        "water");

    var spriteMaterial;

    for (var i = 0; i < spriteList.length; i++) {
            spriteMaterial = THREE.ImageUtils.loadTexture( "assets/models/home/sprites/" + spriteList[i] + ".png", undefined, createHUDSprites );   
    }

    var ind = 0;

    function createHUDSprites ( spriteMaterial ) {

        var material = new THREE.SpriteMaterial( { map: spriteMaterial } );

        var sprite = new THREE.Sprite( material );
        var multi = 0.12;
        sprite.scale.set( material.map.image.width*multi, material.map.image.height*multi, 1 );

        switch(ind) {
            case 0:
                sprite.position.set(-60,20,-18); //solar
                targetList.push(sprite);
                break;
            case 1:
                sprite.position.set(-20,-42,-35); //wind
                targetList.push(sprite);
                break;
            case 2:
                sprite.position.set(-20,42,50); //water
                targetList.push(sprite);
                break;
            case 3:
                sprite.position.set(50,14,45); //shelter
                targetList.push(sprite);
                break;
            case 4:
                sprite.position.set(50,22,-25); //utilities
                targetList.push(sprite);
                break;
            case 5:
                sprite.position.set(45,-24,50); //telescope
                multi = 0.05;
                sprite.scale.set( material.map.image.width*multi, material.map.image.height*multi, 1 );
                targetList.push(sprite);
                break;
            case 6:
                sprite.position.set(40,42,-20); //utilities
                multi = 0.05;
                sprite.scale.set( material.map.image.width*multi, material.map.image.height*multi, 1 );
                targetList.push(sprite);
                break;
            case 7:
                sprite.position.set(-40,-5,-50); //utilities
                multi = 0.05;
                sprite.scale.set( material.map.image.width*multi, material.map.image.height*multi, 1 );
                targetList.push(sprite);
                break;
            default:
                sprite.position.set(-20,-42,-35);
                console.log("Problem loading sprites");
        }

        ind++;

        scene.add( sprite );

    } //end createHudSprites()

也许缩放问题？或者我如何实例化THREE.Raycaster对象？

你可以在这里看到我的网站http://earthscool.com.au的一个例子

Threejs R72

Answer 1

将光线设置为全局

var ray = new THREE.Raycaster();

然后将光线设置为在文档中找到的光线

function Raycasting() {
    ray.setFromCamera( mouse, camera );
    ...

还要根据文档添加适当的事件处理程序...这个用于触摸设备

        mouse.x = ( event.targetTouches[0].pageX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.targetTouches[0].pageY / window.innerHeight ) * 2 + 1;
        mouse.z = 0.5;