# ThreeJS - Using Raycaster to select faces on model with OBJ Loader
**URL:** https://discourse.threejs.org/t/threejs-using-raycaster-to-select-faces-on-model-with-obj-loader/26356
**Category:** Questions
**Tags:** raycaster, geometry
**Created:** [May 18, 2021, 2:02am UTC](https://discourse.threejs.org/t/threejs-using-raycaster-to-select-faces-on-model-with-obj-loader/26356 "2021-05-18T02:02:26Z")
**Posts on this page:** 9
**Page:** 1
I have been trying to get use raycaster to be able to select faces on the OBJ Model and make them transparent when the cursor is over them, but I am unable to get it working.
Heres the code:
```javascript
Document
```
---
Here is the model I am using:
[Solid1v2.obj](https://discourse.threejs.org/uploads/short-url/7TkLBYN3SdahtA2iAkvb5mXI5rd.obj) (15.5 KB)
[Solid1v2.mtl](https://discourse.threejs.org/uploads/short-url/wAOcDIQYWv2o4Frn7BfnyNQbIm1.mtl) (619 Bytes)
---
> [@Joshua\_Paul](#):
>
> ```javascript
> intersects[i].object.material.transparent = true;
>
> intersects[i].object.material.opacity = 0.5;
>
> ```
This will make the material of the entire object transparent.
Notice that the faces of your geometry do no have individual materials. So you can’t configure material properties.
You should consider to use vertex colors for this use case. Meaning you create an additional four-component `color` buffer attribute, apply `(1,1,1,1)` as default color for all vertices and then set the `vertexColors` property of the material to `true`. When you click on the model, you can extract the face index from the intersection object and then modify the color buffer data (or more precise the alpha component of the color).
---
Have you considered using **materialIndex**?
I do not use **BufferGeometry** , if you are OK with regular geometry ( pre 125 ), here is woking demo.
Hold down the **Ctrl** key and click on the mesh.
[Z\_Trans.html](https://discourse.threejs.org/uploads/short-url/1OFKXMqrtLPrgEQMiFTR3rH0e86.html) (90.2 KB)
---
The problem with using multi-materials is that the OP would require a material per face. That would potentially kill performance since each face would produce a draw call.
---
> [@Mugen87](#):
>
> The problem with using multi-materials is that the OP would require a material per face. That would potentially kill performance since each face would produce a draw call.
Just wanted to make sure that one call per face applies only to BufferGeometry, not to regular geometry.
---
Thanks a lot!.
Being new to three.js, how to write the actual code of the steps you described took a bit of time going back and forth with documentation, but in general the process you described was very useful.
1. Add vertexColors property to the material.
```javascript
var material = new THREE.MeshBasicMaterial({
map: texture,
vertexColors: true,
});
```
1. Add the ‘color’ attribute to the BufferGeometry.
```javascript
// Get the length of attributes.
const count = geometry.attributes.position.count;
// Add color attribute
geometry.setAttribute(
"color",
new THREE.BufferAttribute(new Float32Array(count * 3), 3)
);
```
1. Initialize the colors of all the attributes (usually would be white, but I randomnized it so it could be easier to visualize the faces/vertices on my mesh)
```javascript
// Initialize the colors to white
const colors = geometry.attributes.color;
for (let i = 0; i < count; i++) {
colors.setXYZ(i, Math.random(), Math.random(), Math.random());
}
```
1. When raycasting, get the intersection faces, set the color to black.
```javascript
intersections.forEach((intersection) => {
const colorAttribute = bufferedGeometry.getAttribute("color");
colorAttribute.setXYZ(intersection.face.a, 0, 0, 0);
colorAttribute.setXYZ(intersection.face.b, 0, 0, 0);
colorAttribute.setXYZ(intersection.face.c, 0, 0, 0);
colorAttribute.needsUpdate = true;
});
```