ARKit : How to apply material with multiple colors for SCNCylinder in SCNView?

Question

I have to make a SCNCylinder to look like a dynamic pie chart, I am able to make it look like static pie chart by adding texture or applying color to SCNCylinder with below code. However, my pie chart values changes randomly and want to add material with color values occupying percentage portion of the cylinder.

    var planet : SCNGeometry
    planet = SCNCylinder(radius: 0.2, height: 0.05)
    let material = SCNMaterial()
    material.diffuse.contents = UIImage(named: "texture.jpg")
    //OR to apply single color
    material.diffuse.contents = UIColor.red
    planet.materials = [material]
    let planetNode = SCNNode(geometry: planet)

Answer 1

您不能SCNCylinder使用离散材料重新着色任意部分。SceneKit 仅定义了一种将圆柱体分解为具有单独材料的单独部分的方法（来自docs）：

圆柱体包含三个SCNGeometryElement对象：一个用于底部和顶部，一个用于环绕其侧面。SceneKit 可以使用不同的材质渲染每个元素。有关详细信息，请参阅 中的materials属性SCNGeometry。

这意味着您可以将您planet.materials的材质设置为包含三种材质的数组，但 SceneKit 只能使用它们分别为顶部、底部和侧面着色。

那么，如果您想创建饼图样式的外观，您有什么办法呢？OTOH，我能想到两三个方向去研究：

用图片做

你提到你已经尝试过这样的事情——创建一个看起来像饼图的静态图像，并将其分配给圆柱体的（顶部材质？）。

没有什么可以阻止您将此技术扩展到非静态饼图。您只需要动态创建图像（使用 CoreGraphics、UIGraphicsImageRenderer 等）。

为了让您的饼图在 3D 中看起来正确，您需要创建 3 张图像 - 圆柱顶部的常规饼图，底部相同饼图的反转版本，以及从顶部到 -底部颜色块的相对比例与环绕两侧的饼切片相同。可能需要进行一些实验才能弄清楚如何格式化这三个图像以使它们正确排列。

使用自定义几何图形

如果你想要一个“全 3D”饼图（就像你在 Pages、Numbers 和 Keynote 中看到的那些），其中每个切片都是一个单独的 3D 对象，可以从饼图中拉开，使其比其他切片更高/更短，等等，那么SCNCylinder不适合你。它只知道如何绘制完整的圆柱体。

没有任何用于创建楔形形状的内置 SceneKit 类，但是如果您可以计算出自己构建网格的数学方法，则可以在 SceneKit 中使用SCNGeometrySource和SCNGeometryElement构建该网格。

用它做 SCNShape

不过，自定义几何图形对于此任务可能有点过头了。您正在寻找的那种形状是一种更简单的 3D 几何形状——一种 2D 形状（圆的一部分）在第三维中挤压以创建 3D 实体（饼的楔形、蛋糕的切片） ，或任何其他您喜欢的美味隐喻）。

在 SceneKit 中，有一个应用程序。（呃，一个类。）SCNShape接受一个 2DUIBezierPath并挤压它以创建一个 3D 对象。你甚至可以给它应用漂亮的小圆边。并UIBezierPath允许您使用圆弧创建路径。

因此，要构建饼图：

1. UIBezierPath使用init(arcCenter:radius:startAngle:endAngle:clockwise:)初始值设定项创建多个对象，每个馅饼切片一个。对所有这些使用相同的中心点（零可能很好）。

2. 从每个 Be?zier 路径中，创建一个SCNShape具有您首选的拉伸深度的路径。如果您希望馅饼​​的每一片都具有不同的风味颜色，请为每个形状指定不同的材料。

3. 通过创建一个SCNNode来容纳每个切片，并将这些节点放置在相同的位置，将切片组装成一个饼图。（弧的 2D 原点在 3D 坐标系中受到尊重，因此如果您为使用相同中心创建的不同弧设置相同的节点位置，它们将在 3D 中具有相同的中心。）如果您希望能够移动之后将整个馅饼放在一起，创建另一个馅饼SCNNode并使所有切片成为其子级。

_{当吉特，现在我饿了……}