這是我參與創(chuàng)作者計(jì)劃的第1篇文章

開(kāi)篇

之前寫過(guò)一篇文章，主要介紹visionPro基本信息、操作和基礎(chǔ)適配的文章： http://sd.jd.com/article/30242?shareId=152384&isHideShareButton=1

恰逢2024黑客馬拉松舉行，我結(jié)合本次參賽的一個(gè)idea，介紹一下visionOS的開(kāi)發(fā)實(shí)踐，希望能為大家在進(jìn)行“空間計(jì)算”開(kāi)發(fā)的過(guò)程當(dāng)中提供幫助。

idea內(nèi)容

這次結(jié)合的idea是我參加黑馬比賽時(shí)想到的，主要內(nèi)容是：在商品評(píng)價(jià)時(shí)增加商品的3D模型，用戶可以在虛擬現(xiàn)實(shí)環(huán)境中查看商品的3D模型，并對(duì)模型的特定位置進(jìn)行評(píng)論。例如，用戶可以點(diǎn)擊運(yùn)動(dòng)鞋鞋底部分，留下關(guān)于材質(zhì)和舒適度的評(píng)論。直接在商品3D模型的對(duì)應(yīng)位置添加詳細(xì)評(píng)論具像化評(píng)價(jià)內(nèi)容，更為直觀。

結(jié)合這個(gè)idea我實(shí)踐開(kāi)發(fā)了簡(jiǎn)單的展示Demo，開(kāi)發(fā)過(guò)程和用到的知識(shí)點(diǎn)比較適合作為visionOS開(kāi)發(fā)入門的教程，所以在本篇文章里向大家作簡(jiǎn)單的介紹。

實(shí)踐開(kāi)發(fā)

場(chǎng)景

結(jié)合idea，我們要做的工作，首先是采用mixed的展示形式，這樣更符合“商品評(píng)價(jià)”的應(yīng)用場(chǎng)景。如果對(duì).mixed， .progressive，.full三種展示形式還不了解的同學(xué)，可以看我前一篇文章的介紹。

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

后續(xù)的開(kāi)發(fā)主要集中在ContentView中。

添加3D模型

Xcode原生支持的3D模型文件類型是.usdz，支持編程的模型文件類型是.reality，右鍵點(diǎn)擊工程，可以直接向工程里添加模型文件。

添加后的模型可以預(yù)覽

visionOS開(kāi)發(fā)中主要有兩種方式向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)

這種方式主要用于簡(jiǎn)單的加載和展示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中展示，這樣可以對(duì)模型做各種操作，比如添加子模型，修改光照，材質(zhì)等要素。舉個(gè)例子來(lái)講，我需要在運(yùn)動(dòng)鞋模型“sneaker”上面添加一個(gè)可以與用戶交互的白色圓點(diǎn)模型，用于在用戶點(diǎn)擊的時(shí)候添加/展示對(duì)應(yīng)部分的評(píng)價(jià)。

// 創(chuàng)建白色圓點(diǎn)
let sphere = MeshResource.generateSphere(radius: 0.8)
// 材質(zhì)
let material = SimpleMaterial(color: .white, isMetallic: false)
let sphereEntity = ModelEntity(mesh: sphere, materials: [material])
                                    
// Add tap gesture to the model
sphereEntity.generateCollisionShapes(recursive: true)
// 將圓點(diǎn)放置在運(yùn)動(dòng)鞋模型的底部
sphereEntity.position = [-10, -0.8, 3] //
// 將圓點(diǎn)添加到模型
sneaker.addChild(sphereEntity)

效果：

用戶交互

模型旋轉(zhuǎn)可以通過(guò)gesture實(shí)現(xiàn)，使用戶可以360度的觀察商品，并在不同的位置添加評(píng)論：

@State private var sneaker: ModelEntity?

