问题
I am trying to click on an object, which is a mesh. For instance, if I click on apple, I want the apple to move in the specific coordinates. Right now, I set the clickedObject as apple for right now.
document.addEventListener('mousedown', onDocumentMouseDown, false);
var objects = new Array();
objects.push(apple, orange, banana);
var clickedObject;
function onDocumentMouseDown(event) {
var mouse_x = ( event.clientX / window.innerWidth ) * 2 - 1;
var mouse_y = -( event.clientY / window.innerHeight ) * 2 + 1;
var vector = new THREE.Vector3(mouse_x, mouse_y, 0.5);
vector.unproject(camera);
var raycaster = new THREE.Raycaster(camera.position,
vector.sub(camera.position).normalize());
console.log("on mouse down event handler");
var intersects = raycaster.intersectObjects( objects );
if (intersects.length > 0) {
// the first one is the object we'll be moving around
clickedObject = intersects[0].object;
// and calculate the offset
var intersects = raycaster.intersectObject(referencePlane);
if(clickedObject === apple) {
var tween2 = new TWEEN.Tween(apple.position)
.to({ x: 0}, 100)
.start();
animate();
}
if(clickedObject === orange) {
var tween2 = new TWEEN.Tween(orange.position)
.to({ x: 0}, 100)
.start();
animate();
}
if(clickedObject === banana) {
var tween2 = new TWEEN.Tween(banana.position)
.to({ x: 0}, 100)
.start();
animate();
}
}
}
It's kind of working. But it also animates "orange" too, when I click on the orange mesh. Am I doing this correctly? I want to animate all objects (not at the same time), depending if I click on that specific one.
来源:https://stackoverflow.com/questions/33024688/raycaster-how-to-move-the-mesh-that-i-clicked-on