Swift SceneKit开发3D魔方：色块颜色渲染错位问题求助

使用Swift的SceneKit框架开发3D魔方时，出现色块面颜色渲染异常：预期中魔方每个面（如+Z方向正面为绿色）的9个小色块应呈现统一纯色，但实际颜色呈碎片化错位状态，比如绿色仅出现在部分行，无法形成完整的3x3纯色面，所有面均存在该问题。

问题核心信息 #

• 目标：让魔方6个面（前、后、左、右、上、下）的对应小色块（如z=1的所有色块正面）统一呈现对应颜色：+X为红色、-X为橙色、+Y为白色、-Y为黄色、+Z为绿色、-Z为蓝色。
• 当前现象：颜色仅部分显示或呈碎片化分布，无法形成完整的纯色面。
• 怀疑方向：SCNBox小色块可能存在旋转，导致材质应用到错误面，但无法确认及修复。

代码实现 #

CubeScene：

import SwiftUI
import SceneKit

class CuboScene: SCNScene {
    override init() {
        super.init()
        rootNode.eulerAngles = SCNVector3(0, 0, 0)  // Ensure rootNode is not rotated
        rootNode.position = SCNVector3(0, 0, 0)  // Ensure rootNode is at the origin
        rootNode.scale = SCNVector3(1, 1, 1)  // Ensure no unexpected scaling
        
//        let light = SCNLight()
//        light.type = .omni
//        light.intensity = 2000
//        let lightNode = SCNNode()
//        lightNode.light = light
//        lightNode.position = SCNVector3(x: 5, y: 5, z: 5)
//        rootNode.addChildNode(lightNode)
        
        configureLights()
        createRubikCube()
    }
    
    private func createRubikCube() {
        let size: CGFloat = 0.8
        let spacing: CGFloat = 1.05
        
        for x in -1...1 {
            for y in -1...1 {
                for z in -1...1 {
                    let cubelet = SCNBox(width: size, height: size, length: size, chamferRadius: 0.0)  // No rounded edges
                    let cubeletNode = SCNNode(geometry: cubelet)
                    cubeletNode.position = SCNVector3(Float(x) * Float(spacing),
                                                     Float(y) * Float(spacing),
                                                     Float(z) * Float(spacing))
                    cubeletNode.eulerAngles = SCNVector3(0, 0, 0)  // Ensure no rotation
                    print("Cubelet at position: (\(Float(x) * Float(spacing)), \(Float(y) * Float(spacing)), \(Float(z) * Float(spacing)) with materials: \(getFaceMaterial(x: x, y: y, z: z).map { $0.diffuse.contents as? UIColor ?? .gray }) and eulerAngles: \(cubeletNode.eulerAngles), rotation: \(cubeletNode.rotation)")
                    
                    cubelet.materials = getFaceMaterial(x: x, y: y, z: z)
                    rootNode.addChildNode(cubeletNode)
                }
            }
        }
    }
    
    private func getFaceMaterial(x: Int, y: Int, z: Int) -> [SCNMaterial] {
        let colors: [UIColor] = [
            // Right face (+X): red if x = 1, gray for x = 0 or -1
            (x == 1) ? .red : .gray,
            // Left face (-X): orange if x = -1, gray for x = 0 or 1
            (x == -1) ? .orange : .gray,
            // Top face (+Y): white if y = 1, gray for y = 0 or -1
            (y == 1) ? .white : .gray,
            // Bottom face (-Y): yellow if y = -1, gray for y = 0 or 1
            (y == -1) ? .yellow : .gray,
            // Front face (+Z): green if z = 1, gray for z = 0 or -1
            (z == 1) ? .green : .gray,
            // Back face (-Z): blue if z = -1, gray for z = 0 or 1
            (z == -1) ? .blue : .gray
        ]
//        print("Position (\(x), \(y), \(z)): Colors = \(colors)")  // Debugging
        return colors.map { createMaterial(color: $0) }
    }
    
    private func createMaterial(color: UIColor) -> SCNMaterial {
        let material = SCNMaterial()
        print("Applying material with color: \(color)")
        material.diffuse.contents = color.withAlphaComponent(1.0)
        material.specular.contents = UIColor.white
        material.shininess = 100
        material.lightingModel = .phong
        
        return material
    }
    
