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, что сделает частицы меньше. Но «кликабельная» область частиц также уменьшится.

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