Raycaster no longer works

Questions
1

seems to be a version change problem…

a very simple raycaster + orbitControls code no longer works. I wonder why …

var camera, scene, renderer;
var puck;

var raycaster;
var mouse = new THREE.Vector2();
var pickables = [];

init();
animate();

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 500;

  var gridXZ = new THREE.GridHelper(240, 24, 'red', 'white');
  scene.add(gridXZ);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

 let controls = new THREE.OrbitControls(camera, renderer.domElement);

  document.body.appendChild(renderer.domElement);

  /////////////////////////////////////////////////////////////////////
  plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), new THREE.MeshBasicMaterial({
    transparent: true,
    opacity: 0.5,
    visible: true
  }));
  scene.add(plane);
  plane.rotation.x = -Math.PI / 2;
  pickables = [plane];

  puck = new THREE.Mesh(new THREE.CylinderGeometry(10, 10, 2, 20), new THREE.MeshNormalMaterial());
  scene.add(puck);

  raycaster = new THREE.Raycaster();
  document.addEventListener('mousedown', onDocumentMouseDown, false);
}

function onDocumentMouseDown(event) {

  event.preventDefault();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // find intersections
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(pickables);
  if (intersects.length > 0) {
    puck.position.copy(intersects[0].point);
  }

}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  renderer.render(scene, camera);
}
2

This is actually a duplicate of:

It’s unrelated to Raycaster. The problem is that your mousedown event listener does not fire anymore. You have to use the pointerdown event.

3

@Mugen87 There are two issues:

  • The mouse events replaced by pointer events.
  • Raycaster now uses Layers, so apps using .layers broke.

Semver would be a nice convention for Three.js to follow. The releases don’t even mention breaking changes.

By default npm (the most widely used package manager in human history by a far margin) places things like ^0.121.1 in package.json, which means that by default, any release of Three.js (the way they are currently managed) can break apps.

This is similar to placing a non-versions unpkg.com URL in your codepen.io pen, and not thinking that it is going to break. At any moment, your pen might break.

What Three.js users need to do is ensure that the version in package.json does not contain any symbol in the version f.e. 0.121.1 instead of ^0.121.1.

4

The releases don’t even mention breaking changes.

If you’re looking for breaking changes those are listed in the migration guide.

What Three.js users need to do is ensure that the version in package.json does not contain any symbol in the version f.e. 0.121.1 instead of ^0.121.1 .

You can also use ~0.121.0 to automatically take patch releases.

5

Oh, that’s good to know, I hadn’t thought of that. Usually (at least from my experience) projects categorize breaking vs non-breaking changes in the release notes.

6

Does this mean we should use “pointermove” in lieu of “mousemove” and “touchmove” from now on?

7

@TwistingHalos Yeah, that’s what it means (because Three.js does not provide any option to control the behavior, so you must use pointer events).

1 Like