vue+css实现三维两人打牌场景效果代码
代码语言：html
所属分类：三维
代码描述：vue+css实现三维两人打牌场景效果代码，左键单击并拖动以旋转，单击鼠标中键并拖动以移动模型，滚轮缩放。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
height: 100vh;
margin: 0;
background-color: #555;
overflow: hidden;
font-family: monospace, sans-serif;
}
body * {
box-sizing: border-box;
}
body #app {
height: 100vh;
display: grid;
}
body #view {
overflow: hidden;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
perspective: 500px;
border: 0;
outline: 0;
}
body #view * {
transform-style: preserve-3d;
}
body #view #space {
position: relative;
display: grid;
grid-template-areas: "overlap";
transform-style: preserve-3d;
justify-content: center;
align-items: flex-end;
transform: rotateX(-20deg) rotateY(20deg);
font-size: calc(5vh + 1vw);
transform-origin: center 90%;
-pointer-events: none;
}
body #view #space > * {
grid-area: overlap;
}
body #view #space .reference {
transform-style: preserve-3d;
display: grid;
grid-template-areas: "overlap";
}
body #view #space .reference > * {
grid-area: overlap;
transform-origin: top left;
align-items: end;
}
body #view #space .absolute {
position: absolute;
}
body #view #space .cuboid,
body #view #space .plane {
width: var(--sizeX);
height: var(--sizeY);
transform: translateX(var(--posX)) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(var(--rotZ));
align-items: start;
}
body #view #space .cuboid.test > *, body #view #space .cuboid.plane.test,
body #view #space .plane.test > *,
body #view #space .plane.plane.test {
border: solid 1px black;
background: linear-gradient(#f005, #00f5);
box-shadow: 0 0 0 1px #0005;
}
body #view #space .cuboid.test > *.top, body #view #space .cuboid.plane.test.top,
body #view #space .plane.test > *.top,
body #view #space .plane.plane.test.top {
background: radial-gradient(#fff 5%, #f0f5 20%);
}
body #view #space .cuboid.test > *.bottom, body #view #space .cuboid.plane.test.bottom,
body #view #space .plane.test > *.bottom,
body #view #space .plane.plane.test.bottom {
background: radial-gradient(#000 5%, #0f05 20%);
}
body #view #space .cuboid._top > .top, body #view #space .cuboid._bottom > .bottom, body #view #space .cuboid._right > .right, body #view #space .cuboid._left > .left, body #view #space .cuboid._front > .front, body #view #space .cuboid._back > .back,
body #view #space .plane._top > .top,
body #view #space .plane._bottom > .bottom,
body #view #space .plane._right > .right,
body #view #space .plane._left > .left,
body #view #space .plane._front > .front,
body #view #space .plane._back > .back {
display: none;
}
body #view #space .cuboid .top,
body #view #space .plane .top {
height: var(--sizeZ);
width: var(--sizeX);
transform: rotateX(90deg);
}
body #view #space .cuboid .bottom,
body #view #space .plane .bottom {
height: var(--sizeZ);
width: var(--sizeX);
transform: translateY(var(--sizeY)) rotateX(90deg);
}
body #view #space .cuboid .left,
body #view #space .plane .left {
height: var(--sizeY);
width: var(--sizeZ);
transform: rotateY(-90deg);
}
body #view #space .cuboid .right,
body #view #space .plane .right {
height: var(--sizeY);
width: var(--sizeZ);
transform: translateX(var(--sizeX)) rotateY(-90deg);
}
body #view #space .cuboid .front,
body #view #space .plane .front {
width: var(--sizeX);
height: var(--sizeY);
transform: translateZ(var(--sizeZ));
}
body #view #space .cuboid .back,
body #view #space .plane .back {
width: var(--sizeX);
height: var(--sizeY);
}
body #view #space .cuboid.shaded > .front, body #view #space .cuboid.shaded > .back,
body #view #space .plane.shaded > .front,
body #view #space .plane.shaded > .back {
filter: brightness(0.9);
}
body #view #space .cuboid.shaded > .left, body #view #space .cuboid.shaded > .right,
body #view #space .plane.shaded > .left,
body #view #space .plane.shaded > .right {
filter: brightness(0.8);
}
body #view #space .group {
transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(var(--rotZ));
}
body #view #space .group > .reference {
align-items: end;
}
body #view #space .group.shaded > .reference .cuboid > .front, body #view #space .group.shaded > .reference .cuboid > .back {
filter: brightness(0.9);
}
body #view #space .group.shaded > .reference .cuboid > .left, body #view #space .group.shaded > .reference .cuboid > .right {
filter: brightness(0.8);
}
body #view #space .group.shaded > .reference .cuboid > .bottom {
filter: brightness(0.7);
}
#floor > * {
background: top left/100% 0.5em linear-gradient(#0002 50%, #0001 50%), top left/0.5em 100% linear-gradient(90deg, #0002 50%, #0001 50%), #624b39;
}
.outlined .cuboid > * {
border: solid 1px black;
box-shadow: 0 0 0 1px #0005;
}
.player,
#table {
--hairColor: #bbb;
--skinColor: #e0b2ab;
--vestTexture: top left / 0.03em 100%
linear-gradient(90deg, #0000001a, #00000047),
#333;
}
.player .head,
#table .head {
-webkit-animation: bobbleHead 5s linear infinite;
animation: bobbleHead 5s linear infinite;
}
.player .cuboid.skin > *,
.player .plane.skin > *,
#table .cuboid.skin > *,
#table .plane.skin > * {
background-color: var(--skinColor);
}
.player .cuboid.hat > *, .player .cuboid.skull > .bottom,
.player .plane.hat > *,
.player .plane.skull > .bottom,
#table .cuboid.hat > *,
#table .cuboid.skull > .bottom,
#table .plane.hat > *,
#table .plane.skull > .bottom {
background-color: #222;
}
.player .cuboid.wood > *,
.player .plane.wood > *,
#table .cuboid.wood > *,
#table .plane.wood > * {
background: top left/0.1em auto linear-gradient(90deg, #0002 50%, #0001 50%) #7b5d4b;
}
.player .cuboid.pants > *,
.player .plane.pants > *,
#table .cuboid.pants > *,
#table .plane.pants > * {
background: top left/0.01em 100% linear-gradient(90deg, #5f5ffb88, #4242bb88), #4242bb;
}
.player .cuboid.vest > *,
.player .plane.vest > *,
#table .cuboid.vest > *,
#table .plane.vest > * {
background: var(--vestTexture);
}
.player .cuboid.vest.forearm > :not(.bottom)::before,
.player .plane.vest.forearm > :not(.bottom)::before,
#table .cuboid.vest.forearm > :not(.bottom)::before,
#table .plane.vest.forearm > :not(.bottom)::before {
content: "";
display: block;
width: 100%;
height: 0.1em;
background-color: #fff;
}
.player .cuboid.vest.forearm > :not(.bottom).right::before,
.player .plane.vest.forearm > :not(.bottom).right::before,
#table .cuboid.vest.forearm > :not(.bottom).right::before,
#table .plane.vest.forearm > :not(.bottom).right::before {
background: 0.015em top/auto auto radial-gradient(circle, #1115, #111 0.02em, #0000 0.02em) no-repeat, #fff;
}
.player .cuboid.vest.body > .left::before, .player .cuboid.vest.body > .left::after,
.player .plane.vest.body > .left::before,
.player .plane.vest.body > .left::after,
#table .cuboid.vest.body > .left::before,
#table .cuboid.vest.body > .left::after,
#table .plane.vest.body > .left::before,
#table .plane.vest.body > .left::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.player .cuboid.vest.body > .left::before,
.player .plane.vest.body > .left::before,
#table .cuboid.vest.body > .left::before,
#table .plane.vest.body > .left::before {
background-color: #fff;
-webkit-clip-path: polygon(20% 0, 50% 50%, 80% 0);
clip-path: polygon(20% 0, 50% 50%, 80% 0);
}
.player .cuboid.vest.body > .left::after,
.player .plane.vest.body > .left::after,
#table .cuboid.vest.body > .left::after,
#table .plane.vest.body > .left::after {
background: 50% top/0.05em 0.05em radial-gradient(circle, #ac836f, #513520 0.012em, #0000 0.014em) repeat-y, calc(50% + 0.02em) top/0.1em 100% linear-gradient(90deg, #0000, #0005 10%, #0000 12% 50%, #0005 52%, #0000 65%) no-repeat;
-webkit-clip-path: polygon(20% 0, 50% 50%, 80% 0);
clip-path: polygon(20% 0, 50% 50%, 80% 0);
}
.player .cuboid.glasses,
.player .plane.glasses,
#table .cuboid.glasses,
#table .plane.glasses {
--glassesColor: #c89e3b;
background: center 80%/0.12em 0.02em linear-gradient(var(--glassesColor), var(--glassesColor)) no-repeat;
filter: drop-shadow(0 0 0.01em #0005);
}
.player .cuboid.glasses::before, .player .cuboid.glasses::after,
.player .plane.glasses::before,
.player .plane.glasses::after,
#table .cuboid.glasses::before,
#table .cuboid.glasses::after,
#table .plane.glasses::before,
#table .plane.glasses::after {
content: "";
display: block;
height: 0.12em;
width: 0.12em;
background: radial-gradient(#0000 55%, var(--glassesColor) 60% 65%, #0000 70%);
position: absolute;
}
.player .cuboid.glasses::before,
.player .plane.glasses::before,
#table .cuboid.glasses::before,
#table .plane.glasses::before {
bottom: 0;
left: 60%;
}
.player .cuboid.glasses::after,
.player .plane.glasses::after,
#table .cuboid.glasses::after,
#table .plane.glasses::after {
bottom: 0;
right: 60%;
}
.player .cuboid.brows::before, .player .cuboid.brows::after,
.player .plane.brows::before,
.player .plane.brows::after,
#table .cuboid.brows::before,
#table .cuboid.brows::after,
#table .plane.brows::before,
#table .plane.brows::after {
content: "";
display: block;
width: 0.1em;
height: 0.04em;
background-color: var(--hairColor);
position: absolute;
filter: drop-shadow(0 0 0.01em #0005);
bottom: -10%;
}
.player .cuboid.brows::before,
.player .plane.brows::before,
#table .cuboid.brows::before,
#table .plane.brows::before {
left: 60%;
transform: rotate(-10deg);
}
.player .cuboid.brows::after,
.player .plane.brows::after,
#table .cuboid.brows::after,
#table .plane.brows::after {
right: 60%;
transform: rotate(10deg);
}
.player .cuboid.eyes::before, .player .cuboid.eyes::after,
.player .plane.eyes::before,
.player .plane.eyes::after,
#table .cuboid.eyes::before,
#table .cuboid.eyes::after,
#table .plane.eyes::before,
#table .plane.eyes::after {
content: "";
display: block;
width: 0.04em;
height: 0.04em;
background-color: #111;
position: absolute;
filter: drop-shadow(0 0 0.01em #0005);
bottom: 25%;
border-radius: 50%;
}
.player .cuboid.eyes::before,
.player .plane.eyes::before,
#table .cuboid.eyes::before,
#table .plane.eyes::before {
left: 68%;
}
.player .cuboid.eyes::after,
.player .plane.eyes::after,
#table .cuboid.eyes::after,
#table .plane.eyes::after {
right: 68%;
}
.player .cuboid.mouth,
.player .plane.mouth,
#table .cuboid.mouth,
#table .plane.mouth {
background-color: #111;
-webkit-clip-path: circle(30% at 50% 60%);
clip-path: circle(30% at 50% 60%);
}
.player .cuboid.hair > *,
.player .plane.hair > *,
#table .cuboid.hair > *,
#table .plane.hair > * {
background-color: var(--hairColor);
}
.player .cuboid.shoe > *,
.player .plane.shoe > *,
#table .cuboid.shoe > *,
#table .plane.shoe > * {
background: radial-gradient(#0000, #ffffff08), #130f0c;
}
.player .cuboid.shoe > *.top::before,
.player .plane.shoe > *.top::before,
#table .cuboid.shoe > *.top::before,
#table .plane.shoe > *.top::before {
content: "";
display: block;
position: absolute;
top: 10%;
height: 80%;
right: 12%;
width: 5%;
background-image: linear-gradient(#aaa5, #aaa 20% 80%, #aaa5);
filter: drop-shadow(-0.02em 0 0 #aaa) drop-shadow(-0.02em 0 0 #aaa);
border-radius: 1em;
}
.player .cuboid.hat > *,
.player .plane.hat > *,
#table .cuboid.hat > *,
#table .plane.hat > * {
box-shadow: 0 0 0 0.005em #222;
}
.player .cuboid.skull > *,
.player .plane.skull > *,
#table .cuboid.skull > *,
#table .plane.skull > * {
overflow: hidden;
}
.player .cuboid.skull > .right::before, .player .cuboid.skull > .front::before, .player .cuboid.skull > .back::before,
.player .plane.skull > .right::before,
.player .plane.skull > .front::before,
.player .plane.skull > .back::before,
#table .cuboid.skull > .right::before,
#table .cuboid.skull > .front::before,
#table .cuboid.skull > .back::before,
#table .plane.skull > .right::before,
#table .plane.skull > .front::before,
#table .plane.skull > .back::before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: var(--hairColor);
position: absolute;
}
.player .cuboid.skull > .right::before,
.player .plane.skull > .right::before,
#table .cuboid.skull > .right::before,
#table .plane.skull > .right::before {
width: 1em;
height: 1em;
width: 1em;
height: 1em;
transform: translateX(-50%) translateY(12%) rotate(45deg);
left: 50%;
box-shadow: 0 0 0.02em #0005;
}
.player .cuboid.skull > .front::before, .player .cuboid.skull > .back::before,
.player .plane.skull > .front::before,
.player .plane.skull > .back::before,
#table .cuboid.skull > .front::before,
#table .cuboid.skull > .back::before,
#table .plane.skull > .front::before,
#table .plane.skull > .back::before {
width: 110%;
transform: rotate(-10deg) translateY(50%) translateX(-5%);
box-shadow: 0 0 0.02em #0005;
}
.player#gunner .cuboid,
.player#gunner .plane,
#table#gunner .cuboid,
#table#gunner .plane {
--hairColor: #553325;
--skinColor: #eaba9b;
--vestTexture: top left/100% 0.05em linear-gradient(#fff1 50%, #0001 50%),
top left/0.05em 100% linear-gradient(90deg, #fff1 50%, #0001 50%), #2f2014;
}
.player#gunner .cuboid.hat > *, .player#gunner .cuboid.skull > .bottom,
.player#gunner .plane.hat > *,
.player#gunner .plane.skull > .bottom,
#table#gunner .cuboid.hat > *,
#table#gunner .cuboid.skull > .bottom,
#table#gunner .plane.hat > *,
#table#gunner .plane.skull > .bottom {
background-color: #222;
}
.player#gunner .cuboid.pants > *,
.player#gunner .plane.pants > *,
#table#gunner .cuboid.pants > *,
#table#gunner .plane.pants > * {
background: top left/0.02em 100% linear-gradient(90deg, #0001, #0003), #666;
}
.player#gunner .cuboid.vest > *,
.player#gunner .plane.vest > *,
#table#gunner .cuboid.vest > *,
#table#gunner .plane.vest > * {
background: var(--vestTexture);
}
.player#gunner .cuboid.body > .left::before,
.player#gunner .plane.body > .left::before,
#table#gunner .cuboid.body > .left::before,
#table#gunner .plane.body > .left::before {
content: "";
}
.player#gunner .cuboid.mouth,
.player#gunner .plane.mouth,
#table#gunner .cuboid.mouth,
#table#gunner .plane.mouth {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
background-color: #000;
border-radius: 50%;
}
.player#gunner .cuboid.brows::before,
.player#gunner .plane.brows::before,
#table#gunner .cuboid.brows::before,
#table#gunner .plane.brows::before {
bottom: 10%;
transform: rotate(20deg);
}
.player#gunner .cuboid.brows::after,
.player#gunner .plane.brows::after,
#table#gunner .cuboid.brows::after,
#table#gunner .plane.brows::after {
bottom: 10%;
transform: rotate(-20deg);
}
.player#gunner .cuboid.scar,
.player#gunner .plane.scar,
#table#gunner .cuboid.scar,
#table#gunner .plane.scar {
background-color: var(--skinColor);
filter: brightness(0.6);
-webkit-clip-path: polygon(41% 9%, 50% 27%, 59% 51%, 62% 88%, 40% 45%, 27% 69%, 24% 37%);
clip-path: polygon(41% 9%, 50% 27%, 59% 51%, 62% 88%, 40% 45%, 27% 69%, 24% 37%);
}
.player#gunner .cuboid.eyes::before, .player#gunner .cuboid.eyes::after,
.player#gunner .plane.eyes::before,
.player#gunner .plane.eyes::after,
#table#gunner .cuboid.eyes::before,
#table#gunner .cuboid.eyes::after,
#table#gunner .plane.eyes::before,
#table#gunner .plane.eyes::after {
bottom: 40%;
}
.player#gunner .cuboid.wood.knife > *,
.player#gunner .plane.wood.knife > *,
#table#gunner .cuboid.wood.knife > *,
#table#gunner .plane.wood.knife > * {
background: #2f2218;
}
.player#gunner .cuboid.blade.knife,
.player#gunner .plane.blade.knife,
#table#gunner .cuboid.blade.knife,
#table#gunner .plane.blade.knife {
background: top right/20% 100% linear-gradient(90deg, #0000, #fff4) no-repeat, #777;
-webkit-clip-path: polygon(0 0, 100% 27%, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 27%, 100% 100%, 0% 100%);
}
#table .cuboid.coin > * {
background: top left/10% 100% linear-gradient(90deg, #fff2, #0001);
background-color: #d7b919;
}
#table .cuboid.coin > *.top, #table .cuboid.coin > *.bottom {
background-image: unset;
}
#table .cuboid.coin > *.top::before, #table .cuboid.coin > *.bottom::before {
content: "";
display: block;
position: absolute;
width: 60%;
height: 60%;
left: 20%;
top: 20%;
box-shadow: inset 0 0 0.01em #0005;
}
#table .cuboid.deck > .top {
background: radial-gradient(#0000 60%, #801a1a), top left/100% 0.01em linear-gradient(#fff2 50%, #fff1 50%), top left/0.01em 100% linear-gradient(90deg, #fff2 50%, #fff1 50%), #801a1a;
}
#table .cuboid.deck > * {
background: top left/100% 0.008em linear-gradient(#0005, #0000), #fff;
}
#table .cuboid.bottle > * {
background-color: #26482682;
}
#table .cuboid.bottle.body {
position: relative;
}
#table .cuboid.bottle.body > .top {
-webkit-clip-path: polygon(0% 0%, 0% 100%, 0.03em 100%, 0.03em 0.03em, calc(100% - 0.03em) 0.03em, calc(100% - 0.03em) calc(100% - 0.03em), 0.03em calc(100% - 0.03em), 0.03em 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 0.03em 100%, 0.03em 0.03em, calc(100% - 0.03em) 0.03em, calc(100% - 0.03em) calc(100% - 0.03em), 0.03em calc(100% - 0.03em), 0.03em 100%, 100% 100%, 100% 0%);
}
#table .cuboid.bottle.body > :not(.top, .bottom)::before {
content: "";
display: block;
position: absolute;
top: 40%;
width: 100%;
height: 20%;
background-color: #c8ae92;
}
#table .cuboid.wine > * {
background-color: #6615aab5;
}
.card .front,
.card .back {
border-radius: 0.01em;
overflow: hidden;
}
.card .back {
background: radial-gradient(#0000 60%, #801a1a), top left/100% 0.01em linear-gradient(#fff2 50%, #fff1 50%), top left/0.01em 100% linear-gradient(90deg, #fff2 50%, #fff1 50%), #801a1a;
}
.card > .front {
background-color: #fff;
}
.card > .front::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.card.heart .front::before, .card.diamond .front::before {
background-color: #f00;
}
.card.heart > .front::before {
-webkit-clip-path: polygon(50% 30%, 75% 20%, 90% 50%, 50% 80%, 10% 50%, 25% 20%);
clip-path: polygon(50% 30%, 75% 20%, 90% 50%, 50% 80%, 10% 50%, 25% 20%);
}
.card.diamond > .front::before {
-webkit-clip-path: polygon(50% 20%, 80% 50%, 50% 80%, 20% 50%);
clip-path: polygon(50% 20%, 80% 50%, 50% 80%, 20% 50%);
}
.card.clover .front::before, .card.spades .front::before {
background-color: #111;
}
.card.clover .front::before {
-webkit-clip-path: polygon(24% 41%, 46% 59%, 37% 32%, 63% 32%, 54% 59%, 76% 41%, 86% 52%, 56% 63%, 67% 76%, 33% 76%, 44% 63%, 14% 52%);
clip-path: polygon(24% 41%, 46% 59%, 37% 32%, 63% 32%, 54% 59%, 76% 41%, 86% 52%, 56% 63%, 67% 76%, 33% 76%, 44% 63%, 14% 52%);
}
.card.spades > .front::before {
-webkit-clip-path: polygon(50% 30%, 83% 53%, 80% 65%, 60% 60%, 65% 71%, 36% 71%, 40% 60%, 20% 65%, 17% 53%);
clip-path: polygon(50% 30%, 83% 53%, 80% 65%, 60% 60%, 65% 71%, 36% 71%, 40% 60%, 20% 65%, 17% 53%);
}
@-webkit-keyframes bobbleHead {
0%, 100% {
transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(calc(var(--rotX) - 2deg)) rotateY(var(--rotY)) rotateZ(var(--rotZ));
}
25% {
transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(calc(var(--rotZ) + 2deg));
}
50% {
transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(calc(var(--rotX) + 2deg)) rotateY(var(--rotY)) rotateZ(var(--rotZ));
}
75% {
transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(calc(var(--rotZ) - 2deg));
}
}
@keyframes bobbleHead {
0%, 100% {
transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(calc(var(--rotX) - 2deg)) rotateY(var(--rotY)) rotateZ(var(--rotZ));
}
25% {
transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(calc(var(--rotZ) + 2deg));
}
50% {
transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(calc(var(--rotX) + 2deg)) rotateY(var(--rotY)) rotateZ(var(--rotZ));
}
75% {
transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(calc(var(--rotZ) - 2deg));
}
}
</style>
</head>
<body >
<div id="app">
<details style="color: #fff; margin: 1em 0 0 1em; position: absolute; display: none; z-index: 2" :style="'display: unset;'">
<summary>Controls</summary>
<ul>
<li>left click & drag to rotate</li>
<li>middle click & drag to move the model</li>
<li>scroll wheel to zoom</li>
<li>(still figuring out mobile devices)</li>
</ul>
</details>
<div id="view" tabindex="0" @wheel="wheelAction" @touchmove="doDrag" @mousemove="mouseMove" @touchend="stopDrag" @mousedown="mouseDown" @touchstart="startDrag" @mouseup="mouseUp">
<div class="reference" id="scene" style="transform: translateX(0) translateY(120px)" :style="{ transform: `translateX(${moveX}px) translateY(${moveY}px)` }">
<div id="space" style="transform: translateY(-40vh) rotateX(-20deg) rotateY(-180deg); font-size: calc(30vh + 0.75vw)" :style="{ transform: `translateY(-40vh) rotateX(${angleX}deg) rotateY(${angleY}deg)`, fontSize: `calc(${zoomLevel * 20}vh + ${zoomLevel / 2}vw)` }">
<div class="reference group" id="" style="
--posX: -1.5em;
--posY: -1.5em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<!-- scenery-->
<div class="reference group absolute" id="scene" style="
--posX: 0em;
--posY: 0em;
--posZ: -1.5em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<div class="cuboid reference shaded" id="floor" style="
--sizeX: 3em;
--sizeY: 0.15em;
--sizeZ: 3em;
--posX: 0em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</div>
<!-- table components-->
<div class="reference group absolute" id="table" style="
--posX: 1.5em;
--posY: 0.15em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<div class="reference group" id="tableLeg" style="
--posX: 0em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<div class="cuboid reference _bottom _top wood shaded" id="tableLeg" style="
--sizeX: 0.2em;
--sizeY: 0.8em;
--sizeZ: 0.2em;
--posX: -0.1em;
--posY: 0em;
--posZ: -0.1em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="reference group" id="tableFoot" style="
--posX: 0em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 45deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<div class="cuboid reference _bottom wood shaded" id="tableFootX" style="
--sizeX: 0.5em;
--sizeY: 0.1em;
--sizeZ: 0.1em;
--posX: -0.25em;
--posY: 0em;
--posZ: -0.05em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference _bottom wood shaded" id="tableFootY" style="
--sizeX: 0.1em;
--sizeY: 0.1em;
--sizeZ: 0.5em;
--posX: -0.05em;
--posY: 0em;
--posZ: -0.25em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</div>
</div>
</div>
<div class="reference group" id="tableTopGroup" style="
--posX: -0.5em;
--posY: 0.8em;
--posZ: -0.5em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<div class="cuboid reference wood shaded" id="tableTop" style="
--sizeX: 1em;
--sizeY: 0.1em;
--sizeZ: 1em;
--posX: 0em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="reference group" id="tableTopDeco" style="
--posX: 0.5em;
--posY: 0.105em;
--posZ: 0.5em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<div class="reference group" id="bottle" style="
--posX: -0.1em;
--posY: 0em;
--posZ: 0.25em;
--rotX: 0deg;
--rotY: 20deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<div class="cuboid reference absolute bottle body shaded" id="" style="
--sizeX: 0.12em;
--sizeY: 0.25em;
--sizeZ: 0.12em;
--posX: 0em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference absolute wine shaded" id="" style="
--sizeX: 0.1em;
--sizeY: 0.15em;
--sizeZ: 0.1em;
--posX: 0.01em;
--posY: 0.025em;
--posZ: 0.01em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference absolute bottle neck _bottom shaded" id="" style="
--sizeX: 0.06em;
--sizeY: 0.15em;
--sizeZ: 0.06em;
--posX: 0.03em;
--posY: 0.249em;
--posZ: 0.03em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</div>
<div class="reference group" id="deck" style="
--posX: 0em;
--posY: 0em;
--posZ: -0.4em;
--rotX: 0deg;
--rotY: 5deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<div class="cuboid reference absolute deck shaded _bottom" id="" style="
--sizeX: 0.12em;
--sizeY: 0.05em;
--sizeZ: 0.08em;
--posX: 0em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference card spades absolute" id="" style="
--sizeX: 0.08em;
--sizeY: 0.12em;
--sizeZ: 0.001em;
--posX: 0.12em;
--posY: -0.067em;
--posZ: 0.07em;
--rotX: -90deg;
--rotY: 0deg;
--rotZ: 95deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</div>
<div class="reference group" id="cheaterCards" style="
--posX: 0.37em;
--posY: 0em;
--posZ: 0.17em;
--rotX: 90deg;
--rotY: 0deg;
--rotZ: -90deg">
<div class="reference" style="font-size: 1em">
<div class="cuboid reference card spades absolute" id="" style="
--sizeX: 0.08em;
--sizeY: 0.12em;
--sizeZ: 0.001em;
--posX: 0em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: -3deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference card spades absolute" id="" style="
--sizeX: 0.08em;
--sizeY: 0.12em;
--sizeZ: 0.001em;
--posX: 0.12em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: -5deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference card spades absolute" id="" style="
--sizeX: 0.08em;
--sizeY: 0.12em;
--sizeZ: 0.001em;
--posX: 0.24em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 5deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</div>
<div class="reference group" id="gunnerCards" style="
--posX: -0.37em;
--posY: 0em;
--posZ: -0.17em;
--rotX: 90deg;
--rotY: 0deg;
--rotZ: 90deg">
<div class="reference" style="font-size: 1em">
<div class="cuboid reference card diamond absolute" id="" style="
--sizeX: 0.08em;
--sizeY: 0.12em;
--sizeZ: 0.001em;
--posX: 0em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: -3deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference card clover absolute" id="" style="
--sizeX: 0.08em;
--sizeY: 0.12em;
--sizeZ: 0.001em;
--posX: 0.12em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: -5deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference card diamond absolute" id="" style="
--sizeX: 0.08em;
--sizeY: 0.12em;
--sizeZ: 0.001em;
--posX: 0.24em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 5deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</div>
<div class="reference group coins" id="" style="
--posX: 0.2em;
--posY: 0em;
--posZ: 0.2em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<div class="cuboid reference coin absolute shaded" id="" style="
--sizeX: 0.06em;
--sizeY: 0.02em;
--sizeZ: 0.06em;
--posX: 0em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference coin absolute shaded" id="" style="
--sizeX: 0.06em;
--sizeY: 0.02em;
--sizeZ: 0.06em;
--posX: -0.005em;
--posY: 0.021em;
--posZ: 0.005em;
--rotX: 0deg;
--rotY: 5deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference coin absolute shaded" id="" style="
--sizeX: 0.06em;
--sizeY: 0.02em;
--sizeZ: 0.06em;
--posX: 0.005em;
--posY: 0.042em;
--posZ: -0.005em;
--rotX: 0deg;
--rotY: -5deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference coin absolute shaded" id="" style="
--sizeX: 0.06em;
--sizeY: 0.02em;
--sizeZ: 0.06em;
--posX: -0.007em;
--posY: 0.063em;
--posZ: 0.007em;
--rotX: 0deg;
--rotY: 10deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="reference group absolute" id="thrownCardsPos" style="
--posX: 0.8em;
--posY: 1.3em;
--posZ: -0.5em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<div class="reference group" id="thrownCards" style="
--posX: 0em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 180deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<div class="cuboid reference absolute card _top _bottom _left _right spades" id="" style="
--sizeX: 0.08em;
--sizeY: 0.12em;
--sizeZ: 0.001em;
--posX: 0em;
--posY: 0.2em;
--posZ: 0.2em;
--rotX: 0deg;
--rotY: 100deg;
--rotZ: -10deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference absolute card _top _bottom _left _right clover" id="" style="
--sizeX: 0.08em;
--sizeY: 0.12em;
--sizeZ: 0.001em;
--posX: 0.1em;
--posY: 0.4em;
--posZ: 0.2em;
--rotX: 70deg;
--rotY: 140deg;
--rotZ: -90deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference absolute card _top _bottom _left _right heart" id="" style="
--sizeX: 0.08em;
--sizeY: 0.12em;
--sizeZ: 0.001em;
--posX: 0.2em;
--posY: 0.35em;
--posZ: 0.3em;
--rotX: 80deg;
--rotY: 160deg;
--rotZ: -90deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</div>
</div>
</div>
<div class="reference group absolute" id="players" style="
--posX: 0em;
--posY: 0.15em;
--posZ: -0.25em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<!-- cheater-->
<div class="reference group player" id="cheater" style="
--posX: 2.25em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<!-- chair-->
<div class="reference group chairGroup" id="" style="
--posX: 0em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<div class="cuboid reference _bottom base wood shaded" id="" style="
--sizeX: 0.47em;
--sizeY: 0.5em;
--sizeZ: 0.47em;
--posX: 0.015em;
--posY: 0em;
--posZ: 0.015em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference wood shaded" id="" style="
--sizeX: 0.1em;
--sizeY: 0.7em;
--sizeZ: 0.5em;
--posX: 0.55em;
--posY: 0.4em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 10deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</div>
<!-- sneaky cards-->
<div class="reference group" id="cheaterCards" style="
--posX: 0.05em;
--posY: 0.51em;
--posZ: 0.08em;
--rotX: 90deg;
--rotY: 0deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<div class="cuboid reference card absolute _left _right _top _bottom spades" id="" style="
--sizeX: 0.08em;
--sizeY: 0.12em;
--sizeZ: 0.001em;
--posX: 0em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: -10deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference card absolute _left _right _top _bottom clover" id="" style="
--sizeX: 0.08em;
--sizeY: 0.12em;
--sizeZ: 0.001em;
--posX: 0.07em;
--posY: 0.03em;
--posZ: 0.005em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 1deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</div>
<!-- character-->
<div class="reference group player" id="" style="
--posX: 0em;
--posY: 0.5em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<!-- head-->
<div class="reference group head" id="" style="
--posX: 0.42em;
--posY: 0.32em;
--posZ: 0.25em;
--rotX: 0deg;
--rotY: 180deg;
--rotZ: -170deg">
<div class="reference" style="font-size: 1em">
<div class="reference group headPos" id="" style="
--posX: -0.2em;
--posY: 0.25em;
--posZ: -0.25em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<!-- skull-->
<div class="cuboid reference skull shaded skin" id="" style="
--sizeX: 0.4em;
--sizeY: 0.4em;
--sizeZ: 0.5em;
--posX: -0.2em;
--posY: 0em;
--posZ: 0em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<!-- face-->
<div class="reference group face absolute" id="" style="
--posX: -0.2em;
--posY: 0em;
--posZ: 0.25em;
--rotX: 0deg;
--rotY: -90deg;
--rotZ: 0deg">
<div class="reference" style="font-size: 1em">
<div class="cuboid reference hair shaded absolute" id="" style="
--sizeX: 0.04em;
--sizeY: 0.1em;
--sizeZ: 0.1em;
--posX: -0.02em;
--posY: 0.32em;
--posZ: -0.08em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference hair shaded absolute" id="" style="
--sizeX: 0.24em;
--sizeY: 0.08em;
--sizeZ: 0.1em;
--posX: -0.12em;
--posY: 0.33em;
--posZ: -0.09em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference hair shaded _back absolute" id="" style="
--sizeX: 0.12em;
--sizeY: 0.03em;
--sizeZ: 0.1em;
--posX: 0em;
--posY: 0.22em;
--posZ: -0.08em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: -20deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="cuboid reference hair shaded _back absolute" id="" style="
--sizeX: 0.12em;
--sizeY: 0.03em;
--sizeZ: 0.1em;
--posX: 0em;
--posY: 0.19em;
--posZ: -0.08em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: -160deg;
font-size: 1em">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
<div class="plane absolute glasses" id="" style="
--sizeX: 0.5em;
--sizeY: 0.12em;
--posX: -0.25em;
--posY: 0.12em;
--posZ: 0.02em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em"></div>
<div class="plane absolute eyes" id="" style="
--sizeX: 0.5em;
--sizeY: 0.12em;
--posX: -0.25em;
--posY: 0.12em;
--posZ: 0.005em;
--rotX: 0deg;
--rotY: 0deg;
--rotZ: 0deg;
font-size: 1em"></div>
<div class="plane absolu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0