Incorrect normals derived from simple raycasting

Questions
1

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
image685×574 127 KB

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
2

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