trois icon indicating copy to clipboard operation
trois copied to clipboard

How to use raycast to detect meshes on a model(fbx)

Open Fanna1119 opened this issue 3 years ago • 0 comments

So looking issue #33 And the given example: https://troisjs-instancedcolors.netlify.app/ It is possible to use intersect somehow to

raycast against everything in a crowded scene.

Looking at the given example by @SaFrMo, it raycasts well.

so on a fbx model i have the following where i have a hover/pointer event, which highlights the mesh material

<template>
  <Renderer
    ref="renderer"
    antialias
    :orbit-ctrl="{ enableDamping: true, target }"
    resize="window"
    shadow
  >
    <Camera :position="{ x: 100, y: 200, z: 300 }">
    </Camera>

    <Scene ref="scene" background="blue">
      <DirectionalLight
        :position="{ x: 0, y: 200, z: 100 }"
        cast-shadow
        :shadow-camera="{ top: 180, bottom: -120, left: -120, right: 120 }"
      />
      <Raycaster
        intersect-recursive
        @click="clicked"
        @pointerEnter="onPointerEvent"
        @pointerOver="onPointerOver"
        @pointerLeave="onPointerEvent"
      />
      <FbxModel src="/src/assets/Body_low.fbx" @load="ready" />
    </Scene>
  </Renderer>
</template>

<script>
import { AnimationMixer, Clock, Fog, GridHelper, Vector3 } from "three";
import {
  AmbientLight,
  Camera,
  DirectionalLight,
  FbxModel,
  HemisphereLight,
  Renderer,
  PhongMaterial,
  Plane,
  Scene,
  Raycaster,
  InstancedMesh,
  BoxGeometry,
  PointLight
} from "troisjs";
export default {
  components: {
    AmbientLight,
    Camera,
    DirectionalLight,
    FbxModel,
    HemisphereLight,
    Renderer,
    PhongMaterial,
    Plane,
    Scene,
    Raycaster,
    InstancedMesh,
    BoxGeometry,
    PointLight
  },
  data() {
    return {
      target: new Vector3(0, 100, 0),
      selected: null,
      box: null,
    };
  },
  mounted() {
  },
  methods: {
    ready(object) {
      console.log(object);
    },
    onPointerEvent(event) {
      console.log(event);
      console.log(event.intersect.object.material[1].color.setHex(0x00ff00));
    },
    onPointerOver(event) {
      // console.log(event.over ? event : "");
      console.log(event.intersect.object.material[1].color.setHex(0x00ff00));

      // event?.component?.mesh?.material[0].color?.setHex(
      //   event.over ? 0xff0000 : 0xffffff
      // );
    },
    onEnter(intersections) {
      console.log(intersections);
    },
    onLeave(inactiveIntersections) {
      console.log(inactiveIntersections);
    },
    clicked(e) {
      console.log(e);
    },
  },
};
</script>



as you can see in the example code I can manually select the material and change its colour, however this is not the desired result. I am trying to figure out how to hover the model and it magically knows which mesh is hovered?

Fanna1119 avatar Apr 29 '22 12:04 Fanna1119