0

更少的文字，更多的代码 =)

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. 为什么那个粒子这么大？纹理是这个16×16.png 文件，粒子比 16×16 大得多。我该如何解决？是的，我知道particle.scale，这会使粒子看起来更小。但是，粒子 woukd 的“可点击”区域也变小了。

4

1 回答 1

1

我知道这是一个老问题，但我今天遇到了同样的问题，我发现这个问题没有答案，经过一些解决方法后，我找到了解决方案。

解决方案是创建 2 个粒子，一个是一个简单的粒子，它绘制一个几何体（矩形或弧形），它是一个 ParticleCanvasMaterial，然后是在其上显示图像的粒子。

因此，您可以使用 ParticleCanvasMaterial 跟踪交叉点并将另一个粒子显示为虚拟对象，其唯一目的是在 3D 场景上显示图像。

一点代码：

var programFill = function (context) {
                context.beginPath();
                context.rect(-0.5, -0.38, 1, 1);
                //context.fill(); 
            }

            //creating particle to intersect with.
            var p = new THREE.ParticleCanvasMaterial({ program: programFill, transparent: true }); 
            var particle = new THREE.Particle(p);
            particle.scale.set(23, 23);
            //use same position for both particle and imgParticle
            particle.position.set(200, 300, 200);

            //creating particle that displays image.
            var imgTexture = THREE.ImageUtils.loadTexture('images/image.png');
            var p2 = new THREE.ParticleBasicMaterial({
                map: imgTexture
                , size: 1
            });

            var imgParticle = new THREE.Particle(p2);
            imgParticle.scale.x = 0.5;
            imgParticle.scale.y = 0.5; 
            imgParticle.position.set(200, 300, 200);
于 2013-08-20T19:52:10.837 回答