CODEWITHSUNDEEP
three.jstextures
Issam Zoli
Issam Zoli

Reputation: 2774

Three.js - Double sided plane one side reversed

I used the method of pushing faces to geometry to achieve double sided plane.

for (var i=0, len=geometry.faces.length; i<len; i++) {
    var face = geometry.faces[i].clone();
    face.materialIndex = 1;
    geometry.faces.push(face);
    geometry.faceVertexUvs[0].push(geometry.faceVertexUvs[0][i].slice(0));
}

but one side is reversed here is a fiddle http://jsfiddle.net/bN8ZH/

Upvotes: 1

Views: 2614

Answers (1)

WestLangley
WestLangley

Reputation: 104783

If you want to put two planes back-to-back, the best way is like so:

var geometry = new THREE.PlaneGeometry(80, 116, 20, 20);

var geometry2 = geometry.clone();
geometry2.applyMatrix( new THREE.Matrix4().makeRotationY( Math.PI ) );

THREE.GeometryUtils.merge( geometry, geometry2, 1 );

When you do so, make sure the material for each plane has material.side = THREE.FrontSide.

Updated fiddle: http://jsfiddle.net/bN8ZH/1/

three.js r.63

Upvotes: 3

Related Questions