0

I have this little three.js-scene (done in blender) with a bookshelf:

http://www.law-trainer.com/js/zimmer/hauptdatei/haupt.html

If the door is clicked, it will rotate. If a book is clicked in the shelf, it will open, if the book's right side is clicked, a camera-flight will start, if the book is clicked left, it goes back to the shelf. The video canvas expands on click and starts to play a video (if you use firefox).

Here is my problem: on iOS Device there is no such response. How must I write the event for iOS to cause a raycast? This is the code that does not work right now:

var projector = new THREE.Projector();
function onDocumentMouseDown( event ) {
    event.preventDefault();
    var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );

I failed monthes ago and it keeps me from going on. On android-devices I do not have a problem, whether on tablet or on smartphone.

Thanks a lot, Ivo

----
Problem solved with event-handlers as suggested by prisoner849 and as used in this request: 40541390. See new version of scene here.

Changes in the code, that solved the problem:

//before init(), in the section of the vars;
var raycaster;
var projector;

//within the body of init():
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);

//outside of init():
function onDocumentTouchStart(event){
  event.preventDefault();
  event.clientX = event.touches[0].clientX;
  event.clientY = event.touches[0].clientY;
  onDocumentMouseDown(event);
}

function onDocumentMouseDown(event){
  projector = new THREE.Projector();
  var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
  projector.unprojectVector(vector,camera);
  raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize() );

  //...managing intersects
  var intersects = raycaster.intersectObjects( collidableMeshList );
  if ( intersects.length > 0 ) {
  //...etc
    }
  event.preventDefault();
}
Ivo
  • 1
  • 1
  • 3
  • You have to use event listeners for [touch events](https://developer.mozilla.org/ru/docs/Web/API/TouchEvent). For example, [THREE.OrbitControls()](https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js) has implementation of touch events. – prisoner849 Jan 19 '19 at 13:04
  • 1
    Thank you a lot, so I will analyse the OrbitControls-code carefully and hope to fix my code afterwards. – Ivo Jan 19 '19 at 13:16

0 Answers0