# Incorrect normals derived from simple raycasting

**URL:** <https://discourse.threejs.org/t/incorrect-normals-derived-from-simple-raycasting/14308>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [April 13, 2020, 7:31pm UTC](https://discourse.threejs.org/t/incorrect-normals-derived-from-simple-raycasting/14308 "2020-04-13T19:31:11Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![willgoldring](https://avatars.discourse-cdn.com/v4/letter/w/5e9695/32.png) [@willgoldring](https://discourse.threejs.org/u/willgoldring)\
**Post date:** [April 13, 2020, 7:31pm UTC](https://discourse.threejs.org/t/incorrect-normals-derived-from-simple-raycasting/14308/1 "2020-04-13T19:31:12Z")

</div>

I am using the raycaster to project a circle onto a geometry primitive (cone). The black circle is correctly cast onto the cone surface and rendered in yellow. Using the intersect object from the raycast, I have the intersected points on the cone and the unit normal of the intersected faces. From these I am attempting to draw the normal at 100 points along the curve on the cone. However, either I am rendering the normal lines incorrectly or the face normals from the intersect object are off. Any help or insight appreciated. Code segment of interest follows the snip.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/bc38ee589fabd6487e1146ceaa89135c4af2d42b.jpeg)  
var spline = new Array(); // stores pts for the curve

```
    for (i = 0; i < thePoints.length; i++) { //thePoints holds all the pts on the black circle
        var thispt = new THREE.Vector3(thePoints[i].x, thePoints[i].y, 120); // a point on the black circle
        raycaster.set(thispt, new THREE.Vector3(0,0,-1)); // set up raycaster, use thispt as origin and 0,0,-1 as directional unit vector
        var intersects = raycaster.intersectObject(scene.getObjectByName("mysurf")); // get intersect object
        // console.log(intersects);
        spline.push(intersects[0].point); // push the intersected pt to storage

        // intersect object provides intersected pt and face normal
        var ptOnCurve = intersects[0].point; // intersected pt 
        var faceNormal = intersects[0].face.normal.normalize(); // face normal

        // draw the normal
        var normalPts = [];
        p1 = new THREE.Vector3(ptOnCurve.x, ptOnCurve.y, ptOnCurve.z).clone();
        p2 = faceNormal.clone().multiplyScalar(10).add(p1);
        normalPts.push(p1);
        normalPts.push(p2);

        var linematerial = new THREE.LineBasicMaterial({ color: 0x0000ff });
        var linegeometry = new THREE.BufferGeometry().setFromPoints(normalPts);
        var line = new THREE.Line(linegeometry, linematerial);
        scene.add(line); // add the blue normal line to scene
```

---

<div class="post-metadata">

**Author:** ![Jim](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jim/32/10458_2.png) [@Jim](https://discourse.threejs.org/u/Jim)\
**Post date:** [April 13, 2020, 9:19pm UTC](https://discourse.threejs.org/t/incorrect-normals-derived-from-simple-raycasting/14308/2 "2020-04-13T21:19:42Z")

</div>

It wouldn’t surprise me if the face normal from the intersected object really are off. Are you computing the face normals on the “mysurf” object’s geomery? If not, a call to computeFaceNormals on the geometry (or computing them yourself) might do the trick.

A way to double-check visually if the face normals are set up correctly is to attach a FaceNormalsHelper; see [https://threejs.org/docs/#examples/en/helpers/FaceNormalsHelper](https://threejs.org/docs/#examples/en/helpers/FaceNormalsHelper)