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; background-image: linear-gradient(#5b86ea, #fff); } body * { box-sizing: border-box; } body #app { height: 100vh; } body details { margin: 1em 0 0 1em; color: white; font-family: monospace, sans-serif; z-index: 2; position: relative; cursor: pointer; position: absolute; } body #view { overflow: hidden; height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; perspective: 500px; border: 0; outline: 0; opacity: 0; } body #view * { transform-style: preserve-3d; } body #view #scene #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 #scene #space > * { grid-area: overlap; } body #view #scene #space .absolute { position: absolute; } body #view #scene #space .reference { transform-style: preserve-3d; display: grid; grid-template-areas: "overlap"; } body #view #scene #space .reference > * { grid-area: overlap; transform-origin: top left; align-items: end; } body #view #scene #space .group { position: absolute; transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(var(--rotZ)); } body #view #scene #space .group > .reference { align-items: end; } body #view #scene #space .group.shaded > .reference .cuboid > .front, body #view #scene #space .group.shaded > .reference .cuboid > .back { filter: brightness(0.9); } body #view #scene #space .group.shaded > .reference .cuboid > .left, body #view #scene #space .group.shaded > .reference .cuboid > .right { filter: brightness(0.8); } body #view #scene #space .group.shaded > .reference .cuboid > .bottom { filter: brightness(0.7); } body #view #scene #space .cuboid, body #view #scene #space .plane { position: absolute; 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 #scene #space .cuboid.test > *, body #view #scene #space .cuboid.plane.test, body #view #scene #space .plane.test > *, body #view #scene #space .plane.plane.test { border: solid 1px black; background: linear-gradient(#f005, #00f5); box-shadow: 0 0 0 1px #0005; } body #view #scene #space .cuboid.test > *.top, body #view #scene #space .cuboid.plane.test.top, body #view #scene #space .plane.test > *.top, body #view #scene #space .plane.plane.test.top { background: radial-gradient(#fff 5%, #f0f5 20%); } body #view #scene #space .cuboid.test > *.bottom, body #view #scene #space .cuboid.plane.test.bottom, body #view #scene #space .plane.test > *.bottom, body #view #scene #space .plane.plane.test.bottom { background: radial-gradient(#000 5%, #0f05 20%); } body #view #scene #space .cuboid.overflow > *, body #view #scene #space .plane.overflow > * { box-shadow: 0 0 0 0.5px currentColor; } body #view #scene #space .cuboid._top > .top, body #view #scene #space .cuboid._bottom > .bottom, body #view #scene #space .cuboid._right > .right, body #view #scene #space .cuboid._left > .left, body #view #scene #space .cuboid._front > .front, body #view #scene #space .cuboid._back > .back, body #view #scene #space .plane._top > .top, body #view #scene #space .plane._bottom > .bottom, body #view #scene #space .plane._right > .right, body #view #scene #space .plane._left > .left, body #view #scene #space .plane._front > .front, body #view #scene #space .plane._back > .back { display: none; } body #view #scene #space .cuboid.color > *, body #view #scene #space .plane.color > * { background-color: currentColor; } body #view #scene #space .cuboid .top, body #view #scene #space .plane .top { height: var(--sizeZ); width: var(--sizeX); transform: rotateX(90deg); } body #view #scene #space .cuboid .bottom, body #view #scene #space .plane .bottom { height: var(--sizeZ); width: var(--sizeX); transform: translateY(var(--sizeY)) rotateX(90deg); } body #view #scene #space .cuboid .left, body #view #scene #space .plane .left { height: var(--sizeY); width: var(--sizeZ); transform: rotateY(-90deg); } body #view #scene #space .cuboid .right, body #view #scene #space .plane .right { height: var(--sizeY); width: var(--sizeZ); transform: translateX(var(--sizeX)) rotateY(-90deg); } body #view #scene #space .cuboid .front, body #view #scene #space .plane .front { width: var(--sizeX); height: var(--sizeY); transform: translateZ(var(--sizeZ)); } body #view #scene #space .cuboid .back, body #view #scene #space .plane .back { width: var(--sizeX); height: var(--sizeY); } body #view #scene #space .cuboid.shaded > .front, body #view #scene #space .cuboid.shaded > .back, body #view #scene #space .plane.shaded > .front, body #view #scene #space .plane.shaded > .back { filter: brightness(0.9); } body #view #scene #space .cuboid.shaded > .left, body #view #scene #space .cuboid.shaded > .right, body #view #scene #space .plane.shaded > .left, body #view #scene #space .plane.shaded > .right { filter: brightness(0.8); } body #view #scene #space .cuboid.shaded > .top, body #view #scene #space .cuboid.shaded > .bottom, body #view #scene #space .plane.shaded > .top, body #view #scene #space .plane.shaded > .bottom { filter: brightness(0.7); } body #view #scene #space .cylinder { position: absolute; transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(calc(var(--posZ) + var(--radius))) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(var(--rotZ)); height: var(--height); width: var(--diameter); } body #view #scene #space .cylinder.test > .cylinder_face { border: solid 1px black; background: linear-gradient(#f005, #00f5); } body #view #scene #space .cylinder.color > * { background-color: currentColor; } body #view #scene #space .cylinder > .cylinder_face { height: var(--height); width: var(--faceWidth); transform: translateX(calc(var(--radius) - var(--faceWidth) / 2)) rotateY(calc(var(--pos) * (360deg / var(--detailLevel)))) translateZ(var(--dist)); transform-origin: center top; } body #view #scene #space .cone { position: absolute; transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(calc(var(--posZ) + var(--radius))) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(var(--rotZ)); height: var(--height); width: var(--diameter); } body #view #scene #space .cone.test > .cone_face { border: solid 1px black; background: linear-gradient(#f005, #00f5); } body #view #scene #space .cone > .cone_face { height: var(--faceHeight); width: var(--faceWidth); transform: translateX(calc(var(--radius) - var(--faceWidth) / 2)) rotateY(calc(var(--pos) * (360deg / var(--detailLevel)))) translateZ(var(--dist)) rotateX(var(--coneAngle)); transform-origin: center bottom; -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } body #view #scene #space .cone.shaded > *:first-child, body #view #scene #space .cone.shaded > *:nth-child(odd) { filter: brightness(0.8); } body #view #scene #space .cone.shaded > *:nth-child(even) { filter: brightness(0.9); } body #view #scene #space .cone.color > * { background-color: currentColor; } body #view #scene #space .cone.overflow > * { -webkit-clip-path: polygon(50% -2px, -2px calc(100% + 1px), calc(100% + 1px) calc(100% + 1px)); clip-path: polygon(50% -2px, -2px calc(100% + 1px), calc(100% + 1px) calc(100% + 1px)); box-shadow: 0 0 0 1px currentColor; } #floor .rocks > * { color: #666; } #floor .rocks > :not(.bottom, .top) { background-image: linear-gradient(currentColor calc(100% - 2em), #0000); background-color: unset !important; -webkit-clip-path: polygon(-10% -10%, 110% -10%, 110% calc(100% - 2em), 100% calc(100% - 2em), 100% 100%, 0% 100%, 0% calc(100% - 2em), -10% calc(100% - 2em)); clip-path: polygon(-10% -10%, 110% -10%, 110% calc(100% - 2em), 100% calc(100% - 2em), 100% 100%, 0% 100%, 0% calc(100% - 2em), -10% calc(100% - 2em)); } .wizzo .hair, .wizzo .beard { color: #462413; } .wizzo .hair.contrast, .wizzo .beard.contrast { color: #381d0f; } .wizzo .skin > * { color: #b37465; } .wizzo .hat > *, .wizzo .coat > * { color: #8f3838; } .wizzo .pants > * { color: #642b2b; } .wizzo .staff.shaft { color: #4c2415; } .wizzo .staff.shaft > *::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px; background: top left/0.2em 100em var(--noise); } .wizzo .staff.metal > * { background-image: radial-gradient(#ddd, #888); } .wizzo .staff.crimps > * { background-image: radial-gradient(#ddd, #888); } .wizzo .staff.crimps > *:not(.top, .bottom) { background-image: linear-gradient(90deg, #888, #ddd, #888); } .wizzo .crystal > * { color: #f07013ab; background-image: conic-gradient(at 50% 0%, #fff3 160deg, #0000 180deg, #fff3 200deg), linear-gradient(#0000 90%, #fff3); background-color: currentColor; } .wizzo .gold > * { background: linear-gradient(#bc9034, #0000 20% 80%, #bc9034), linear-gradient(90deg, #bc9034, #0000 20% 80%, #bc9034), #ffe3a9; } .wizzo .leather > *::before { content: ""; display: block; position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px; background: var(--noise), #241203; } .wizzo #belt > .front::after { content: ""; display: block; position: absolute; height: 0.3em; width: 0.3em; right: 50%; top: -0.05em; transform: translateX(50%); background: linear-gradient(90deg, #bc9034 0.05em, #0000 0.05em), linear-gradient(-90deg, #bc9034 0.05em, #0000 0.05em), linear-gradient(180deg, #bc9034 0.05em, #0000 0.05em), linear-gradient(0deg, #bc9034 0.05em, #0000 0.05em), center left/0.15em 0.05em linear-gradient(90deg, #bc9034, #775b1f) no-repeat; } .wizzo .shine > * { -webkit-mask: linear-gradient(#000 80%, #0000); mask: linear-gradient(#000 80%, #0000); } .wizzo .pants > * { background: center/0.1em 100% linear-gradient(90deg, #0002 50%, #0000 50%), currentColor; } .wizzo .vial.glass > * { color: #fff2; background-image: linear-gradient(0deg, currentColor, #0000 0.05em calc(100% - 0.05em), currentColor), linear-gradient(90deg, currentColor, #0000 0.05em); } .wizzo .vial.liquid { color: #0f88; } .wizzo .vial.liquid.vial2 { color: #0af8; } .wizzo .cork { color: #412d1f; } .wizzo #brows { filter: drop-shadow(0 0 0.02em #000a); } .wizzo #brows::before, .wizzo #brows::after { content: ""; display: block; position: absolute; height: 0.15em; width: 0.4em; background-color: #381d0f; top: 20%; } .wizzo #brows::before { left: 13%; transform-origin: center center; transform: rotate(-5deg); } .wizzo #brows::after { right: 13%; transform-origin: center center; transform: rotate(5deg); } .wizzo #mouth::before { content: ""; display: block; position: absolute; top: 70%; left: 50%; height: 0.38em; width: 0.4em; background-color: #111; -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); border-radius: 50%; transform: translateX(-50%) translateY(-50%); } .wizzo #eyes { position: relative; background: circular-gradient(circle at 20% 13%, red 0.2em, blue 0.2em), circular-gradient(circle at 20% 87%, red 0.2em, blue 0.2em); --eyeDist: 23%; } .wizzo #eyes::before, .wizzo #eyes::after { content: ""; display: block; position: absolute; top: 26%; width: 0.2em; height: 0.2em; background-color: #000; left: var(--eyeDist); border-radius: 100%; -webkit-animation: 5s blink linear infinite alternate; animation: 5s blink linear infinite alternate; } .wizzo #eyes::after { left: unset; right: var(--eyeDist); } .wizzo #nose > .front { filter: brightness(0.86) !important; } .wizzo #staff #crystalPower { -webkit-animation: 10s linear powerRot infinite; animation: 10s linear powerRot infinite; } .wizzo #staff #crystalPower .shine { -webkit-animation: shineBlink 10s infinite; animation: shineBlink 10s infinite; } .wizzo #staff #crystalPower .shine.shine_small { -webkit-animation-delay: -4.3s; animation-delay: -4.3s; } .wizzo #staff #crystalPower .shine.shine_small.shine_2 { -webkit-animation-delay: -6.1s; animation-delay: -6.1s; } .wizzo #staff #crystalPower .shine.shine_2 { -webkit-animation-delay: -2.15s; animation-delay: -2.15s; } @-webkit-keyframes shineBlink { 0%, 50%, 100% { color: #fff2; } 25% { color: #ff600014; } 75% { color: #ffca0026; } } @keyframes shineBlink { 0%, 50%, 100% { color: #fff2; } 25% { color: #ff600014; } 75% { color: #ffca0026; } } @-webkit-keyframes powerRot { 0% { transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(var(--rotZ)); } 100% { transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(calc(var(--rotY) + 360deg)) rotateZ(var(--rotZ)); } } @keyframes powerRot { 0% { transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(var(--rotZ)); } 100% { transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(calc(var(--rotY) + 360deg)) rotateZ(var(--rotZ)); } } @-webkit-keyframes blink { 0%, 90% { -webkit-clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%); clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%); } 92% { -webkit-clip-path: polygon(-10% 56%, 110% 56%, 110% 60%, -10% 60%); clip-path: polygon(-10% 56%, 110% 56%, 110% 60%, -10% 60%); } 94% { -webkit-clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%); clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%); } } @keyframes blink { 0%, 90% { -webkit-clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%); clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%); } 92% { -webkit-clip-path: polygon(-10% 56%, 110% 56%, 110% 60%, -10% 60%); clip-path: polygon(-10% 56%, 110% 56%, 110% 60%, -10% 60%); } 94% { -webkit-clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%); clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, -10% 110%); } } :root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='300' height='300'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.805' numOctaves='10' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.1'/%3E%3C/svg%3E"); --strongNoise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='300' height='300'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.805' numOctaves='10' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); } </style> </head> <body> <div id="app"> <details> <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" :style="'opacity: 1'" @wheel="wheelAction" @touchmove="doDrag" @mousemove="mouseMove" @touchend="stopDrag" @mousedown="mouseDown" @touchstart="startDrag" @mouseup="mouseUp"> <div class="reference" id="scene" :style="{ transform: `translateX(${moveX}px) translateY(${moveY}px)` }"> <div id="space" style="transform: rotateX(-5deg) rotateY(25deg); font-size: calc(7vh + 0.175vw)" :style="{ transform: `rotateX(${angleX}deg) rotateY(${angleY}deg)`, fontSize: `calc(${20 * zoomLevel}vh + ${zoomLevel / 2}vw)` }"> <div class="reference group" id="" style=" --posX: 0em; --posY: -3em; --posZ: 0em; --rotX: 0deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="reference group" id="floor" style=" --posX: -2.5em; --posY: -10em; --posZ: -3em; --rotX: 0deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="cuboid reference _bottom shaded color overflow rocks" id="" style=" --sizeX: 5em; --sizeY: 10em; --sizeZ: 5em; --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 _bottom shaded color overflow rocks" id="" style=" --sizeX: 3em; --sizeY: 11em; --sizeZ: 2em; --posX: -0.5em; --posY: 0em; --posZ: 3.5em; --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> <!-- body positioning group--> <div class="reference group wizzo" id="body_pos" style=" --posX: -1em; --posY: -0.5em; --posZ: -0.5em; --rotX: 0deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <!--body root group--> <div class="reference group" id="body_root" style=" --posX: 1em; --posY: 3em; --posZ: 0.5em; --rotX: 5deg; --rotY: -15deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <!-- head group--> <div class="reference group" id="headGroup" style=" --posX: 0em; --posY: 2.6em; --posZ: 0em; --rotX: 0deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="reference group" id="neckGroup" style=" --posX: 0em; --posY: 0em; --posZ: 0em; --rotX: 8deg; --rotY: 10deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="cuboid reference shaded color skin" id="neck" style=" --sizeX: 0.7em; --sizeY: 0.2em; --sizeZ: 0.7em; --posX: -0.35em; --posY: 0em; --posZ: -0.35em; --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="head" style=" --posX: 0em; --posY: 0.2em; --posZ: 0em; --rotX: 0deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="cuboid reference shaded color overflow skull skin" id="skull" style=" --sizeX: 1.3em; --sizeY: 1.5em; --sizeZ: 1.5em; --posX: -0.65em; --posY: 0em; --posZ: -0.75em; --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="hatGroup" style=" --posX: 0em; --posY: 1.4em; --posZ: 0em; --rotX: 10deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="cone reference color shaded overflow hat clothes" id="" style=" --height: 0.35em; --diameter: 2.8284271247461903em; --radius: 1.4142135623730951em; --dist: 1.0000000000000002em; --detailLevel: 4; --faceWidth: 2em; --posX: -1.4142135623730951em; --posY: 0.35em; --posZ: -1.4142135623730951em; --rotX: 0deg; --rotY: 0deg; --rotZ: 0deg; --coneAngle: 70.70995378081128deg; --faceHeight: 1.0594810050208547em; "> <div class="absolute cone_face" style=" --pos: 1; "></div> <div class="absolute cone_face" style=" --pos: 2; "></div> <div class="absolute cone_face" style=" --pos: 3; "></div> <div class="absolute cone_face" style=" --pos: 4; "></div> </div> <div class="cuboid reference _top color shaded overflow hat clothes" id="" style=" --sizeX: 2em; --sizeY: 0.35em; --sizeZ: 2em; --posX: -1em; --posY: 0em; --posZ: -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="" style=" --posX: 0em; --posY: 0.25em; --posZ: 0em; --rotX: 10deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="cuboid reference _bottom color shaded overflow hat clothes" id="" style=" --sizeX: 1.3em; --sizeY: 0.6em; --sizeZ: 1.4em; --posX: -0.65em; --posY: 0em; --posZ: -0.65em; --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="" style=" --posX: 0em; --posY: 0.35em; --posZ: 0em; --rotX: 20deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="cuboid reference _bottom color shaded overflow hat clothes" id="" style=" --sizeX: 0.8em; --sizeY: 0.6em; --sizeZ: 0.9em; --posX: -0.4em; --posY: 0em; --posZ: -0.4em; --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="" style=" --posX: 0em; --posY: 0.35em; --posZ: 0em; --rotX: 20deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="cuboid reference _bottom color shaded overflow hat clothes" id="" style=" --sizeX: 0.4em; --sizeY: 0.6em; --sizeZ: 0.5em; --posX: -0.2em; --posY: 0em; --posZ: -0.2em; --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="" style=" --posX: 0em; --posY: 0.35em; --posZ: 0em; --rotX: 20deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="cuboid reference _bottom color shaded overflow hat clothes" id="" style=" --sizeX: 0.2em; --sizeY: 0.6em; --sizeZ: 0.2em; --posX: -0.1em; --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> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="reference group" id="hair" style=" --posX: 0em; --posY: 0.2em; --posZ: 0em; --rotX: 0deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="cuboid reference _top shaded color overflow hair" id="" style=" --sizeX: 1.5em; --sizeY: 1.6em; --sizeZ: 0.3em; --posX: -0.75em; --posY: -0.3em; --posZ: -0.75em; --rotX: -14deg; --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 _top shaded color overflow hair" id="" style=" --sizeX: 0.3em; --sizeY: 1.6em; --sizeZ: 1.1em; --posX: -0.7em; --posY: -0.1em; --posZ: -0.6em; --rotX: -8deg; --rotY: 0deg; --rotZ: 13deg; 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 _top shaded color overflow hair" id="" style=" --sizeX: 0.3em; --sizeY: 1.5em; --sizeZ: 1.1em; --posX: 0.4em; --posY: -0.1em; --posZ: -0.6em; --rotX: -8deg; --rotY: 0deg; --rotZ: -13deg; 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 _top shaded color overflow hair" id="" style=" --sizeX: 0.2em; --sizeY: 0.7em; --sizeZ: 0.4em; --posX: 0.5em; --posY: 0.8em; --posZ: 0.5em; --rotX: -9deg; --rotY: 0deg; --rotZ: -23deg; 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 _top shaded color overflow hair" id="" style=" --sizeX: 1.6em; --sizeY: 0.3em; --sizeZ: 0.4em; --posX: -0.9em; --posY: 1.1em; --posZ: 0.4em; --rotX: 0deg; --rotY: -3deg; --rotZ: -8deg; 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="beard" style=" --posX: 0em; --posY: 0.2em; --posZ: 0em; --rotX: 0deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="cuboid reference _top _bottom _back color shaded overflow beard" id="" style=" --sizeX: 1.8em; --sizeY: 0.4em; --sizeZ: 0.4em; --posX: -0.9em; --posY: -0.3em; --posZ: 0.05em; --rotX: 60deg; --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 _back color shaded overflow beard" id="" style=" --sizeX: 1.85em; --sizeY: 0.4em; --sizeZ: 0.5em; --posX: -0.925em; --posY: -0.1em; --posZ: 0.35em; --rotX: -7deg; --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 color shaded overflow beard" id="" style=" --sizeX: 1.7em; --sizeY: 0.9em; --sizeZ: 0.3em; --posX: -0.85em; --posY: -0.8em; --posZ: 0.55em; --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 color shaded overflow beard" id="" style=" --sizeX: 1.4em; --sizeY: 0.5em; --sizeZ: 0.4em; --posX: -0.7em; --posY: -0.9em; --posZ: 0.55em; --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 color shaded overflow contrast beard" id="" style=" --sizeX: 0.2em; --sizeY: 1.2em; --sizeZ: 0.4em; --posX: -0.1em; --posY: -1.1em; --posZ: 0.5em; --rotX: 7deg; --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 _back color shaded overflow beard" id="" style=" --sizeX: 0.77em; --sizeY: 0.15em; --sizeZ: 0.2em; --posX: 0em; --posY: 0.465em; --posZ: 0.65em; --rotX: 10deg; --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 _front color shaded overflow beard" id="" style=" --sizeX: 0.77em; --sizeY: 0.15em; --sizeZ: 0.2em; --posX: 0em; --posY: 0.5em; --posZ: 0.85em; --rotX: 10deg; --rotY: 180deg; --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> </div> <div class="reference group" id="face" style=" --posX: 0em; --posY: 0.2em; --posZ: 0em; --rotX: 0deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="cuboid reference _top _back shaded color overflow skin" id="nose" style=" --sizeX: 0.2em; --sizeY: 0.5em; --sizeZ: 0.2em; --posX: -0.15em; --posY: 0.65em; --posZ: 0.59em; --rotX: 20deg; --rotY: 45deg; --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="plane" id="eyes" style=" --sizeX: 1.5em; --sizeY: 1.5em; --posX: -0.75em; --posY: 0em; --posZ: 0.76em; --rotX: 0deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"></div> <div class="plane color hair" id="brows" style=" --sizeX: 1.5em; --sizeY: 1.5em; --posX: -0.75em; --posY: 0em; --posZ: 0.77em; --rotX: 0deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"></div> <div class="plane" id="mouth" style=" --sizeX: 1.5em; --sizeY: 1.5em; --posX: -0.75em; --posY: 0em; --posZ: 0.76em; --rotX: 0deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"></div> </div> </div> </div> </div> </div> </div> <!-- arms group--> <div class="reference group" id="arms" style=" --posX: 0em; --posY: 2.6em; --posZ: 0em; --rotX: 0deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="reference group" id="leftArmGroup" style=" --posX: 1em; --posY: -0.35em; --posZ: 0em; --rotX: 100deg; --rotY: 0deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="cuboid reference color shaded overflow coat clothes left shoulder" id="leftShoulder" style=" --sizeX: 0.8em; --sizeY: 0.7em; --sizeZ: 0.7em; --posX: 0em; --posY: -0.35em; --posZ: -0.32em; --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="reference group" id="leftArmPos" style=" --posX: 0.35em; --posY: 0em; --posZ: 0em; --rotX: 180deg; --rotY: 0deg; --rotZ: 20deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="reference group" id="leftArm" style=" --posX: 0em; --posY: 0em; --posZ: 0em; --rotX: 0deg; --rotY: 10deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="font-size: 1em"> <div class="cuboid reference _bottom color shaded overflow coat clothes left arm" id="" style=" --sizeX: 0.6em; --sizeY: 1.2em; --sizeZ: 0.6em; --posX: -0.3em; --posY: 0em; --posZ: -0.3em; --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="leftForearmPos" style=" --posX: 0em; --posY: 0em; --posZ: 0em; --rotX: 0deg; --rotY: 180deg; --rotZ: 0deg; font-size: 1em"> <div class="reference" style="fon.........完整代码请登录后点击上方下载按钮下载查看
网友评论0