专栏首页每日一篇技术文章sceneKit- SCNText详细讲解

sceneKit- SCNText详细讲解

本节学习目标

1.如何创建2D/3D文件? 2.如何让文字垂直布局 3.如何给文字的六个面分别贴图(其实只有三面) 4.如何计算文字的总的宽度和高度? 5.如何将文字居中放在坐标系

开始吧! go

NO.1 创建文字模型

IMG_0640(20170923-131321).jpg

 let text = SCNText(string: "酷", extrusionDepth: 2)
 let textNode = SCNNode(geometry: text)
textNode.position = SCNVector3Make(0, 0, 0)
scene.rootNode.addChildNode(textNode)
// 创建2D文字的时候只需要将 extrusionDepth 设置为0即可
text.extrusionDepth = 0
// 设置字体的大小
text.font = UIFont.systemFont(ofSize: 1)

提示

1.字体单位为m,我们设置的ofsize=1则,在游戏引擎中代表1m大小的文字 2.可能你想从外部导入其它字体,这里注意一下,不可以的,字体样式不能更改 3.球体在场景中心点,可能你注意到我把文字节点放在场景的中心点,但是它却不在,这个是系统默认的文字布局,左下角的坐标值为(x: 0.0460000001, y: 0.901000023, z: -0.5),这个值是动态改变的,如果我们要将文字放在中心点,必须重新计算,我们后面将如何计算

NO.2将文字添加约束,将其限制在一个容器中

     let text = SCNText(string: "酷走天涯就是帅", extrusionDepth: 1)
    text.font = UIFont.systemFont(ofSize:1)
    // 第一步 开启包裹模式
    text.isWrapped = true
    // 第二步 设置包裹容器的大小
    text.containerFrame = CGRect(x: 0, y: 0, width: 1, height: 6)

IMG_0643(20170923-131206).jpg

   text.containerFrame = CGRect(x: 0, y: 0, width: 3, height: 6)

IMG_0644(20170923-131239)(1).jpg

NO.3 如何给文字的六个面分别贴图(其实只有三面)

文字其实只有三个面,前后中,这个也是纹理数组的渲染顺序

func rendererTextNode(_ node:SCNNode){
   let text = node.geometry as! SCNText
   let m1 = SCNMaterial()
   m1.diffuse.contents = UIColor.red
   let m2 = SCNMaterial()
   m2.diffuse.contents = UIColor.green
   let m3 = SCNMaterial()
   m3.diffuse.contents = UIColor.blue
   text.materials = [m1,m2,m3]
}

IMG_0646(20170923-131937).jpg

IMG_0645(20170923-131926).jpg

NO.4.计算文字的实际的长宽高

    let min = text.boundingBox.min
    let max = text.boundingBox.max
    let width = max.x - min.x
    let height = max.y - min.y
    let length = max.z - min.z

3.97 0.918 1.0 提示 数据和预想的稍有些偏差

NO.5.如何让文字居中,这个是本节最重要的内容

// 将文字放在中心点
func rePlaceTextNodeToCenter(node:SCNNode){
    let text = node.geometry as! SCNText
    let min = text.boundingBox.min
    let max = text.boundingBox.max
    let width = max.x - min.x
    let height = max.y - min.y
    let length = max.z - min.z
    let position = SCNVector3Make(-width/2.0 - min.x, -height/2.0 - min.y, -length/2.0 - min.z)
    node.position = position
}

IMG_0647(20170923-133215).jpg

IMG_0648(20170923-133229).jpg

NO.6 文字的对齐模式 当容器过消失,会隐藏掉文字,这个时候有一个属性可以设置隐藏那一部分

先说重要的一点,设置这个属性必须开启包裹模式才有效

    let text = SCNText(string: "酷走天涯的点点滴滴", extrusionDepth: 1)
    text.font = UIFont.systemFont(ofSize:1)
    text.isWrapped = true
    text.containerFrame = CGRect(x: 0, y: 0, width: 4, height: 2)
    text.alignmentMode = kCAAlignmentJustified

IMG_0649(20170923-135850).jpg

alignmentMode kCAAlignmentNatural默认 kCAAlignmentJustified 伸展齐行 kCAAlignmentLeft向左对齐 kCAAlignmentRight向右对齐 kCAAlignmentCenter居中对齐

text.truncationMode = kCATruncationNone

设置隐藏方式 text.truncationMode = kCATruncationEnd

选项

kCATruncationStart kCATruncationEnd kCATruncationMiddle kCATruncationNone

本节内容分享先到这里了,祝大家玩的愉快

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第一节 介绍

    Step 1 打开Xcode -> 新建一个工程-> 选择SingleView Application -> Next -> 你已经完成工程的创建

    酷走天涯
  • SceneKit_入门03_节点

    我们已经完成了创建工程的任务,有的人就问了,你不是要将SceneKit 游戏开发,怎么创建的是应用工程,往下看,就这么任性!

    酷走天涯
  • 使用CoreML和ARKit进行人脸检测和识别

    现在已经拥有了自己的项目,并且因为不喜欢使用故事板,所以应用程序以编程方式完成,这意味着没有按钮或开关切换,只需要纯粹的代码。

    代码医生工作室
  • SwiftShot:为增强现实创建游戏

    了解Apple如何为WWDC18构建精选演示,并获得使用ARKit,SceneKit和Swift制作自己的多人游戏的技巧。

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

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

    酷走天涯
  • 详细讲解Quartz.NET

         前言:8月份翻译了Quartz.NET的官方课程:开源的作业调度框架 - Quartz.NET, 有的朋友抱怨难用,确实,目前Qiartz.NET的最...

    张善友
  • SceneKit - 打造全景+VR 播放框架

    1.全景模式和VR模式 2.支持滑动切换视角 3.支持捏合放大缩小 4.支持重力感应 5.包含头控功能(上一曲,下一曲,暂停和播放,以及音量键) 6....

    酷走天涯
  • ARKit和CoreLocation

    演示代码 ARKit和CoreLocation:第一部分 ARKit和CoreLocation:第二部分 ARKit和CoreLocation:第三部分

    iOSDevLog
  • CentOS LVM详细讲解

    老七Linux

扫码关注云+社区

领取腾讯云代金券