近来业务不忙, 研究研究iOS的3D开发, 看起来很有意思.分享下.




以上是制作的一个房间魔性的渲染图
下面总结一下制作上面的模型需要做哪些工作:
1、创建项目:
创建项目采用的是game模式

2、创建SCNView(场景)
SCNView的创建和常规的UIView创建是一样的。因为他继承自UIView

scnView= SCNView(frame: CGRect(x: 0, y: 0, width: view.bounds.size.width, height: view.bounds.size.height))
view.addSubview(scnView);
scnView.backgroundColor = UIColor.black
3、设置相机的信息(3D内容是以相机视角进行渲染的)

4、创建并引入SCNScene
SCNScene是一个Xcode自带的3D场景文件

引入场景文件

5、创建节点
创建节点采用的是贝塞尔曲线进行渲染的, 贝塞尔曲线可以创建多种自定义图形
// 绘制一个曲线
letpath =UIBezierPath()
path.lineWidth=3
path.move(to:CGPoint(x:0,y:1))
path.addLine(to:CGPoint(x:0,y: -1))
path.addLine(to:CGPoint(x:8,y: -1))
path.addLine(to:CGPoint(x:8,y:1))
path.lineCapStyle= .round
UIColor.red.setStroke()
path.close()
// 绘制
path.stroke()
创建节点
// 创建 extrusionDept 线的宽度
letshape =SCNShape(path: path,extrusionDepth:0.3);
letboxNodeshape =SCNNode()
boxNodeshape.geometry= shape
boxNodeshape.position=SCNVector3Make(0,0,0)// xzy
其中position代表节点的初始位置
6、将节点内容添加到场景中

7、其他的一些设置

8、动画相关
我这里只运用了一个动画,是用SCNAction进行触发的

9、一些自带的模型



10、给节点添加贴纸
let shape = SCNShape(path: path, extrusionDepth: 0.3);
shape.firstMaterial?.diffuse.contents = "cat.png";
letboxNodeshape =SCNNode()
boxNodeshape.geometry= shape
网友评论