Less talk, more code =)
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);
}
So now we have a clickable particle with a texture. But there are some issues I need help with:
Why is the clickable area of the particle so small? It only works when clicking in the middle.
Also, why is the particle so large even though the texture file is 16x16? How can I make it smaller without affecting the clickable area?