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

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

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

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

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)]
    }
}

这里增加了一个colors常量,用于设置一个包含多种颜色数组,以便进行随机颜色修改。颜色是通过SimpleMaterialcolor参数进行随机更换(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)
                }
        )
    }
}

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

这里需要说明一个本例中生成的立方体在完成拖放,隐藏后再次展开后会生成一个新的供拖放和修改颜色的模型,这时老的模型就无法再进行拖放了。如果读者只希望操作同一个模型,可以对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
...

对应的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()
                }
            }
        }
    }
}

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

示例代码:GitHub仓库

其它相关内容请见虚拟现实(VR)/增强现实(AR)&visionOS开发学习笔记

相关文章
|
4月前
若依框架---如何实现翻页保留选择?如何调整首页左侧菜单栏宽度?
若依框架---如何实现翻页保留选择?如何调整首页左侧菜单栏宽度?
142 3
|
4月前
|
移动开发 小程序 前端开发
关于uniapp回到顶部-支持小程序与H5 + 图片压缩
关于uniapp回到顶部-支持小程序与H5 + 图片压缩
|
10月前
|
前端开发 定位技术
Echarts地图高级开发:下钻交互菜单操作按钮(1)
Echarts地图高级开发:下钻交互菜单操作按钮(1)
70 0
|
5月前
|
vr&ar
visionOS空间计算实战开发教程Day 11 标题动画
本文我们要在visionOS内实现一个标题输出的动画效果。主要讲ViewModifier协议,修饰符(modifier)应用于视图或另一个视图修饰符,生成原值的另一个版本。在希望创建一个可应用于不同视图的修饰符时可实现ViewModifier协议。
17 0
|
5月前
|
vr&ar
visionOS空间计算实战开发教程Day 10 照片墙
本例选择了《天空之城》的25张照片,组成5x5的照片墙)。首先我们在setupContentEntity方法中构建了一个纹理数组,将这25张照片添加到数组images中。其中封装了setup方法,借助于visionOS对沉浸式空间的支持,我们创建了三个平面,组成具有立体感的照片墙。
53 1
|
5月前
|
vr&ar 图形学
visionOS空间计算实战开发教程Day 2 使用RealityKit显示3D素材
我们在Day1中学习了如何创建一个visionOS应用,但在第一个Demo应用中我们的界面内容还是2D的,看起来和其它应用并没有什么区别。接下来我们先学习如何展示3D素材,苹果为方便开发人员,推出了RealityKit,接下来看如何使用。
66 0
|
5月前
|
小程序 前端开发 JavaScript
微信小程序(十五)小程序回到顶部
<image wx:if="{{visual}}" src="/images/timg.png" class="go_top" bindtap="scrollToTop" />
37 0
|
6月前
《QT从基础到进阶·九》菜单,菜单栏,工具栏创建
《QT从基础到进阶·九》菜单,菜单栏,工具栏创建
29 0
|
8月前
|
前端开发 数据库 容器
ivx页面(4)下拉菜单的页面
ivx页面(4)下拉菜单的页面
48 0
移动端可拖拽效果demo效果示例(整理)
移动端可拖拽效果demo效果示例(整理)