Click on an object

How do you add an item model in the three-dimensional space, and how do you know that the item is hit by your mouse?

Give an example：

feature

By default, tap the screen Five will perform a walking or modular switch. The example requires adding a square in space, hint when you click on the body "Congratulations" and do not perform the default action.

Add object

After the model has been successfully loaded, add a cube in space.

five.once("modelLoaded", () => {
  five.setState({ mode: "Floorplan" });

  const geometry = new THREE.BoxGeometry(1, 1, 1, 32);
  const material = new THREE.MeshBasicMaterial({
    color: new THREE.Color(0x2008aa),
  });
  const box = new THREE.Mesh(geometry, material);
  box.position.set(-2.8741698071921214, 0.220446049250313, -4.631508324407246);
  five.scene.add(box);

  five.on("wantsTapGesture", (raycaster, tapPosition) => {
    // The gesture in the callback has not been triggered, and the collision logic can be executed
    const intersect = raycaster.intersectObject(box);
    console.log("intersect", intersect);

    const [clickedMesh] = intersect;
    if (clickedMesh) {
      alert("Congratulations, you clicked on the object");
      return false;
    }
  });
});

Click on events

Listen to five.on('wantsTapGesture') to click on gesture events.

five.once("modelLoaded", () => {
  five.setState({ mode: "Floorplan" });

  const geometry = new THREE.BoxGeometry(1, 1, 1, 32);
  const material = new THREE.MeshBasicMaterial({
    color: new THREE.Color(0x2008aa),
  });
  const box = new THREE.Mesh(geometry, material);
  box.position.set(-2.8741698071921214, 0.220446049250313, -4.631508324407246);
  five.scene.add(box);
  five.on("wantsTapGesture", (raycaster) => {
    // 监测逻辑
  });
});

Compute intersection

In the "wantsTapGesture" callback function, there is a raycasting Raycaster instance, and you can calculate the intersection point of the ray from the current camera to the click position and the object based on Raycaster.

five.once("modelLoaded", () => {
  five.setState({ mode: "Floorplan" });

  const geometry = new THREE.BoxGeometry(1, 1, 1, 32);
  const material = new THREE.MeshBasicMaterial({
    color: new THREE.Color(0x2008aa),
  });
  const box = new THREE.Mesh(geometry, material);
  box.position.set(-2.8741698071921214, 0.220446049250313, -4.631508324407246);
  five.scene.add(box);

  five.on("wantsTapGesture", (raycaster, tapPosition) => {
    // Callback gesture not triggered, Perform collision logic
    const intersect = raycaster.intersectObject(box);
  });
});

True Results

The computed result inters) is an array indicating the number of interfaces between the radius and the object to determine the return value to see if the object is clicked.

five.once("modelLoaded", () => {
  five.setState({ mode: "Floorplan" });

  const geometry = new THREE.BoxGeometry(1, 1, 1, 32);
  const material = new THREE.MeshBasicMaterial({
    color: new THREE.Color(0x2008aa),
  });
  const box = new THREE.Mesh(geometry, material);
  box.position.set(-2.8741698071921214, 0.220446049250313, -4.631508324407246);
  five.scene.add(box);

  five.on("wantsTapGesture", (raycaster, tapPosition) => {
    // Callback gesture not triggered, collision logic can be executed
    const intersect = raycaster.intersectObject(box);

    const [clickedMesh] = intersect;
    if (clickedMesh) {
      alert("恭喜，你点到物体啦");
      // 点击到 正方体，终止事件
      return false;
    }
  });
});