Trong b&agrave;i viết n&agrave;y, Tek4 sẽ t&oacute;m tắt c&aacute;ch tạo một khối Rubik ảo bằng c&aacute;ch sử dụng to&aacute;n tử SceneView từ SwiftUI. Dưới đ&acirc;y l&agrave; c&aacute;ch triển khai h&igrave;nh ảnh ti&ecirc;u đề GIF động.
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/efa6e346-059c-4ecc-96d1-9da67b326945" alt="Khối Rubik động" />
<h1 style="text-align: justify;">Kh&oacute; khăn</h1>
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Vẽ một khối lập phương để đại diện cho một khối Rubik, sau đ&oacute; lắp r&aacute;p th&agrave;nh một bộ sưu tập gồm 54 khối.</li>
<li style="font-weight: 400;" aria-level="1">Triển khai chế độ xem camera cho ph&eacute;p thay đổi chế độ xem để giải khối.</li>
<li style="font-weight: 400;" aria-level="1">Triển khai c&aacute;ch nhấp v&agrave;o một trong c&aacute;c h&igrave;nh khối để thay đổi hướng của rubik.</li>
</ul>
Ba y&ecirc;u cầu nghe c&oacute; vẻ đơn giản nhưng lại l&agrave; một th&aacute;ch thức kh&aacute; lớn.
<h1 style="text-align: justify;">Khối lập phương</h1>
Bon - m&atilde; x&acirc;y dựng khối lập phương v&agrave; t&ocirc; m&agrave;u n&oacute; l&agrave; phần dễ nhất của dự &aacute;n, v&igrave; gần như chỉ cần 4 d&ograve;ng m&atilde;:
<pre class="language-python"><code>func addBox(xAxis: Float, yAxis: Float, zAxis: Float) {
 let cubeNode = SCNNode(geometry: cubeGeometry)
 cubeNode.position = SCNVector3(xAxis, yAxis, zAxis)
 scene?.rootNode.addChildNode(cubeNode)
}</code></pre>
Tất nhi&ecirc;n, n&oacute; đang được đơn giản h&oacute;a; việc kết cấu [m&agrave;u sắc] tốn mất th&ecirc;m mười d&ograve;ng nữa. Về &aacute;nh s&aacute;ng như dự &aacute;n trước, giữ mọi thứ đơn giản v&agrave; th&ecirc;m bốn đ&egrave;n để tr&agrave;n ngập h&igrave;nh ảnh. Th&ecirc;m c&aacute;c node [hộp] th&ocirc;ng qua một số v&ograve;ng lặp lồng nhau.
<h1 style="text-align: justify;">M&aacute;y ảnh</h1>
Để triển khai chế độ m&aacute;y ảnh, cần c&oacute; trợ gi&uacute;p về SO. Trong bản dựng ban đầu, chỉ cần sử dụng t&ugrave;y chọn SceneKit <code>allowCameraControl</code>, n&oacute; hoạt động tốt ngoại trừ kh&ocirc;ng sử dụng được c&ugrave;ng với cử chỉ k&eacute;o để di chuyển c&aacute;c khối ri&ecirc;ng lẻ. V&igrave; vậy, t&ocirc;i đ&atilde; phải cuộn ri&ecirc;ng bằng c&aacute;ch tạo một lớp chia sẻ để ghi lại vị tr&iacute; v&agrave; gi&aacute; trị giao dịch của thao t&aacute;c k&eacute;o được đăng k&yacute; trong SwiftUI. Sau đ&oacute;, tạo một n&uacute;t ảo [cameraOrbit]i đặt ở ch&iacute;nh giữa khối Rubik v&agrave; gắn chiếc m&aacute;y ảnh đ&oacute; v&agrave;o n&oacute;.
B&acirc;y giờ mỗi khi cử chỉ k&eacute;o được gọi, bạn lưu trữ c&aacute;c gi&aacute; trị&nbsp; sử dụng để thay đổi c&aacute;c g&oacute;c <code>eular</code> tr&ecirc;n node <code>cameraOrbit</code> trong lớp chung của m&igrave;nh. Phi&ecirc;n bản m&atilde; c&oacute; thể tr&ocirc;ng như thế n&agrave;y.
<pre class="language-python"><code>func changeCamera() {
 let dx = cameraOrbit.eulerAngles.x
 let dy = cameraOrbit.eulerAngles.y
 let scrollWidthRatio = Float(settings.translation.width / screenWidth) / 16
 let scrollHeightRatio = Float(settings.translation.height / screenHeight) / 16
 cameraOrbit.eulerAngles.y = Float(-2 * Float.pi) * scrollWidthRatio + dy
 cameraOrbit.eulerAngles.x = Float(-Float.pi) * scrollHeightRatio + dx
}
</code></pre>
<h1 style="text-align: justify;">Lựa chọn khối</h1>
Đ&acirc;y l&agrave; phần th&aacute;ch thức nhất cho đến nay v&igrave; phương ph&aacute;p hitTest c&oacute; vẻ kh&ocirc;ng ổn.
Bạn c&oacute; thể triển khai c&ugrave;ng một loại v&ograve;ng lặp trong phương thức ủy quyền của SceneView, với m&atilde; dưới đ&acirc;y.
<pre class="language-python"><code>@MainActor class SceneDelegate: NSObject, SCNSceneRendererDelegate {
 let settings = SharedView.shared
 var spawnTime:TimeInterval = 0
 
 func renderer(_ renderer: SCNSceneRenderer, updateAtTime time: TimeInterval) {
 if time &gt; spawnTime {
 let hits = renderer.hitTest(settings.location, options: [:])
 if hits.count &gt; 0 { settings.lockView = true }
 for hit in hits {
 switch settings.direct {
 case .north:
 runAction(hit: hit, degrees: -90, vector: SCNVector3(1,0,0))
 case .south:
 runAction(hit: hit, degrees: 90, vector: SCNVector3(1,0,0))
 case .east:
 runAction(hit: hit, degrees: 90, vector: SCNVector3(0,1,0))
 case .west:
 runAction(hit: hit, degrees: -90, vector: SCNVector3(0,1,0))
 }
 settings.location = CGPoint.zero
 settings.lockView = false
 }
 spawnTime = time + 1
 
 }
 }
 func runAction(hit:SCNHitTestResult, degrees:Float, vector:SCNVector3) {
 let rotate = SCNAction.rotate(by: CGFloat(GLKMathDegreesToRadians(degrees)), around: vector, duration: 1)
 hit.node.runAction(rotate)
 }
}</code></pre>
N&oacute;i t&oacute;m lại, n&oacute; chuyển thao t&aacute;c k&eacute;o từ xoay bộ sưu tập h&igrave;nh khối sang xoay một h&igrave;nh khối ri&ecirc;ng lẻ. Một lượt thực hiện với một <code>SCNAction</code>. N&oacute; hoạt động hợp l&yacute;, mặc d&ugrave; kh&ocirc;ng ho&agrave;n to&agrave;n đ&uacute;ng.&nbsp;
Bạn c&oacute; thể tải xuống bản sao ho&agrave;n chỉnh của m&atilde; được minh họa từ bitbucket <a href="https://bitbucket.org/wizard1066/scenekits/commits/6082b58451cc307fa128a57a46d8ca8bd3d7c326">tại đ&acirc;y</a>.

Admin

Tạo khối Rubik bằng SceneView và SwiftUI

Cùng tác giả

Admin

Có liên quan