.gesture(
    DragGesture()
    .onChanged { value in
        // 計(jì)算旋轉(zhuǎn)角度
        let rotationDelta = Float(value.translation.width / 100.0) // 調(diào)整比例因子以控制旋轉(zhuǎn)速度
        print("drag!(rotationDelta)")
        if let modelEntity = sneaker {
            modelEntity.transform.rotation = simd_quatf(angle: currentRotation + rotationDelta, axis: [0, 1, 0])
        }
    }
    .onEnded { value in
        // 更新當(dāng)前旋轉(zhuǎn)角度
        currentRotation += Float(value.translation.width / 100.0)
    }
)

效果：

然后為該模型添加點(diǎn)擊效果，點(diǎn)擊時(shí)展示用戶針對(duì)商品該部分的詳細(xì)評(píng)論：

.onTapGesture {
    showTextOverlay.toggle()
}

效果：

更多擴(kuò)展

如果有一定的3D模型編程經(jīng)驗(yàn)，就可以直接把用戶交互做在模型上，比如展示商品材質(zhì)，使用動(dòng)畫等等，我借用蘋果官方提供的示例模型進(jìn)行演示：

同時(shí)，可以為該商品添加空間視頻評(píng)價(jià)，利用visionPro拍攝的空間視頻，可以直接通過(guò)AVKit加載，上傳和播放，使用戶可以通過(guò)空間視頻第一視角真切地看到商品的真實(shí)情況，增強(qiáng)用戶信心：

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)
    // 創(chuàng)建播放器
    let player = AVPlayer()
    entity.components[VideoPlayerComponent.self] = .init(avPlayer: player)
    // 操作視頻文件
    entity.scale *= 0.4
    player.replaceCurrentItem(with: paltItem)
    //播放
    player.play()
        
    return entity
}

其他idea

本次參加黑馬大賽，我還有兩個(gè)更進(jìn)一步的idea：

3D模型動(dòng)畫展示

?用戶可以直接對(duì)商品3D模型進(jìn)行操作，掌握使用方法，了解相關(guān)特性

?功能描述：通過(guò)3D模型動(dòng)畫，用戶可以直觀地了解產(chǎn)品的特性和使用方法。例如，用戶可以看到升降桌的升降詳細(xì)過(guò)程，或者一款咖啡機(jī)的操作步驟。

?實(shí)現(xiàn)方式：在3D模型中嵌入動(dòng)畫腳本，用戶可以通過(guò)點(diǎn)擊或語(yǔ)音指令觸發(fā)動(dòng)畫播放。動(dòng)畫將展示產(chǎn)品的各個(gè)細(xì)節(jié)和使用場(chǎng)景，幫助用戶更好地理解產(chǎn)品。

比如，可以直接通過(guò)3D模型演示宇航服的開(kāi)啟和穿戴方法，用戶可以360度的學(xué)習(xí)：

虛擬商品銷售

?在京東app直接購(gòu)買虛擬類型商品，并能夠直接在京東vision的虛擬空間中使用

?功能描述：針對(duì)非實(shí)體類虛擬商品，拓展新的銷售模式和渠道，購(gòu)買的商品可以在虛擬現(xiàn)實(shí)設(shè)備中展示和使用。例如花卉商品的3D模型、畫作等。

?實(shí)現(xiàn)方式：通過(guò)NFT等認(rèn)證技術(shù)授予購(gòu)買者產(chǎn)權(quán)認(rèn)證，在京東vision中創(chuàng)建虛擬空間，用戶可以查看、擺放和使用虛擬商品。

形象一下：藝術(shù)家可以直接在京東上架自己的虛擬藝術(shù)品，用戶購(gòu)買后可以在京東Vision的虛擬空間里直接陳列展示。我可以擁有全虛擬世界唯一的一副《蒙娜麗莎》，并把它掛在我家的墻上！

這種營(yíng)銷模式在國(guó)外的某些平臺(tái)上已經(jīng)有所嘗試，我們可以搶占商機(jī)，拓寬出這樣一條新的賽道。

?審核編輯 黃宇