ARKit中为贝塞尔路径SCNShape分配2D图片失败问题求助

问题根源分析 #

图片无法显示的核心原因分为两类：

1. 原AddImage()函数的问题 #

• 使用SCNShape时，直接将3D节点的x/y坐标映射到2DUIBezierPath，完全忽略AR场景的z轴深度，导致生成的形状与实际绘制节点不在同一平面。
• 硬编码shapeNode.position.z = -0.2，与AR平面实际位置不匹配，形状被放置在错误空间位置，无法被观测到。

2. 自定义三角形几何体的问题 #

• 仅定义顶点数据，缺少纹理坐标（UV）：3D几何体需要明确图片像素与顶点的对应关系，无UV坐标时，渲染引擎无法正确映射纹理。
• 未处理3D顶点到平面的投影逻辑，无法为纹理提供有效的映射基准。

解决方案：修复自定义几何体的纹理映射 #

推荐采用自定义三角形几何体方案，补充UV坐标与平面适配逻辑，完整修复代码如下：

完整修复后的AddImage()函数 #

func AddImage() {
    isEditingEnabled = false
    
    guard nodes.count >= 3 else { return }
    
    // 1. 获取所有节点的3D位置，提取平面基准（取第一个节点的y值作为平面高度）
    let vertices = nodes.map { $0.position }
    let planeY = vertices.first!.y // 假设所有节点在同一水平平面
    
    // 2. 生成纹理坐标（UV）：将3D的x/z坐标转换为平面内相对坐标
    var uvCoordinates: [CGPoint] = []
    // 计算x/z轴的边界，用于归一化UV到0-1范围
    let minX = vertices.map { $0.x }.min()!
    let maxX = vertices.map { $0.x }.max()!
    let minZ = vertices.map { $0.z }.min()!
    let maxZ = vertices.map { $0.z }.max()!
    
    for vertex in vertices {
        let u = CGFloat((vertex.x - minX) / (maxX - minX))
        let v = CGFloat((vertex.z - minZ) / (maxZ - minZ))
        uvCoordinates.append(CGPoint(x: u, y: v))
    }
    // 闭合形状，UV坐标同步重复第一个点
    uvCoordinates.append(uvCoordinates.first!)
    
    // 3. 创建顶点数据源
    let vertexSource = SCNGeometrySource(vertices: vertices)
    
    // 4. 创建UV数据源
    let uvData = uvCoordinates.flatMap { [$0.x, $0.y] }
    let uvSource = SCNGeometrySource(
        data: Data(bytes: uvData, count: uvData.count * MemoryLayout<CGFloat>.stride),
        semantic: .texcoord,
        vectorCount: uvCoordinates.count,
        usesFloatComponents: true,
        componentsPerVector: 2,
        bytesPerComponent: MemoryLayout<CGFloat>.stride,
        dataOffset: 0,
        dataStride: MemoryLayout<CGFloat>.stride * 2
    )
    
    // 5. 创建三角形索引（三角扇方式）
    var indices: [UInt32] = []
    for i in 1..<(vertices.count) {
        indices.append(0)
        indices.append(UInt32(i))
        indices.append(UInt32(i + 1))
    }
    let indexData = Data(bytes: indices, count: indices.count * MemoryLayout<UInt32>.stride)
    let geometryElement = SCNGeometryElement(
        data: indexData,
        primitiveType: .triangles,
        primitiveCount: indices.count / 3,
        bytesPerIndex: MemoryLayout<UInt32>.stride
    )
    
    // 6. 创建几何体并设置材质
    let geometry = SCNGeometry(sources: [vertexSource, uvSource], elements: [geometryElement])
    
    let material = SCNMaterial()
    if let image = UIImage(named: "grass1") {
        material.diffuse.contents = image
    } else {
        material.diffuse.contents = UIColor.red // 图片加载失败时的 fallback
    }
    material.isDoubleSided = true
    material.diffuse.contentsTransform = SCNMatrix4MakeScale(2, 2, 1) // 调整纹理缩放比例
    geometry.materials = [material]
    
    // 7. 创建节点并添加到场景
    let shapeNode = SCNNode(geometry: geometry)
    shapeNode.position.y = planeY // 确保形状与球体节点在同一平面
    sceneView.scene.rootNode.addChildNode(shapeNode)
}

关键修复点说明 #

• UV坐标生成：将3D节点的x/z坐标归一化到0-1范围，明确图片像素与形状顶点的映射关系。
• 平面适配：取所有节点的共同y值作为形状高度，确保形状与绘制的球体节点处于同一AR平面。
• 完整数据源：同时提供顶点与UV数据源，让渲染引擎能正确解析并渲染纹理。

额外优化建议 #

• 平面一致性校验：添加逻辑判断所有绘制节点是否处于同一平面，避免跨平面绘制导致形状扭曲。
• 纹理适配：根据形状实际大小动态调整contentsTransform的缩放值，优化图片贴合效果。
• 旧形状清理：每次调用AddImage()前，移除场景中已存在的旧形状节点，避免重叠显示。

内容的提问来源于stack exchange，提问作者Jeeyaa