CODEWITHSUNDEEP
scenekit
14wml
14wml

Reputation: 4166

How to color a scnplane with 2 different materials?

I have a SCNPlane that I created in the SceneKit editor and I want 1 side of the plane to have a certain image and the other side of the plane to have another image. How do I do that in the Scenekit editor

So far what I've tried to do is adding 2 materials to the plane. I tried adding 2 materials and unchecking double-sided but that doesn't work.

Any help would be appreciated!

Upvotes: 2

Views: 1366

Answers (2)

Fattie
Fattie

Reputation: 12648

Very easy to do in 2022.

It's very easy and common to do this, you just add the rear as a child.

To be clear the node (and the rear you add) should both use the single-sided shader.

Obviously, the rear you add points in the other direction!

Do note that they are indeed in "exactly the same place". Sometimes folks new to 3D mesh think the two meshes would need to be "a little apart", not so.

public var rear = SCNNode()
private var theRearPlane = SCNPlane()
    
private func addRear() {
    addChildNode(rear)
    rear.eulerAngles = SCNVector3(0, CGFloat.pi, 0)
    theRearPlane. //... set width, height etc
    theRearPlane.firstMaterial?.isDoubleSided = false
    rear.geometry = theRearPlane
    rear.geometry?.firstMaterial!.diffuse.contents = //.. your rear image/etc
}

So ...

    ///Double-sided sprite
class SCNTwoSidedNode: SCNNode {
        
    public var rear = SCNNode()

    private var thePlane = SCNPlane()
    override init() {
        super.init()
        thePlane. //.. set size, etc
        thePlane.firstMaterial?.isDoubleSided = false
        thePlane.firstMaterial?.transparencyMode = .aOne
        geometry = thePlane
        addRear()
    }

Consuming code can just refer to .rear , for example,

playerNode. //... the drawing of the Druid
playerNode.rear. //... Druid rules and abilities text
enemyNode. //... the drawing of the Mage
enemyNode.rear. //... Mage rules and abilities text

If you want to do this in the visual editor - very easy

It's trivial. Simply add the rear as a child. Rotate the child 180 degrees on Y.

It's that easy.

Make them both single-sided and put anything you want on the front and rear.

Simply move the main one (the front) normally and everything works.

Upvotes: 1

rickster
rickster

Reputation: 126137

Per the SCNPlane docs:

The surface is one-sided. Its surface normal vectors point in the positive z-axis direction of its local coordinate space, so it is only visible from that direction by default. To render both sides of a plane, ether set the isDoubleSided property of its material to true or create two plane geometries and orient them back to back.

That implies a plane has only one material — isDoubleSided is a property of a material, letting that one material render on both sides of a surface, but there's nothing you can do to one material to turn it into two.

If you want a flat surface with two materials, you can arrange two planes back to back as the doc suggests. Make them both children of a containing node and you can then use that to move them together. Or you could perhaps make an SCNBox that's very thin in one dimension.

Upvotes: 2

Related Questions