Popup Card / puri | Observable

paper = () => {

const blue_material = new THREE.MeshLambertMaterial({ color: 0xccccff, side: THREE.DoubleSide });

const green_material = new THREE.MeshLambertMaterial({ color: 0xccffcc, side: THREE.DoubleSide });

group.children = [];

// Card

let paper0 = new THREE.PlaneGeometry(cardWidth, cardHeight);

paper0.translate(cardWidth/2, 0, 0);

addToGroup(paper0, blue_material);

let paper1 = new THREE.PlaneGeometry(cardWidth, cardHeight);

paper1.translate(-cardWidth/2, 0, 0);

paper1.rotateY(-foldAngle);

addToGroup(paper1, blue_material);

// Popup part

let pu = popup(0, 0, 0);

let sin = -Math.sin(-foldAngle);

let cos = Math.cos(-foldAngle);

let c2P = new THREE.Vector3(pu.cP.x*cos + pu.cP.z*sin, pu.cP.y, -pu.cP.x*sin + pu.cP.z*cos); //rotate around y-axis

let bPs = intersect3Spheres(pu.aP, pu.distAB, pu.dP, pu.distDB, c2P, pu.distCB);

pu.bP = bPs[0];

//right popup plane; fixed

let geo1 = new THREE.Geometry();

geo1.vertices.push(

new THREE.Vector3(-pu.dP.x, pu.dP.y, pu.dP.z),

new THREE.Vector3(-pu.aP.x, pu.aP.y, pu.aP.z),

new THREE.Vector3(-pu.bP.x, pu.bP.y, pu.bP.z)

);

geo1.faces.push(

new THREE.Face3(0, 1, 2)

);

addToGroup(geo1, green_material);

//left popup plane; movable

let geo2 = new THREE.Geometry();

geo2.vertices.push(

new THREE.Vector3(-pu.bP.x, pu.bP.y, pu.bP.z),

new THREE.Vector3(-pu.aP.x, pu.aP.y, pu.aP.z),

new THREE.Vector3(-c2P.x, c2P.y, c2P.z)

);

geo2.faces.push(

new THREE.Face3(0, 1, 2)

);

addToGroup(geo2, green_material);

}

popup = (x, y, z) => {

const w = cardWidth*2/3;

let aP = new THREE.Vector3(x, y, z); //fixed

let bP = new THREE.Vector3(x, y, z + cardHeight/2);

let cP = new THREE.Vector3(x + w, y + 1, z); //fixed

let dP = new THREE.Vector3(x - w, y + 1, z); //fixed

return {

aP: aP,

bP: bP,

cP: cP,

dP: dP,

distAB: distP(aP, bP), //constant

distDB: distP(dP, bP), //constant

distCB: distP(cP, bP) //constant

};

}

Purpose-built for displays of data