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 );
}

结果，我们获得了具有纹理的可点击粒子。但我不明白几件事：

为什么粒子的“可点击”区域如此之小？它只有在我点击粒子中间时才有效。
为什么那颗粒太大了？纹理是这个 .png文件，粒子比16×16更大。我该如何解决这个问题？是的，我知道particle.scale，这将使粒子看起来更小。但是，粒子的“可点击”区域也会变小。

Answer 1

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

解决方案是创建2个粒子，一个是绘制粒子（Rect或弧）的简单粒子，它是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);

Three.js - 纹理大小的麻烦

1 个答案: