0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

Vision Pro开发实践(结合24黑马idea)

京东云 来源:jf_75140285 作者:jf_75140285 2024-09-04 17:56 次阅读

这是我参与创作者计划的第1篇文章

开篇

之前写过一篇文章,主要介绍visionPro基本信息、操作和基础适配的文章: http://sd.jd.com/article/30242?shareId=152384&isHideShareButton=1

恰逢2024黑客马拉松举行,我结合本次参赛的一个idea,介绍一下visionOS的开发实践,希望能为大家在进行“空间计算”开发的过程当中提供帮助。

idea内容

这次结合的idea是我参加黑马比赛时想到的,主要内容是:在商品评价时增加商品的3D模型,用户可以在虚拟现实环境中查看商品的3D模型,并对模型的特定位置进行评论。例如,用户可以点击运动鞋鞋底部分,留下关于材质和舒适度的评论。直接在商品3D模型的对应位置添加详细评论具像化评价内容,更为直观。

结合这个idea我实践开发了简单的展示Demo,开发过程和用到的知识点比较适合作为visionOS开发入门的教程,所以在本篇文章里向大家作简单的介绍。

实践开发

场景

结合idea,我们要做的工作,首先是采用mixed的展示形式,这样更符合“商品评价”的应用场景。如果对.mixed, .progressive,.full三种展示形式还不了解的同学,可以看我前一篇文章的介绍。

@main
struct MyImmersiveApp: App {
    @State private var currentStyle: ImmersionStyle = .mixed


    var body: some Scene {
        WindowGroup() {
            ContentView()
        }


        // Display a fully immersive space.
        ImmersiveSpace(id: "USDZ Test") {
        }.immersionStyle(selection: $currentStyle)
    }
}

后续的开发主要集中在ContentView中。

添加3D模型

Xcode原生支持的3D模型文件类型是.usdz,支持编程的模型文件类型是.reality,右键点击工程,可以直接向工程里添加模型文件。

wKgZombX08SAVJnJAAKIjvbhxvw902.png

添加后的模型可以预览

wKgaombX08WAUysUAANlBjuLik0143.png

visionOS开发中主要有两种方式向view中添加3D模型:Model3D和RealityView+ModelEntity

Model3D

Model3D(named: "sneaker", bundle: realityKitContentBundle)
    .scaleEffect(0.1)
    .frame(depth: 120)
    .frame(width: 200, height: 200)
    .background(Color.gray.opacity(0.3))
    .cornerRadius(12)

这种方式主要用于简单的加载和展示3D模型,如果仅用于展示,可以采用这种方式。

RealityView+ModelEntity

RealityView { content in
    if let sneaker = try? await ModelEntity(named: "sneaker") {
        content.add(sneaker)
    } Task {
        // Asynchronously perform any additional work to configure
        // the content after the system renders the view.
    }
}
.frame(width: 600, height: 600)
.scaleEffect(1)
.edgesIgnoringSafeArea(.all)
.background(Color.white.opacity(0.1))

利用ModelEntity加载模型,添加到RealityView的content中展示,这样可以对模型做各种操作,比如添加子模型,修改光照,材质等要素。举个例子来讲,我需要在运动鞋模型“sneaker”上面添加一个可以与用户交互的白色圆点模型,用于在用户点击的时候添加/展示对应部分的评价。

// 创建白色圆点
let sphere = MeshResource.generateSphere(radius: 0.8)
// 材质
let material = SimpleMaterial(color: .white, isMetallic: false)
let sphereEntity = ModelEntity(mesh: sphere, materials: [material])
                                    
// Add tap gesture to the model
sphereEntity.generateCollisionShapes(recursive: true)
// 将圆点放置在运动鞋模型的底部
sphereEntity.position = [-10, -0.8, 3] //
// 将圆点添加到模型
sneaker.addChild(sphereEntity)

效果:

wKgZombX08aAK5zQAAzjrbSwaXk905.png

用户交互

模型旋转可以通过gesture实现,使用户可以360度的观察商品,并在不同的位置添加评论:

@State private var sneaker: ModelEntity?

.gesture(
    DragGesture()
    .onChanged { value in
        // 计算旋转角度
        let rotationDelta = Float(value.translation.width / 100.0) // 调整比例因子以控制旋转速度
        print("drag!(rotationDelta)")
        if let modelEntity = sneaker {
            modelEntity.transform.rotation = simd_quatf(angle: currentRotation + rotationDelta, axis: [0, 1, 0])
        }
    }
    .onEnded { value in
        // 更新当前旋转角度
        currentRotation += Float(value.translation.width / 100.0)
    }
)

效果:

wKgaombX08uAAFyBACfp00Kb_NQ769.gif

然后为该模型添加点击效果,点击时展示用户针对商品该部分的详细评论:

.onTapGesture {
    showTextOverlay.toggle()
}

效果:

wKgZombX09SANS-OAFjEtoKamio740.gif

更多扩展

如果有一定的3D模型编程经验,就可以直接把用户交互做在模型上,比如展示商品材质,使用动画等等,我借用苹果官方提供的示例模型进行演示:

wKgaombX09eAK7D6AAjvx7xGJRw272.gif

同时,可以为该商品添加空间视频评价,利用visionPro拍摄的空间视频,可以直接通过AVKit加载,上传和播放,使用户可以通过空间视频第一视角真切地看到商品的真实情况,增强用户信心:

import AVKit

public func makeVideoEntity() -> Entity {
    let entity = Entity()
    // 加载视频
    let asset = AVURLAsset(url: Bundle.main.url(forResource: "evaluate", withExtension: "MOV")!)
    let paltItem = AVPlayerItem(asset: asset)
    // 创建播放器
    let player = AVPlayer()
    entity.components[VideoPlayerComponent.self] = .init(avPlayer: player)
    // 操作视频文件
    entity.scale *= 0.4
    player.replaceCurrentItem(with: paltItem)
    //播放
    player.play()
        
    return entity
}

其他idea

本次参加黑马大赛,我还有两个更进一步的idea:

3D模型动画展示

◦用户可以直接对商品3D模型进行操作,掌握使用方法,了解相关特性

功能描述:通过3D模型动画,用户可以直观地了解产品的特性和使用方法。例如,用户可以看到升降桌的升降详细过程,或者一款咖啡机的操作步骤。

实现方式:在3D模型中嵌入动画脚本,用户可以通过点击或语音指令触发动画播放。动画将展示产品的各个细节和使用场景,帮助用户更好地理解产品。

比如,可以直接通过3D模型演示宇航服的开启和穿戴方法,用户可以360度的学习:

wKgaombX09uAJMpTACDRRBpsLNI610.gif

虚拟商品销售

◦在京东app直接购买虚拟类型商品,并能够直接在京东vision的虚拟空间中使用

功能描述:针对非实体类虚拟商品,拓展新的销售模式和渠道,购买的商品可以在虚拟现实设备中展示和使用。例如花卉商品的3D模型、画作等。

实现方式:通过NFT等认证威廉希尔官方网站 授予购买者产权认证,在京东vision中创建虚拟空间,用户可以查看、摆放和使用虚拟商品。

形象一下:艺术家可以直接在京东上架自己的虚拟艺术品,用户购买后可以在京东Vision的虚拟空间里直接陈列展示。我可以拥有全虚拟世界唯一的一副《蒙娜丽莎》,并把它挂在我家的墙上!

这种营销模式在国外的某些平台上已经有所尝试,我们可以抢占商机,拓宽出这样一条新的赛道。

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 开发
    +关注

    关注

    0

    文章

    370

    浏览量

    40836
  • VisionPro
    +关注

    关注

    6

    文章

    19

    浏览量

    15648
  • idea
    +关注

    关注

    1

    文章

    68

    浏览量

    4272
