专栏首页每日一篇技术文章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 条评论
登录 后参与评论

相关文章

  • weex-07-通用布局

    weex 常用的两种布局 分别为 flex弹性布局 和 绝对定位布局 一般情况下都是这两种配合使用!

    酷走天涯
  • SceneKit-绘制直线

    // private func lineBetweenNodeA(beginPosition: SCNVector3, endPosition: ...

    酷走天涯
  • Foundation-Array

    酷走天涯
  • 仿腾讯课堂固定滚动列表ReactNative组件

    前言 由于业务需要做成类似腾讯课堂课程详情滚动的效果,考虑到后面有可能有新的呈现方式,RN提供的组件没有这种滚动控件,不如自己封装,其实去年已经写了一篇但是写的...

    用户1148881
  • 我的信息搜集之道

    前段时间,看了一本书名为《Kali Linux 渗透测试的艺术》,我发现书中第四章信息搜集那部分有些内容不能适应有些内容不能适用国内,这勾起了我想总结一下国内信...

    FB客服
  • 机器学习:谈谈决策树

    ? 前面谈了逻辑回归的基本原理及梯度下降推导过程,编码实现了逻辑回归的梯度下降算法,这是分类算法。今天,我们继续开启分类算法之旅,它是一种高效简介的分类算法,...

    double
  • POSIX多线程互斥量及其应用

    pthread_mutex_t _mutex = PTHREAD_MUTEX_INITIALIZER; ①

    用户5908113
  • 疫情让SaaS企业在夹缝中谋划未来

    疫情之下,仿佛一夜之间,所有的企业都开始云办公了。数字化能力强的企业在高效运转,没有“上云”的则怅然若失,在艰难中寻求转型。在这中间,能够提供在线协同的SaaS...

    大商创
  • Python Web学习笔记之socket套接字

    套接字是为特定网络协议(例如TCP/IP,ICMP/IP,UDP/IP等)套件对上的网络应用程序提供者提供当前可移植标准的对象。它们允许程序接受并进行连接,如发...

    Jetpropelledsnake21
  • Golang语言社区--结构体数据排序

    大家好,我是Golang社区主编彬哥,这篇是给大家讲解关于复杂数据结构排序的。 结构体,数据排序 package main import ( ...

    李海彬

扫码关注云+社区

领取腾讯云代金券