visionOS空间计算实战开发教程Day 6 拖拽和点击

Alan

6 月前

在之前的学习中我们在空间中添加了3D模型，但在初始摆放后就无法再对其进行移动或做出修改。本节我们在Day 5显示和隐藏的基础上让我们模型可以实现拖拽效果，同时对纯色的立方体实现点击随机换色的功能。

首先是入口文件，无需做出改变，

import SwiftUI

@main
struct visionOSDemoApp: App {
    var body: some Scene {
        WindowGroup() {
            ContentView()
        }
        ImmersiveSpace(id: "ImmersiveSpace") {
            ImmersiveView()
        }
    }
}

import SwiftUI

@main

struct visionOSDemoApp: App {

var body: some Scene {

WindowGroup() {

ContentView()

}

ImmersiveSpace(id: "ImmersiveSpace") {

ImmersiveView()

}

接着是ViewModel.swift文件，这里是核心逻辑：

import SwiftUI
import RealityKit

class ViewModel: ObservableObject {
    private var contentEntity = Entity()
    private let colors: [SimpleMaterial.Color] = [.gray, .red, .orange, .yellow, .green, .blue, .purple, .systemPink]
    
    func setupContentEntity() -> Entity {
        return contentEntity
    }
    
    func addCube() -> Entity {
        let entity = ModelEntity(
            mesh: .generateBox(size: 0.5, cornerRadius: 0),
            materials: [SimpleMaterial(color: .red, isMetallic: false)],
            collisionShape: .generateBox(size: SIMD3<Float>(repeating: 0.5)),
            mass: 0.0
        )
        
        entity.components.set(InputTargetComponent(allowedInputTypes: .indirect))
        entity.position = SIMD3(x: 0, y: 1, z: -2)
        
        contentEntity.addChild(entity)
        
        return entity
    }
    
    func changeToRandomColor(entity: Entity) {
        guard let _entity = entity as? ModelEntity else { return }
        _entity.model?.materials = [SimpleMaterial(color: colors.randomElement()!, isMetallic: false)]
    }
}

import SwiftUI

import RealityKit

class ViewModel: ObservableObject {

private var contentEntity = Entity()

private let colors: [SimpleMaterial.Color] = [.gray, .red, .orange, .yellow, .green, .blue, .purple, .systemPink]

func setupContentEntity() -> Entity {

return contentEntity

}

func addCube() -> Entity {

let entity = ModelEntity(

mesh: .generateBox(size: 0.5, cornerRadius: 0),

materials: [SimpleMaterial(color: .red, isMetallic: false)],

collisionShape: .generateBox(size: SIMD3<Float>(repeating: 0.5)),

mass: 0.0

)

entity.components.set(InputTargetComponent(allowedInputTypes: .indirect))

entity.position = SIMD3(x: 0, y: 1, z: -2)

contentEntity.addChild(entity)

return entity

}

func changeToRandomColor(entity: Entity) {

guard let _entity = entity as? ModelEntity else { return }

_entity.model?.materials = [SimpleMaterial(color: colors.randomElement()!, isMetallic: false)]

}

这里增加了一个colors常量，用于设置一个包含多种颜色数组，以便进行随机颜色修改。颜色是通过SimpleMaterial的color参数进行随机更换（randomElement），然后赋值给.materials属性，这部分逻辑位于changeToRandomColor中。

在addCube的逻辑中，我们还是常规地生成一个entity并返回。

接着来到ImmersiveView：

import SwiftUI
import RealityKit

struct ImmersiveView: View {
    @State var model = ViewModel()
    @State var cube = Entity()
        
    var body: some View {
        RealityView { content in
            content.add(model.setupContentEntity())
            cube = model.addCube()
        }
        .gesture(
            DragGesture()
                .targetedToEntity(cube)
                .onChanged { value in
                    cube.position = value.convert(value.location3D, from: .local, to: cube.parent!)
                }
        )
        .gesture(
            SpatialTapGesture()
                .targetedToEntity(cube)
                .onEnded { value in
                    model.changeToRandomColor(entity: cube)
                }
        )
        
    }
}

import SwiftUI

import RealityKit

struct ImmersiveView: View {

@State var model = ViewModel()

@State var cube = Entity()

var body: some View {

RealityView { content in

content.add(model.setupContentEntity())

cube = model.addCube()

}

.gesture(

DragGesture()

.targetedToEntity(cube)

.onChanged { value in

cube.position = value.convert(value.location3D, from: .local, to: cube.parent!)

}

)

.gesture(

SpatialTapGesture()

.targetedToEntity(cube)

.onEnded { value in

model.changeToRandomColor(entity: cube)

}

)

}

在这个视图中我们声明了cube变量，以便后续的拖拽和随机颜色修改操作。所以在初始化视图时将添加的立方体赋值给cube。然后分别通过DragGesture和SpatialTapGesture来实现拖拽和点击的逻辑。

这里需要说明一个本例中生成的立方体在完成拖放，隐藏后再次展开后会生成一个新的供拖放和修改颜色的模型，这时老的模型就无法再进行拖放了。如果读者只希望操作同一个模型，可以对addCube添加了一个name参数，并添加一个getTargetEntity方法来获取该对象，当然也可以通过预设名称来切换不同的模型进行操作，示例修改如下：

   func getTargeEntity(name: String) -> Entity? {
        return contentEntity.children.first { $0.name == name }
    }
    
    func addCube(name: String) -> Entity {
        if let entity = getTargeEntity(name: name) {
            return entity
        }
...
        entity.name = name
...

func getTargeEntity(name: String) -> Entity? {

return contentEntity.children.first { $0.name == name }

}

func addCube(name: String) -> Entity {

if let entity = getTargeEntity(name: name) {

return entity

}

...

entity.name = name

...

对应的ImmersiveView也要修改为类似cube = model.addCube("Cube1")。

ContentView.swift的代码与Day 5一致：

import SwiftUI
import RealityKit

struct ContentView: View {
    @State var showImmsersiveSpace = false
    
    @Environment(\.openImmersiveSpace) var openImmersiveSpace
    @Environment(\.dismissImmersiveSpace) var dismissImmersiveSpace
    
    var body: some View {
        NavigationStack {
            VStack {
                Toggle("Show ImmersiveSpace", isOn: $showImmsersiveSpace)
                    .toggleStyle(.button)
            }
            .padding()
        }
        .onChange(of: showImmsersiveSpace) { _, newValue in
            Task {
                if newValue {
                    await openImmersiveSpace(id: "ImmersiveSpace")
                } else {
                    await dismissImmersiveSpace()
                }
            }
        }
    }
}

import SwiftUI

import RealityKit

struct ContentView: View {

@State var showImmsersiveSpace = false

@Environment(\.openImmersiveSpace) var openImmersiveSpace

@Environment(\.dismissImmersiveSpace) var dismissImmersiveSpace

var body: some View {

NavigationStack {

VStack {

Toggle("Show ImmersiveSpace", isOn: $showImmsersiveSpace)

.toggleStyle(.button)

}

.padding()

}

.onChange(of: showImmsersiveSpace) { _, newValue in

Task {

if newValue {

await openImmersiveSpace(id: "ImmersiveSpace")

} else {

await dismissImmersiveSpace()

}

运行应用点击盒子会随机改变颜色，拖拽盒子会跟随鼠标的位置移动。

示例代码：GitHub仓库