javascript - Three.js - テクスチャのサイズに関するトラブル

Question

言葉を減らし、コードを増やす =)

var objects = [];

var camera, scene, renderer;

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

init();
render();

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 ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
    var intersects = ray.intersectObjects( objects );
    if ( intersects.length > 0 ) {
        console.log(intersects[ 0 ].object);
    }
}

function init() {

    container = document.getElementById( 'container' );
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 1100 );
    camera.position.z = 50;
    scene.add( camera );


    var particle = new THREE.Particle( new THREE.ParticleBasicMaterial( { map: THREE.ImageUtils.loadTexture( "img/satellite.png" ) } ) );
    objects.push( particle );
    //particle.scale.x = particle.scale.y = 0.25
    scene.add( particle );

    projector = new THREE.Projector();
    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );
}

function render() {
    camera.lookAt( scene.position );
    renderer.render( scene, camera );
}

その結果、テクスチャ付きのクリック可能なパーティクルが得られます。しかし、私はいくつかのことを理解していません:

1. 粒子の「クリック可能な」領域が非常に小さいのはなぜですか? パーティクルの真ん中をクリックした場合にのみ機能します。

2. なぜその粒子はとても巨大なのですか？テクスチャはこの.png ファイルで、パーティクルは 16×16 よりもはるかに大きいです。どうすれば修正できますか？はい、粒子が小さく見えるようにするparticle.scaleについて知っています。ただし、パーティクル woukd の「クリック可能な」領域も小さくなります。