    private func configureLights() {
        // Ambient light for base illumination
        let ambientLight = SCNLight()
        ambientLight.type = .ambient
        ambientLight.intensity = 500
        let ambientLightNode = SCNNode()
        ambientLightNode.light = ambientLight
        rootNode.addChildNode(ambientLightNode)

        // Array of positions and directions for the 6 lights
        let positions: [(SCNVector3, SCNVector3)] = [
            (SCNVector3(0, 10, 0), SCNVector3(0, -1, 0)),  // Top
            (SCNVector3(0, -10, 0), SCNVector3(0, 1, 0)),   // Bottom
            (SCNVector3(10, 0, 0), SCNVector3(-1, 0, 0)),   // Right
            (SCNVector3(-10, 0, 0), SCNVector3(1, 0, 0)),   // Left
            (SCNVector3(0, 0, 10), SCNVector3(0, 0, -1)),   // Front
            (SCNVector3(0, 0, -10), SCNVector3(0, 0, 1))    // Back
        ]

        for (position, direction) in positions {
            let light = SCNLight()
            light.type = .directional
            light.intensity = 1000
            light.color = UIColor.white
            let lightNode = SCNNode()
            lightNode.light = light
            lightNode.position = position
            lightNode.eulerAngles = SCNVector3(
                atan2(direction.y, direction.z),
                atan2(direction.x, direction.z),
                0
            ) // Orient toward the center
            rootNode.addChildNode(lightNode)
        }
    }
    
    required init(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

SceneKitView：

import SwiftUI
import SceneKit

struct SceneKitView: UIViewRepresentable {
    func makeUIView(context: Context) -> SCNView {
        let view = SCNView()
        view.scene = CuboScene()  // Use the created scene
        view.allowsCameraControl = true  // Allow camera movement with touch
        view.autoenablesDefaultLighting = false  // Disable default lighting
        view.backgroundColor = .clear
        
        // Configure an initial camera
        let cameraNode = SCNNode()
        cameraNode.camera = SCNCamera()
        cameraNode.position = SCNVector3(x: 5, y: 5, z: 5)  // Diagonal position to see all faces
        cameraNode.look(at: SCNVector3(0, 0, 0))  // Point to the cubes center
        view.pointOfView = cameraNode
        
        return view
    }

    func updateUIView(_ uiView: SCNView, context: Context) {}
}

#Preview {
    SceneKitView()
}

当前渲染效果 #

问题根源与修复方案 #

问题核心是SCNBox的材质顺序与你预期的面方向不匹配。SceneKit中SCNBox的6个材质对应的面顺序是固定的，并非你代码中假设的[+X, -X, +Y, -Y, +Z, -Z]，正确的材质顺序对应关系为：

1. 右（+X）
2. 左（-X）
3. 前（+Z）
4. 后（-Z）
5. 上（+Y）
6. 下（-Y）

修复步骤

修改getFaceMaterial(x:y:z:)方法中的颜色数组顺序，匹配SCNBox的材质面顺序：

private func getFaceMaterial(x: Int, y: Int, z: Int) -> [SCNMaterial] {
    let colors: [UIColor] = [
        // 1. Right face (+X): red if x = 1, gray otherwise
        (x == 1) ? .red : .gray,
        // 2. Left face (-X): orange if x = -1, gray otherwise
        (x == -1) ? .orange : .gray,
        // 3. Front face (+Z): green if z = 1, gray otherwise
        (z == 1) ? .green : .gray,
        // 4. Back face (-Z): blue if z = -1, gray otherwise
        (z == -1) ? .blue : .gray,
        // 5. Top face (+Y): white if y = 1, gray otherwise
        (y == 1) ? .white : .gray,
        // 6. Bottom face (-Y): yellow if y = -1, gray otherwise
        (y == -1) ? .yellow : .gray
    ]
    return colors.map { createMaterial(color: $0) }
}

额外验证建议

• 保留调试打印语句，确认每个小色块的位置与材质颜色对应关系是否正确
• 后续若需旋转魔方层，确保旋转操作仅作用于小色块节点，而非修改SCNBox本身的方向

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