在 swift SceneKit 中绘制带有顶点的自定义节点的示例是什么?
What is an example of drawing custom nodes with vertices in swift SceneKit?
这个领域几乎没有在线记录,很高兴看到一个有效的 Swift 3 示例,例如,一个带有手动 SCNvector3s 的自定义绘制的立方体。 objective-C 中有这个,但 Swift 中没有。这可能不是一种常见的问题形式,但我知道它会帮助很多人。如果有遗漏的地方,请指出。
文档不是很有用
scngeometrysource等
谢谢
自定义几何体由一组顶点和法线构成。
顶点
在此上下文中,顶点是两条或多条线相交的点。对于立方体,顶点就是下图所示的角
我们通过用一组三角形构建立方体的面来构建几何体,每个面两个三角形。我们的第一个三角形由顶点 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 不知道三角形应该如何对场景中的光源做出反应。为了正确反射光线,我们需要为几何体的每个顶点提供至少一个法向量。
法线
A normal 是一个向量,它指定影响光如何从相应三角形反射的顶点的方向。在这种情况下,三角形的六个顶点的法向量是相同的;它们都指向正 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:[=18=],count:normalsPerFace)}.flatMap{[=18=]}
// Create an array of indices [0, 1, 2, ..., N-1]
let indices = vertices.enumerated().map{Int32([=18=].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)
这个领域几乎没有在线记录,很高兴看到一个有效的 Swift 3 示例,例如,一个带有手动 SCNvector3s 的自定义绘制的立方体。 objective-C 中有这个,但 Swift 中没有。这可能不是一种常见的问题形式,但我知道它会帮助很多人。如果有遗漏的地方,请指出。
文档不是很有用
scngeometrysource等
谢谢
自定义几何体由一组顶点和法线构成。
顶点
在此上下文中,顶点是两条或多条线相交的点。对于立方体,顶点就是下图所示的角
我们通过用一组三角形构建立方体的面来构建几何体,每个面两个三角形。我们的第一个三角形由顶点 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 不知道三角形应该如何对场景中的光源做出反应。为了正确反射光线,我们需要为几何体的每个顶点提供至少一个法向量。
法线
A normal 是一个向量,它指定影响光如何从相应三角形反射的顶点的方向。在这种情况下,三角形的六个顶点的法向量是相同的;它们都指向正 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:[=18=],count:normalsPerFace)}.flatMap{[=18=]}
// Create an array of indices [0, 1, 2, ..., N-1]
let indices = vertices.enumerated().map{Int32([=18=].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)