前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >sceneKit- SCNText详细讲解

sceneKit- SCNText详细讲解

作者头像
酷走天涯
发布2019-06-15 11:10:42
1.9K0
发布2019-06-15 11:10:42
举报
文章被收录于专栏:每日一篇技术文章

本节学习目标

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

开始吧! go

NO.1 创建文字模型

IMG_0640(20170923-131321).jpg

代码语言:javascript
复制
 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将文字添加约束,将其限制在一个容器中

代码语言:javascript
复制
     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

代码语言:javascript
复制
   text.containerFrame = CGRect(x: 0, y: 0, width: 3, height: 6)

IMG_0644(20170923-131239)(1).jpg

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

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

代码语言:javascript
复制
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.计算文字的实际的长宽高

代码语言:javascript
复制
    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.如何让文字居中,这个是本节最重要的内容

代码语言:javascript
复制
// 将文字放在中心点
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 文字的对齐模式 当容器过消失,会隐藏掉文字,这个时候有一个属性可以设置隐藏那一部分

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

代码语言:javascript
复制
    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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.09.19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档