SCNBox – Map a texture onto five of six sides

Question

I'm trying to create something like canvas in SceneKit using an SCNBox, with a UIImage "wrapped" around from one surface and onto the four others adjacent to it.

The only way I can currently think to do this would be to chop up the UIImage into five separate images and put those onto the sides as materials, but I'm sure there must be an easier way.

Can anyone steer me in the right direction here? The box will have a separate texture/material on the side opposite the "front".

You may already know how it works, but if not here is a good post on cube maps: This post: 29678510. I haven't seen anyone do this without chopping up the image. — Voltan, Nov 22 '20 at 15:15

score 2 · Answer 1 · answered Nov 23 '20 at 16:55

2

The easiest way would probably be to create a custom geometry with matching texture coordinates using +geometryWithSources:elements:

answered Nov 23 '20 at 16:55

mnuages

13,049
2
23
40

score 1 · Accepted Answer · answered Nov 25 '20 at 06:42

You can use contentsTransform property from SCNMaterialProperty, for adjust needed texture coordinates from your image to SCNBox

Some explanations with simplified example:

Lets suppose that you are using cube and you have a texture like this

By dividing it into rectangles, you will have

You want to skip rectangles 1, 3, 7, 9 and cover your cube with this texture. For this just normalize the size of side from your SCNBox between 0 and 1, and use it to set the scale and transform in contentsTransform matrix.

I have a cube with equal sides in my example - so it will be the third part of the whole texture. For taking the 5 rectangle from the texture

let normalizedWidth = 1/3
let normilizedHeight = 1/3

let xOffset = 1 //skip 1,4,7 line
let yOffset = 1 //skip 1,2,3 line
let sideMaterial = SCNMaterial()
sideMaterial.diffuse.contents = textureImage
let scaleMatrix = SCNMatrix4MakeScale(normalizedWidth, normilizedHeight, 0.0)
sideMaterial.diffuse.contentsTransform = SCNMatrix4Translate(scaleMatrix, 
normalizedWidth * xOffset, yOffset * yOffset, 0.0)

You can fill 5 sides with configured materials, and the last on (on the back) just with the color and set them to materials property of your SCNBox. In the result you will have

SCNBox – Map a texture onto five of six sides

2 Answers2