Question

I am displaying some objects on my page using THREE.js. I am able to click objects but I noticed that no matter which object I click, the intersects[0].object.position always returns x=0, y=0, z=0, while the actual positions of the objects are no doubt different.

Can you review the following code and comment what am I doing wrong?

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(teeth, true);
  if (intersects.length > 0) {
    //not working
    camera.position.x=intersects[0].object.position.x;
    //not working
    camera.position.y=intersects[0].object.postion.y;
    //working
    intersects[0].object.material.color.setHex(Math.random()*0xffffff);
  }
}

Answer 1

the objects position: intersects[0].object.position

the intersect position: intersects[0].position

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(teeth, true);
  if (intersects.length > 0) {
    //not working
    camera.position.x=intersects[0].point.x;
    //not working
    camera.position.y=intersects[0].point.y;
    //working
    intersects[0].object.material.color.setHex(Math.random()*0xffffff);
  }
}