wow
This commit is contained in:
parent
794dce869c
commit
87faa363b9
5 changed files with 434 additions and 246 deletions
|
|
@ -45,31 +45,24 @@ function createBadgeTexture(pass) {
|
|||
ctx.fillStyle = "#050505";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
const sheen = ctx.createLinearGradient(0, 0, 912, 970);
|
||||
const sheen = ctx.createLinearGradient(0, 0, 912, 1288);
|
||||
sheen.addColorStop(0, "#ffffff09");
|
||||
sheen.addColorStop(0.45, "transparent");
|
||||
sheen.addColorStop(1, "#ffffff05");
|
||||
ctx.fillStyle = sheen;
|
||||
ctx.fillRect(0, 0, 912, 970);
|
||||
ctx.fillRect(0, 0, 912, 1288);
|
||||
|
||||
ctx.strokeStyle = "#ffffff24";
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.strokeRect(30, 30, 852, 925);
|
||||
ctx.strokeRect(30, 30, 852, 1228);
|
||||
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(58, 88);
|
||||
ctx.lineTo(79, 52);
|
||||
ctx.lineTo(100, 88);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
ctx.font = "700 29px Arial, sans-serif";
|
||||
ctx.fillText("PASS", 122, 79);
|
||||
ctx.fillText("PASS", 58, 79);
|
||||
ctx.fillStyle = "#8f8f8f";
|
||||
ctx.fillText("PORT", 204, 79);
|
||||
ctx.fillText("PORT", 140, 79);
|
||||
ctx.font = "500 13px monospace";
|
||||
ctx.fillText("DIGITAL ACCESS SYSTEM", 122, 105);
|
||||
ctx.fillText("DIGITAL ACCESS SYSTEM", 58, 105);
|
||||
|
||||
ctx.textAlign = "right";
|
||||
ctx.fillStyle = accent;
|
||||
|
|
@ -91,12 +84,12 @@ function createBadgeTexture(pass) {
|
|||
ctx.strokeStyle = "#ffffff";
|
||||
ctx.lineWidth = 8;
|
||||
ctx.font = "800 350px Arial, sans-serif";
|
||||
ctx.strokeText("P", 590, 465);
|
||||
ctx.strokeText("P", 590, 520);
|
||||
for (let row = 0; row < 9; row += 1) {
|
||||
for (let column = 0; column < 9; column += 1) {
|
||||
const radius = Math.max(1.5, 5 - (row + column) * 0.18);
|
||||
ctx.beginPath();
|
||||
ctx.arc(620 + column * 25, 220 + row * 25, radius, 0, Math.PI * 2);
|
||||
ctx.arc(620 + column * 25, 250 + row * 25, radius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.fill();
|
||||
}
|
||||
|
|
@ -105,91 +98,205 @@ function createBadgeTexture(pass) {
|
|||
|
||||
ctx.fillStyle = "#929292";
|
||||
ctx.font = "500 14px monospace";
|
||||
ctx.fillText("TEMPORARY / GUEST", 58, 208);
|
||||
ctx.fillText("TEMPORARY / GUEST", 58, 220);
|
||||
ctx.textAlign = "right";
|
||||
ctx.fillText(`NO. ${pass.credentialId}`, 854, 208);
|
||||
ctx.fillText(`NO. ${pass.credentialId}`, 854, 220);
|
||||
ctx.textAlign = "left";
|
||||
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.font = "700 86px Arial, sans-serif";
|
||||
ctx.fillText("ACCESS", 52, 322);
|
||||
ctx.fillText("ACCESS", 52, 350);
|
||||
ctx.font = "300 86px Arial, sans-serif";
|
||||
ctx.fillText("PASS", 52, 402);
|
||||
ctx.fillText("PASS", 52, 430);
|
||||
|
||||
ctx.fillStyle = "#858585";
|
||||
ctx.font = "500 14px monospace";
|
||||
ctx.fillText("PASS HOLDER", 58, 493);
|
||||
ctx.fillText("PASS HOLDER", 58, 545);
|
||||
ctx.fillStyle = "#ffffff";
|
||||
const holderSize = fitText(ctx, pass.holder, 796, 66);
|
||||
ctx.font = `600 ${holderSize}px Arial, sans-serif`;
|
||||
ctx.fillText(pass.holder, 55, 560);
|
||||
ctx.fillText(pass.holder, 55, 625);
|
||||
|
||||
ctx.strokeStyle = "#ffffff2d";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(58, 610);
|
||||
ctx.lineTo(854, 610);
|
||||
ctx.moveTo(58, 685);
|
||||
ctx.lineTo(854, 685);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.fillStyle = "#858585";
|
||||
ctx.font = "500 14px monospace";
|
||||
ctx.fillText("AUTHORIZED LOCATION", 58, 657);
|
||||
ctx.fillText("VALID FROM", 520, 657);
|
||||
ctx.fillText("AUTHORIZED LOCATION", 58, 738);
|
||||
ctx.fillText("VALID FROM", 520, 738);
|
||||
ctx.fillStyle = "#ffffff";
|
||||
const locationSize = fitText(ctx, pass.location, 400, 32);
|
||||
ctx.font = `500 ${locationSize}px Arial, sans-serif`;
|
||||
ctx.fillText(pass.location, 58, 699);
|
||||
ctx.fillText(pass.location, 58, 782);
|
||||
ctx.font = "500 20px monospace";
|
||||
ctx.fillText(pass.validFrom, 520, 697);
|
||||
ctx.fillText(pass.validFrom, 520, 780);
|
||||
|
||||
ctx.fillStyle = "#858585";
|
||||
ctx.font = "500 14px monospace";
|
||||
ctx.fillText("VALID UNTIL", 520, 757);
|
||||
ctx.fillText("VALID UNTIL", 520, 842);
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.font = "500 20px monospace";
|
||||
ctx.fillText(pass.validUntil, 520, 797);
|
||||
ctx.fillText(pass.validUntil, 520, 884);
|
||||
|
||||
ctx.strokeStyle = "#ffffff2d";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(58, 840);
|
||||
ctx.lineTo(854, 840);
|
||||
ctx.moveTo(58, 960);
|
||||
ctx.lineTo(854, 960);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.fillStyle = accent;
|
||||
ctx.beginPath();
|
||||
ctx.arc(70, 893, 13, 0, Math.PI * 2);
|
||||
ctx.arc(70, 1024, 13, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = "#050505";
|
||||
ctx.font = "700 14px Arial, sans-serif";
|
||||
ctx.fillText("✓", 65, 898);
|
||||
ctx.fillText("✓", 65, 1029);
|
||||
ctx.fillStyle = "#9a9a9a";
|
||||
ctx.font = "500 13px monospace";
|
||||
ctx.fillText("DIGITALLY SIGNED ACCESS CREDENTIAL", 100, 890);
|
||||
ctx.fillText("ISSUER / PASSPORT", 100, 915);
|
||||
ctx.fillText("DIGITALLY SIGNED ACCESS CREDENTIAL", 100, 1020);
|
||||
ctx.fillText("ISSUER / PASSPORT", 100, 1045);
|
||||
ctx.textAlign = "right";
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.fillRect(803, 876, 51, 51);
|
||||
ctx.fillRect(803, 1003, 51, 51);
|
||||
ctx.fillStyle = "#050505";
|
||||
ctx.font = "700 26px Arial, sans-serif";
|
||||
ctx.fillText("P", 838, 910);
|
||||
ctx.fillText("P", 838, 1037);
|
||||
ctx.textAlign = "left";
|
||||
|
||||
ctx.fillStyle = "#616161";
|
||||
ctx.font = "500 13px monospace";
|
||||
ctx.fillText("TAP CARD TO VIEW VERIFICATION DETAILS", 58, 1205);
|
||||
|
||||
const texture = new THREE.CanvasTexture(canvas);
|
||||
texture.colorSpace = THREE.SRGBColorSpace;
|
||||
texture.anisotropy = 16;
|
||||
texture.flipY = false;
|
||||
return texture;
|
||||
}
|
||||
|
||||
function Band({ pass, maxSpeed = 50, minSpeed = 10 }) {
|
||||
function createBackTexture(pass) {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = 912;
|
||||
canvas.height = 1288;
|
||||
const ctx = canvas.getContext("2d");
|
||||
const accent = pass.status === "VALID" ? "#b9f8d3" : pass.status === "EXPIRED" ? "#df9298" : "#e8c986";
|
||||
|
||||
ctx.fillStyle = "#050505";
|
||||
ctx.fillRect(0, 0, 912, 1288);
|
||||
ctx.strokeStyle = "#ffffff24";
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.strokeRect(30, 30, 852, 1228);
|
||||
|
||||
ctx.fillStyle = "#fff";
|
||||
ctx.font = "700 27px Arial, sans-serif";
|
||||
ctx.fillText("PASS PORT", 58, 82);
|
||||
ctx.textAlign = "right";
|
||||
ctx.fillStyle = "#777";
|
||||
ctx.font = "500 14px monospace";
|
||||
ctx.fillText("CREDENTIAL / REVERSE", 854, 82);
|
||||
ctx.textAlign = "left";
|
||||
|
||||
ctx.save();
|
||||
ctx.globalAlpha = 0.09;
|
||||
ctx.strokeStyle = "#fff";
|
||||
ctx.lineWidth = 8;
|
||||
ctx.font = "800 190px Arial, sans-serif";
|
||||
ctx.strokeText("SIGNED", 42, 315);
|
||||
ctx.restore();
|
||||
|
||||
ctx.fillStyle = "#8c8c8c";
|
||||
ctx.font = "500 14px monospace";
|
||||
ctx.fillText("VERIFICATION STATUS", 58, 385);
|
||||
ctx.fillStyle = accent;
|
||||
ctx.font = "600 54px Arial, sans-serif";
|
||||
ctx.fillText(pass.status, 55, 453);
|
||||
|
||||
ctx.strokeStyle = "#ffffff2d";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(58, 505);
|
||||
ctx.lineTo(854, 505);
|
||||
ctx.stroke();
|
||||
|
||||
const rows = [
|
||||
["ISSUER", "PASSPORT"],
|
||||
["SIGNATURE", "HS256"],
|
||||
["CREDENTIAL NO.", pass.credentialId],
|
||||
["PASS HOLDER", pass.holder],
|
||||
["ACCESS POINT", pass.location],
|
||||
];
|
||||
rows.forEach(([label, value], index) => {
|
||||
const y = 570 + index * 92;
|
||||
ctx.fillStyle = "#777";
|
||||
ctx.font = "500 14px monospace";
|
||||
ctx.fillText(label, 58, y);
|
||||
ctx.textAlign = "right";
|
||||
ctx.fillStyle = "#fff";
|
||||
ctx.font = "500 20px Arial, sans-serif";
|
||||
ctx.fillText(value, 854, y);
|
||||
ctx.textAlign = "left";
|
||||
ctx.strokeStyle = "#ffffff17";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(58, y + 34);
|
||||
ctx.lineTo(854, y + 34);
|
||||
ctx.stroke();
|
||||
});
|
||||
|
||||
ctx.fillStyle = "#777";
|
||||
ctx.font = "500 14px monospace";
|
||||
ctx.fillText("USAGE", 58, 1060);
|
||||
ctx.fillStyle = "#d5d5d5";
|
||||
ctx.font = "500 19px Arial, sans-serif";
|
||||
ctx.fillText("Present this credential at the authorized access point.", 58, 1100);
|
||||
ctx.fillText("Do not share the credential URL with another person.", 58, 1135);
|
||||
|
||||
ctx.fillStyle = "#666";
|
||||
ctx.font = "500 13px monospace";
|
||||
ctx.fillText("TAP CARD TO RETURN TO FRONT", 58, 1210);
|
||||
|
||||
const texture = new THREE.CanvasTexture(canvas);
|
||||
texture.colorSpace = THREE.SRGBColorSpace;
|
||||
texture.anisotropy = 16;
|
||||
return texture;
|
||||
}
|
||||
|
||||
function createBandTexture() {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = 1024;
|
||||
canvas.height = 160;
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = "#090909";
|
||||
ctx.fillRect(0, 0, 1024, 160);
|
||||
ctx.strokeStyle = "#333";
|
||||
ctx.strokeRect(0, 4, 1024, 152);
|
||||
ctx.fillStyle = "#eee";
|
||||
ctx.font = "600 35px Arial, sans-serif";
|
||||
ctx.textBaseline = "middle";
|
||||
for (let x = 30; x < 1024; x += 330) {
|
||||
ctx.fillText("PASS PORT", x, 80);
|
||||
ctx.fillStyle = "#555";
|
||||
ctx.fillText(" / ACCESS", x + 190, 80);
|
||||
ctx.fillStyle = "#eee";
|
||||
}
|
||||
const texture = new THREE.CanvasTexture(canvas);
|
||||
texture.colorSpace = THREE.SRGBColorSpace;
|
||||
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
|
||||
return texture;
|
||||
}
|
||||
|
||||
function Band({ pass, flipped, onFlip, maxSpeed = 50, minSpeed = 10 }) {
|
||||
const band = useRef();
|
||||
const fixed = useRef();
|
||||
const joint1 = useRef();
|
||||
const joint2 = useRef();
|
||||
const joint3 = useRef();
|
||||
const card = useRef();
|
||||
const cardVisual = useRef();
|
||||
const { nodes, materials } = useGLTF(MODEL_URL);
|
||||
const bandTexture = useTexture(BAND_URL);
|
||||
const bandTexture = useMemo(() => createBandTexture(), []);
|
||||
const badgeTexture = useMemo(() => createBadgeTexture(pass), [pass]);
|
||||
const backTexture = useMemo(() => createBackTexture(pass), [pass]);
|
||||
const { width, height } = useThree((state) => state.size);
|
||||
const curve = useMemo(
|
||||
() => new THREE.CatmullRomCurve3([
|
||||
|
|
@ -224,9 +331,22 @@ function Band({ pass, maxSpeed = 50, minSpeed = 10 }) {
|
|||
return () => { document.body.style.cursor = "auto"; };
|
||||
}, [hovered, dragged]);
|
||||
|
||||
useEffect(() => () => badgeTexture.dispose(), [badgeTexture]);
|
||||
useEffect(() => () => {
|
||||
badgeTexture.dispose();
|
||||
backTexture.dispose();
|
||||
bandTexture.dispose();
|
||||
}, [badgeTexture, backTexture, bandTexture]);
|
||||
|
||||
useFrame((state, delta) => {
|
||||
if (cardVisual.current) {
|
||||
cardVisual.current.rotation.y = THREE.MathUtils.damp(
|
||||
cardVisual.current.rotation.y,
|
||||
flipped ? Math.PI : 0,
|
||||
7,
|
||||
delta,
|
||||
);
|
||||
}
|
||||
|
||||
if (dragged) {
|
||||
vec.set(state.pointer.x, state.pointer.y, 0.5).unproject(state.camera);
|
||||
direction.copy(vec).sub(state.camera.position).normalize();
|
||||
|
|
@ -292,6 +412,7 @@ function Band({ pass, maxSpeed = 50, minSpeed = 10 }) {
|
|||
>
|
||||
<CuboidCollider args={[0.8, 1.125, 0.01]} />
|
||||
<group
|
||||
ref={cardVisual}
|
||||
scale={2.25}
|
||||
position={[0, -1.2, -0.05]}
|
||||
onPointerOver={() => setHovered(true)}
|
||||
|
|
@ -304,11 +425,14 @@ function Band({ pass, maxSpeed = 50, minSpeed = 10 }) {
|
|||
event.target.setPointerCapture(event.pointerId);
|
||||
setDragged(event.point.clone().sub(vec.copy(card.current.translation())));
|
||||
}}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
if (event.delta < 5) onFlip();
|
||||
}}
|
||||
>
|
||||
<mesh geometry={nodes.card.geometry}>
|
||||
<meshPhysicalMaterial
|
||||
map={badgeTexture}
|
||||
map-anisotropy={16}
|
||||
color="#080808"
|
||||
clearcoat={1}
|
||||
clearcoatRoughness={0.15}
|
||||
iridescence={1}
|
||||
|
|
@ -318,6 +442,29 @@ function Band({ pass, maxSpeed = 50, minSpeed = 10 }) {
|
|||
roughness={0.3}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh position={[0, 0.523, 0.0062]}>
|
||||
<planeGeometry args={[0.696, 0.972]} />
|
||||
<meshPhysicalMaterial
|
||||
map={badgeTexture}
|
||||
clearcoat={1}
|
||||
clearcoatRoughness={0.12}
|
||||
iridescence={0.55}
|
||||
iridescenceIOR={1.2}
|
||||
iridescenceThicknessRange={[0, 900]}
|
||||
metalness={0.2}
|
||||
roughness={0.28}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh position={[0, 0.523, 0.0004]} rotation={[0, Math.PI, 0]}>
|
||||
<planeGeometry args={[0.696, 0.972]} />
|
||||
<meshPhysicalMaterial
|
||||
map={backTexture}
|
||||
clearcoat={1}
|
||||
clearcoatRoughness={0.12}
|
||||
metalness={0.2}
|
||||
roughness={0.28}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh geometry={nodes.clip.geometry} material={materials.metal} material-roughness={0.3} />
|
||||
<mesh geometry={nodes.clamp.geometry} material={materials.metal} />
|
||||
</group>
|
||||
|
|
@ -339,12 +486,12 @@ function Band({ pass, maxSpeed = 50, minSpeed = 10 }) {
|
|||
);
|
||||
}
|
||||
|
||||
function PassScene({ pass }) {
|
||||
function PassScene({ pass, flipped, onFlip }) {
|
||||
return (
|
||||
<Canvas camera={{ position: [0, 0, 13], fov: 25 }} dpr={[1, 2]}>
|
||||
<ambientLight intensity={Math.PI} />
|
||||
<Physics interpolate gravity={[0, -40, 0]} timeStep={1 / 60}>
|
||||
<Band pass={pass} />
|
||||
<Band pass={pass} flipped={flipped} onFlip={onFlip} />
|
||||
</Physics>
|
||||
<Environment background blur={0.75}>
|
||||
<color attach="background" args={["black"]} />
|
||||
|
|
@ -359,6 +506,7 @@ function PassScene({ pass }) {
|
|||
|
||||
function App() {
|
||||
const element = document.getElementById("pass-root");
|
||||
const [flipped, setFlipped] = useState(false);
|
||||
const pass = useMemo(() => ({
|
||||
holder: element.dataset.holder,
|
||||
location: element.dataset.location,
|
||||
|
|
@ -369,9 +517,15 @@ function App() {
|
|||
}), [element]);
|
||||
|
||||
return (
|
||||
<Suspense fallback={<div className="loading">Loading credential</div>}>
|
||||
<PassScene pass={pass} />
|
||||
</Suspense>
|
||||
<>
|
||||
<Suspense fallback={<div className="loading">Loading credential</div>}>
|
||||
<PassScene pass={pass} flipped={flipped} onFlip={() => setFlipped((value) => !value)} />
|
||||
</Suspense>
|
||||
<button className="flip-control" type="button" onClick={() => setFlipped((value) => !value)}>
|
||||
<span aria-hidden="true">↻</span>
|
||||
{flipped ? "View front" : "View verification"}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue