how to draw an arrow in SceneKit?

user_5055722 0
Viewed 2938

I am trying to draw arrow using SCNGeometrySource, SCNGeometryElement. but not able to draw exact arrow like below image.

is that possible to draw simple arrow line with heads or arrow like below image.?

I have tried below code but that won't work.

let indices: [Int32] = [0, 1,1]
        let source = SCNGeometrySource(vertices: [vector1, vector2])
        let element = SCNGeometryElement(indices: indices, primitiveType: .triangles)

enter image description here

scenekit arkit swift
2 Answers

If the arrow will always be facing the camera, as in your attached image, you can use a SCNPlane and use the arrow image as a texture.

If it wont always face the camera, you’ll probably want to give it some thickness. I don’t agree with the other answer being a “better” solution than the approach you tried, if done correctly.

Obj C code (edit: added swift version below)

int vertcount = 48;
float verts[] = { -14.923, 11.824, 25.000, -64.923, 0.000, 0.000, -14.923, -11.824, 25.000, 46.077, -5.812, 16.800, 46.077, -5.812, -16.800, 46.077, 5.812, -16.800, 46.077, 5.812, 16.800, -14.923, -11.824, -25.000, -14.923, 11.824, -25.000, -14.923, 4.974, -9.969, -14.923, 4.974, 9.969, -14.923, -4.974, 9.969, -14.923, -4.974, -9.969 };

int facecount = 13;
int faces[] = {  3, 4, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 0, 1, 2, 3, 4, 5, 6, 7, 1, 8, 8, 1, 0, 2, 1, 7, 9, 8, 0, 10, 10, 0, 2, 11, 11, 2, 7, 12, 12, 7, 8, 9, 9, 5, 4, 12, 10, 6, 5, 9, 11, 3, 6, 10, 12, 4, 3, 11};

NSData *vertsData = [NSData dataWithBytes:&verts length:sizeof(verts)];

SCNGeometrySource *vertexSource = [SCNGeometrySource geometrySourceWithData: vertsData 
semantic:SCNGeometrySourceSemanticVertex
vectorCount:vertcount
floatComponents:YES
componentsPerVector:3
bytesPerComponent:sizeof(float)
dataOffset:0
dataStride:sizeof(float)*3];

int polyIndexCount = 61;
NSData *indexPolyData = [NSData dataWithBytes:faces length:sizeof(int) * polyIndexCount];
SCNGeometryElement *element1 = [SCNGeometryElement geometryElementWithData:indexPolyData
primitiveType:SCNGeometryPrimitiveTypePolygon
primitiveCount:facecount
bytesPerIndex:sizeof(int)];

SCNGeometry *geometry1 = [SCNGeometry geometryWithSources:@[ vertexSource ] elements:@[ element1]];

//Assign the SCNGeometry to a SCNNode, for example:
//SCNNode *aNode = [[SCNNode alloc] init];
//aNode.geometry = geometry1;

Note it uses the polygon primitive type.

The vert list can be cleaned up a bit by rounding the floats.

This creates the following 3D arrow (without the vertices and edges visible):

enter image description here

enter image description here

EDIT: SWIFT version:

let vertcount = 48;
        let verts: [Float] = [ -1.4923, 1.1824, 2.5000, -6.4923, 0.000, 0.000, -1.4923, -1.1824, 2.5000, 4.6077, -0.5812, 1.6800, 4.6077, -0.5812, -1.6800, 4.6077, 0.5812, -1.6800, 4.6077, 0.5812, 1.6800, -1.4923, -1.1824, -2.5000, -1.4923, 1.1824, -2.5000, -1.4923, 0.4974, -0.9969, -1.4923, 0.4974, 0.9969, -1.4923, -0.4974, 0.9969, -1.4923, -0.4974, -0.9969 ];

        let facecount = 13;
        let faces: [CInt] = [  3, 4, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 0, 1, 2, 3, 4, 5, 6, 7, 1, 8, 8, 1, 0, 2, 1, 7, 9, 8, 0, 10, 10, 0, 2, 11, 11, 2, 7, 12, 12, 7, 8, 9, 9, 5, 4, 12, 10, 6, 5, 9, 11, 3, 6, 10, 12, 4, 3, 11 ];

        let vertsData  = NSData(
            bytes: verts,
            length: MemoryLayout<Float>.size * vertcount
        )

        let vertexSource = SCNGeometrySource(data: vertsData as Data,
                                             semantic: .vertex,
                                             vectorCount: vertcount,
                                             usesFloatComponents: true,
                                             componentsPerVector: 3,
                                             bytesPerComponent: MemoryLayout<Float>.size,
                                             dataOffset: 0,
                                             dataStride: MemoryLayout<Float>.size * 3)

        let polyIndexCount = 61;
        let indexPolyData  = NSData( bytes: faces, length: MemoryLayout<CInt>.size * polyIndexCount )

        let element1 = SCNGeometryElement(data: indexPolyData as Data,
                                          primitiveType: .polygon,
                                          primitiveCount: facecount,
                                          bytesPerIndex: MemoryLayout<CInt>.size)

        let geometry1 = SCNGeometry(sources: [vertexSource], elements: [element1])

        let material1 = geometry1.firstMaterial!

        material1.diffuse.contents = UIColor(red: 0.14, green: 0.82, blue: 0.95, alpha: 1.0)
        material1.lightingModel = .lambert
        material1.transparency = 1.00
        material1.transparencyMode = .dualLayer
        material1.fresnelExponent = 1.00
        material1.reflective.contents = UIColor(white:0.00, alpha:1.0)
        material1.specular.contents = UIColor(white:0.00, alpha:1.0)
        material1.shininess = 1.00

        //Assign the SCNGeometry to a SCNNode, for example:
        let aNode = SCNNode()
        aNode.geometry = geometry1
        //aNode.scale = SCNVector3(0.1, 0.1, 0.1)
        scene.rootNode.addChildNode(aNode)

Tested above Swift code to double check it works:

enter image description here

If you need it to be smaller, uncomment the .scale line and try different values to see how small you want it. If you end up wanting it for example to be scale 0.06, I suggest regenerating the vert list by multiplying the values in it by 0.06 and then remove the scale line.

user_74263740

For a shape like that you're better off creating a flat UIBezierPath for the arrow and then creating an SCNShape by extruding the path to get a three-dimensional geometry.

user_6081570
Related