在swift SceneKit中使用顶点绘制自定义节点的示例是什么?

har*_*ins 8 vector vector-graphics scenekit swift swift3

这个区域很难在线记录,很高兴看到一个有效的Swift 3示例,比如一个带有手动SCNvector3s的自定义绘制多维数据集.在Objective-C中有这个但不是Swift.这可能不是一个常见的问题形式,但我知道这会对很多人有所帮助.如果我错过了某个地方,请提及.

文档不是很有帮助

scngeometrysource等

谢谢

0x1*_*41E 21

自定义几何体由一组顶点和法线构成.

顶点

在此上下文中,顶点是两条或更多条线相交的点.对于立方体,顶点是下图中显示的角

在此输入图像描述

我们通过用一组三角形构建立方体的面来构造几何体,每个面都有两个三角形.我们的第一个三角形由顶点0,2和3定义,如下图所示,第二个三角形由顶点0,1和2定义.重要的是要注意每个三角形都有正面和背面.三角形的边由顶点的顺序确定,其中正面以逆时针顺序指定.对于我们的立方体,正面将始终是立方体的外部.

如果立方体的中心是原点,则可以定义定义立方体的一个面的六个顶点

let vertices:[SCNVector3] = [
        SCNVector3(x:-1, y:-1, z:1),    // 0
        SCNVector3(x:1, y:1, z:1),      // 2
        SCNVector3(x:-1, y:1, z:1)      // 3

        SCNVector3(x:-1, y:-1, z:1),    // 0
        SCNVector3(x:1, y:-1, z:1),     // 1
        SCNVector3(x:1, y:1, z:1)       // 2
]
Run Code Online (Sandbox Code Playgroud)

然后我们创建顶点源

let vertexSource = SCNGeometrySource(vertices: vertices)
Run Code Online (Sandbox Code Playgroud)

此时,我们有一个顶点源,可用于构建立方体的一个面; 但是,SceneKit不知道三角形应如何对场景中的光源做出反应.为了正确反射光,我们需要为每个顶点提供至少一个法向量.

法线

正常是指定影响光如何反射离开相应的三角形顶点的朝向的向量.在这种情况下,三角形的六个顶点的法向矢量是相同的; 它们都指向正z方向(即x = 0,y = 0,z = 1); 看下图中的红色箭头.

在此输入图像描述

法线定义为

let normals:[SCNVector3] = [
        SCNVector3(x:0, y:0, z:1),      // 0
        SCNVector3(x:0, y:0, z:1),      // 2
        SCNVector3(x:0, y:0, z:1),      // 3

        SCNVector3(x:0, y:0, z:1),      // 0
        SCNVector3(x:0, y:0, z:1),      // 1
        SCNVector3(x:0, y:0, z:1)       // 2
]
Run Code Online (Sandbox Code Playgroud)

并且源由...定义

let normalSource = SCNGeometrySource(normals: normals)
Run Code Online (Sandbox Code Playgroud)

我们现在有构造有限几何所需的源(顶点和法线),即一个立方体面(两个三角形).最后一部分是在顶点和普通数组中创建一个索引数组.在这种情况下,索引是顺序的,因为顶点按它们使用的顺序排列.

let indices:[Int32] = [0, 1, 2, 3, 4, 5]
Run Code Online (Sandbox Code Playgroud)

从索引中,我们创建了一个几何元素.设置更复杂,因为SCNGeometryElement需要NSData一个参数.

let pointer = UnsafeRawPointer(indices)
let indexData = NSData(bytes: pointer, length: MemoryLayout<Int32>.size * indices.count)

let element = SCNGeometryElement(data: indexData as Data, primitiveType: .triangles, primitiveCount: indices.count, bytesPerIndex: MemoryLayout<Int32>.size)
Run Code Online (Sandbox Code Playgroud)

我们现在可以创建自定义几何体

let geometry = SCNGeometry(sources: [vertexSource, normalSource], elements: [element])
Run Code Online (Sandbox Code Playgroud)

最后创建一个节点并将自定义几何体分配给它的geometry属性

let node = SCNNode()
node.geometry = geometry

scene.rootNode.addChildNode(node)
Run Code Online (Sandbox Code Playgroud)

我们现在将顶点和法线扩展为包括所有立方体面:

    // The vertices
    let v0 = SCNVector3(x:-1, y:-1, z:1)
    let v1 = SCNVector3(x:1, y:-1, z:1)
    let v2 = SCNVector3(x:1, y:1, z:1)
    let v3 = SCNVector3(x:-1, y:1, z:1)

    let v4 = SCNVector3(x:-1, y:-1, z:-1)
    let v5 = SCNVector3(x:1, y:-1, z:-1)
    let v6 = SCNVector3(x:-1, y:1, z:-1)
    let v7 = SCNVector3(x:1, y:1, z:-1)

    // All the cube faces
    let vertices:[SCNVector3] = [
        // Front face
        v0, v2, v3,
        v0, v1, v2,

        // Right face
        v1, v7, v2,
        v1, v5, v7,

        // Back
        v5, v6, v7,
        v5, v4, v6,

        // Left
        v4, v3, v6,
        v4, v0, v3,

        // Top
        v3, v7, v6,
        v3, v2, v7,

        // Bottom
        v1, v4, v5,
        v1, v0, v4
    ]

    let normalsPerFace = 6
    let plusX = SCNVector3(x:1, y:0, z:0)
    let minusX = SCNVector3(x:-1, y:0, z:0)
    let plusZ = SCNVector3(x:0, y:0, z:1)
    let minusZ = SCNVector3(x:0, y:0, z:-1)
    let plusY = SCNVector3(x:0, y:1, z:0)
    let minusY = SCNVector3(x:0, y:-1, z:0)

    // Create an array with the direction of each vertex. Each array element is
    // repeated 6 times with the map function. The resulting array or arrays
    // is then flatten to an array
    let normals:[SCNVector3] = [
        plusZ,
        plusX,
        minusZ,
        minusX,
        plusY,
        minusY
        ].map{[SCNVector3](repeating:$0,count:normalsPerFace)}.flatMap{$0}

    // Create an array of indices [0, 1, 2, ..., N-1]
    let indices = vertices.enumerated().map{Int32($0.0)}

    let vertexSource = SCNGeometrySource(vertices: vertices)

    let normalSource = SCNGeometrySource(normals: normals)

    let pointer = UnsafeRawPointer(indices)
    let indexData = NSData(bytes: pointer, length: MemoryLayout<Int32>.size * indices.count)

    let element = SCNGeometryElement(data: indexData as Data, primitiveType: .triangles, primitiveCount: indices.count/3, bytesPerIndex: MemoryLayout<Int32>.size)

    let geometry = SCNGeometry(sources: [vertexSource, normalSource], elements: [element])

    // Create a node and assign our custom geometry
    let node = SCNNode()
    node.geometry = geometry

    scene.rootNode.addChildNode(node)
Run Code Online (Sandbox Code Playgroud)

  • 非常感谢您使用此代码示例.但是我相信它有一个小问题:`let element = SCNGeometryElement(data:indexData as Data,primitiveType:.triangles,primitiveCount:**indices.count**,bytesPerIndex:MemoryLayout <Int32> .size)`那里应该是`let element = SCNGeometryElement(data:indexData as Data,primitiveType:.triangles,primitiveCount:**indices.count/3**,bytesPerIndex:MemoryLayout <Int32> .size)`,因为我们的三角形数少于三倍垂直. (3认同)