收藏 人收藏

    评论

    相关推荐

    好了,我们来好好聊聊Vision Pro这东西吧!

    好了,我们来好好聊聊Vision Pro这东西吧! 01 Vision Pro是个啥 这东西就是这次苹果推出的Apple Vision
    发表于 06-07 10:14

    苹果MR Vision Pro将会带动哪些零部件出货?

    苹果身上。 简单来说,Vision Pro本质上其实还是VR设备,不过所有操作界面可以结合头显摄像头捕捉的外界环境,在头显内部显示出来,即一款数字内容无缝融入真实世界的VR显示设备。同时Vi
    发表于 06-08 10:19

    LabVIEW调用康耐视Vision Pro dll

    LabVIEW调用康耐视Vision Pro dll,直接调用CogToolBlock
    发表于 09-08 15:07

    仪器设备研制与开发-科研与实践教学结合,自主开发实践教学设

    摘 要:我们将科研与实践教学相结合,有意识地将科研成果转移到学生的实践教学中去,自主开发了3套学生实践教学使用的设备和系统,对学生素质培养起
    发表于 02-14 16:11 0次下载

    IntelliJ Idea开发环境安装教程

    我们后面会在IntelliJ Idea开发,因此先安装开发环境。
    的头像 发表于 10-17 10:53 1318次阅读

    TinyAnimal:Grove Vision AI上的动物识别实践

    电子发烧友网站提供《TinyAnimal:Grove Vision AI上的动物识别实践.zip》资料免费下载
    发表于 06-13 16:20 0次下载
    TinyAnimal:Grove <b class='flag-5'>Vision</b> AI上的动物识别<b class='flag-5'>实践</b>

    苹果公司或下调MR头显Vision Pro的产量

    苹果公司或下调MR头显Vision Pro的产量 苹果的MR头显Vision Pro一经推出就吸引了一大批的眼球,尽管价钱高到离谱,依然被寄予厚望。 在2023年6月6日的苹果WWDC
    发表于 07-04 11:58 5560次阅读

    苹果apple Vision Pro 设计亮点,震撼!

    近期,苹果重磅发布Apple Vision Pro,标志着用户界面UI设计方式的革新。苹果Apple Vision Pro 是一种VR 和 AR 混合现实
    的头像 发表于 07-04 19:56 3027次阅读
    苹果apple <b class='flag-5'>Vision</b> <b class='flag-5'>Pro</b> 设计亮点,震撼!

    Intellij IDEA 开发工具实例

    本篇博客我们将会以Intellij IDEA 开发工具为例,所以我这里简单谈谈我们所使用的开发工具。 目前大家做Java开发的,无外乎就两种,eclipse或者Intellij
    的头像 发表于 09-25 16:21 879次阅读
    Intellij <b class='flag-5'>IDEA</b> <b class='flag-5'>开发</b>工具实例

    曝苹果砍掉了低配版Vision Pro:销量不被看好

    分析师郭明錤据苹果已经取消了他开发低配版vision pro 2024年vision pro的出货量为40万到60万辆之间,不会有大幅增长。
    的头像 发表于 09-28 14:41 992次阅读

    苹果Vision Pro这块屏,有故事

    体验过 Vision Pro 的媒体们都对这两块屏幕的显示效果表示了肯定。屏幕显示效果可以说是 XR 都带设备的灵魂,而 Vision Pro 的屏幕做到了看不到像素点,几乎就是肉眼看
    的头像 发表于 10-22 10:11 2703次阅读
    苹果<b class='flag-5'>Vision</b> <b class='flag-5'>Pro</b>这块屏,有故事

    苹果Vision Pro夏季将在法国推出?

    据悉,自去年12月份以来,苹果已经针对美国零售员工启动Vision Pro相关培训,并在今年1月中旬开展,此时距离Vision Pro正式开售仅有两周左右。
    的头像 发表于 03-30 11:13 1583次阅读

    Vision Board 创客营】Vision Board上的DAC实践

    1、概述 感谢官方举办【Vision Board 创客营】活动,使得我有机会试用Vision Board开发板,体验嵌入式AI的快乐。在此,再次感谢官方以及导师们的热情帮助。在本次活动中,本人
    的头像 发表于 04-24 21:55 595次阅读
    【<b class='flag-5'>Vision</b> Board 创客营】<b class='flag-5'>Vision</b> Board上的DAC<b class='flag-5'>实践</b>

    苹果搁置Vision Pro 2开发,转向更亲民头显

    在全球科技行业持续发展的背景下,苹果公司的一则最新消息引起了广泛关注。由于第一代Vision Pro头显设备上市后销售情况并不理想,苹果决定暂时搁置第二代Vision Pro
    的头像 发表于 06-20 10:52 638次阅读

    苹果低价版Vision Pro量产延至2027年后

    知名分析师郭明錤近日发表观点,指出低价版Vision Pro的量产时间已被递延至2027年之后,这一决定已酝酿多时。 据悉,Vision Pro是苹果公司推出的一款头戴显示设备,因其出
    的头像 发表于 11-05 10:40 283次阅读