@galacean/engine-toolkit-framebuffer-picker NPM

Framebuffer Picker

The Framebuffer Picker tool using GPU frame picking technology, it can judge whether a certain model is clicked at the pixel level, and return information such as the material and mesh of the picked entity.

frame picker

npm

The Outline is published on npm with full typing support. To install, use:

$ npm install @galacean/engine-toolkit-framebuffer-picker

This will allow you to import package entirely using:

import * as TOOLKIT from "@galacean/engine-toolkit-framebuffer-picker";

or individual classes using:

import { FramebufferPicker } from "@galacean/engine-toolkit-framebuffer-picker";

Usage

class ClickScript extends Script {
  onUpdate(): void {
    const inputManager = this.engine.inputManager;
    const { pointers } = inputManager;
    if (pointers && inputManager.isPointerDown(PointerButton.Primary)) {
      if (pointers.length > 0) {
        const pointerPosition = pointers[0].position;
        framebufferPicker.pick(pointerPosition.x, pointerPosition.y).then((renderElement) => {
          if (renderElement) {
            // ... picked element
          } else {
            // ... no picked element
          }
        });
      }
    }
  }
}

cameraEntity.addComponent(ClickScript);

const framebufferPicker = rootNode.addComponent(FramebufferPicker);
framebufferPicker.camera = camera;