专栏首页每日一篇技术文章SceneKit- 画中画效果实现方案

SceneKit- 画中画效果实现方案

本节学习目标

  • 实现画中画效果

10FD7AC6-5600-4313-8775-0F8A12A06F19.png

如图所示

白的部分是一个plane几何的节点,我们需要将一个SCNScene渲染到这个节点上,来实现画中画效果

Scenekit_17.gif

接下来 我简单的说一下思路

1.首先我们需要一个SCNView 作为渲染的视图, 2.然后创建一个游戏场景SCNScene 给这个SCNView视图 3.给场景中添加一个地板节点和一个plane平面节点 4.我们还创建一个SCNScene 场景,将我们需要放置在plane上的3D 元素添加到这个场景中进去, 5.注意如果直接使用plane.firstMaterial?.diffuse.contents = scene 这样做是渲染不出来画面的,我们需要创建一个SCNView 来持有scene ,然后将SCNView 设置为plane渲染的内容

下面是全部代码

    let scene = SCNScene()
    
    // 创建照相机
    let cameraNode = SCNNode()
    cameraNode.camera = SCNCamera()
    cameraNode.camera?.automaticallyAdjustsZRange = true
    scene.rootNode.addChildNode(cameraNode)
    cameraNode.position = SCNVector3(x: 0, y: 10, z: 100)
    
    // 创建灯光
    let lightNode = SCNNode()
    lightNode.light = SCNLight()
    lightNode.light!.type = .omni
    lightNode.position = SCNVector3(x: 0, y: 10, z: 10)
    scene.rootNode.addChildNode(lightNode)
    
    let ambientLightNode = SCNNode()
    ambientLightNode.light = SCNLight()
    ambientLightNode.light!.type = .ambient
    ambientLightNode.light!.color = UIColor.darkGray
    scene.rootNode.addChildNode(ambientLightNode)
    
    // 设置相关属性
    let scnView = self.view as! SCNView
    scnView.scene = scene
    scnView.allowsCameraControl = true
    scnView.showsStatistics = true
    scnView.backgroundColor = UIColor.black
    
    
    // 创建一面墙
    let plane = SCNPlane(width: 50, height: 50)
    let planeNode = SCNNode(geometry: plane)
    planeNode.position = SCNVector3Make(0, 25, 0)
    scene.rootNode.addChildNode(planeNode)
    scnView.isPlaying = true
    
    
    // 创建一个地板
     let floorNode = SCNNode()
    floorNode.geometry = SCNFloor()
    floorNode.geometry?.firstMaterial?.diffuse.contents = "floor.jpg"
    scene.rootNode.addChildNode(floorNode)
    
    // 创建内画面
    let sceneShip = SCNScene(named: "art.scnassets/ship.scn")!
    let cameraNode1 = SCNNode()
    cameraNode1.camera = SCNCamera()
    sceneShip.rootNode.addChildNode(cameraNode1)
    cameraNode1.position = SCNVector3(x: 0, y: 0, z: 10)
    let ship = sceneShip.rootNode.childNode(withName: "ship", recursively: true)!
    ship.runAction(SCNAction.repeatForever(SCNAction.rotateBy(x: 0, y: 2, z: 0, duration: 1)))
    let view = SCNView(frame: CGRect(x: 0, y: 0, width: 1000, height: 1000))
    view.scene = sceneShip
    view.backgroundColor = UIColor.gray
    
    // 设置内画面视图为plane渲染的纹理
    plane.firstMaterial?.diffuse.contents = view

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VR+全景播放器+头控讲解-01

    近两年随着AR/VR逐渐火热,企业为了给自己的产品中加入新的元素,有可能会将3D元素添加到应用中去,对于IOS 工程师,你有三种选择 OpenGL ES / M...

    酷走天涯
  • ARKit中控制.dae动画的播放

    4.用时间控制动画--CAAnimation 里的 timeOffset 控制开始时间 duration控制播放时间

  • SceneKit - AR换装应用解决方案

    由于今年是AR元年,在苹果推出的ARKit框架之后,各行各业都在马不停蹄的玩起了创意,希望在自己的应用基础上加入AR的元素

    酷走天涯
  • ARKit 进阶:物理世界

    ARKit的渲染能力是由其他框架实现的,除了苹果的SceneKit, Unity3D、UE, 或者其他自定义的OpenGL、Metal渲染引擎都可以与ARKit...

    郭艺帆
  • React实现动画效果

    流畅、有意义的动画对于移动应用用户体验来说是非常必要的。和React Native的其他部分一样,动画API也还在积极开发中,不过我们已经可以联合使用两个互补的...

    xiangzhihong
  • requestAnimationFrame实现动画效果

    html动画一般会采用css3的形式去做,当然也比较建议用css去做动画。但是有时候一些动画只能使用js来完成,常用的js动画方案是使用计时器来完成。编写动画循...

    OECOM
  • 到底有多强?苹果的增强现实框架:ARKit

    本篇文章重在 workShop 上苹果工程师的解惑和我对 ARKit 的理解, 最后会简单介绍一下相关技术。

    郭艺帆
  • 100 行代码写一个手机AR

    Step-1.实现两个协议 1.AVCaptureMetadataOutputObjectsDelegate 2.UINavigationControlle...

    酷走天涯
  • transition-group实现动画效果

    如果要实现动画效果的元素是通过v-for循环渲染出来的,就不能使用transition,应该用transition-group将元素包裹

    章鱼喵

扫码关注云+社区

领取腾讯云代金券