【问题标题】:What is an example of drawing custom nodes with vertices in swift SceneKit?在 swift SceneKit 中使用顶点绘制自定义节点的示例是什么?
【发布时间】:2017-10-11 10:42:26
【问题描述】:

这个领域几乎没有在线记录,如果能看到一个工作的 Swift 3 示例,比如一个带有手动 SCNvector3s 的自定义绘制立方体,那就太好了。在 Objective-C 中有这个,但在 Swift 中没有。这可能不是一个常见的问题形式,但我知道它会帮助很多人。如果有遗漏的地方,请指出。

文档不是很有帮助

scngeometrysource 等

谢谢

【问题讨论】:

  • 您解决了这个问题吗?
  • 不。还是想了解自己。

标签: swift vector swift3 scenekit vector-graphics


【解决方案1】:

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

顶点

在这种情况下,顶点是两条或多条线相交的点。对于立方体,顶点是下图所示的角

我们通过使用一组三角形构建立方体的面来构造几何图形,每个面两个三角形。我们的第一个三角形由顶点 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
]

我们通过

创建顶点源
let vertexSource = SCNGeometrySource(vertices: vertices)

此时,我们有了一个顶点源,可以用来构造立方体的一个面;但是,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
]

来源由

定义
let normalSource = SCNGeometrySource(normals: normals)

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

var indices:[Int32] = [0, 1, 2, 3, 4, 5]

根据索引,我们创建一个几何元素。设置有点复杂,因为SCNGeometryElement 需要NSData 作为参数。

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

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

我们现在可以使用

创建自定义几何
let geometry = SCNGeometry(sources: [vertexSource, normalSource], elements: [element])

    

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

let node = SCNNode()
node.geometry = geometry

scene.rootNode.addChildNode(node)

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

    // 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)

【讨论】:

  • 这太棒了!
  • 非常感谢您提供此代码示例。但是我相信它有一个小问题:let element = SCNGeometryElement(data: indexData as Data, primitiveType: .triangles, primitiveCount: **indices.count**, bytesPerIndex: MemoryLayout&lt;Int32&gt;.size) 应该有let element = SCNGeometryElement(data: indexData as Data, primitiveType: .triangles, primitiveCount: **indices.count/3**, bytesPerIndex: MemoryLayout&lt;Int32&gt;.size),因为我们的三角形比垂直少三倍。
  • 无法将材质分配给节点。
  • @ShubhamOjha 您将材质分配给节点的geometry 而不是节点。
  • @0x141E 是的,我也在做同样的事情。仍然没有做出任何改变。仅供参考,我正在使用原始类型线在两点之间构造线。但不能自定义线条材质
猜你喜欢
  • 2017-02-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-11
  • 2019-10-24
  • 1970-01-01
  • 2020-03-20
  • 2017-02-07
相关资源
最近更新 更多