Select non Speckle objects

Speckle Help Developers
,
1

Hi @alex
If you add three.js native, non-speckle objects to the scene, how would you handle their selection?
How to call the speckle raycaster, like scene and camera?
I am trying with a cube:

import {
  Extension,
  ObjectLayers
} from "@speckle/viewer";
import {
  Raycaster,
  Vector2,
  BoxGeometry,
  MeshBasicMaterial,
  Mesh,
} from "three";
export class SelectNonSpeckle extends Extension {
  public selectNonSpeckle() {
    const scene = this.viewer.getRenderer().scene;
    const camera = this.viewer.getRenderer().renderingCamera!;

    const geometry = new BoxGeometry();
    const material = new MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new Mesh(geometry, material);
    cube.layers.set(ObjectLayers.OVERLAY);
    scene.add(cube);

    const raycaster = new Raycaster();
    const mouse = new Vector2();

    window.addEventListener("click", (event: MouseEvent) => {
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

      raycaster.setFromCamera(mouse, camera);

      const intersects = raycaster.intersectObjects(scene.children, true);

      if (intersects.length > 0) {
        console.log("Clicked object:", intersects[0].object);
      }
    });
  }
}

Thanks

2

Hi @RaphaelVouilloz

For non speckle objects, three.js makes the rules. The only thing that might be missing from your code at first glance is the fact that you need to assign the OVERLAY layer to the raycaster as well. It’s how three.js expects it.

Cheers