trois
trois copied to clipboard
How to use raycast to detect meshes on a model(fbx)
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?