three实现图片转led像素显示效果代码
代码语言:html
所属分类:三维
代码描述:three实现图片转led像素显示效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hind:wght@400;700&display=swap"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320)); --buttonBg: #2762f3; --buttonHoverBg: #0c48db; --formBg: #fff; --inputBorder: #abafba; --inputBg: #fff; --inputDisableBg: #e3e4e8; --pColor: #17181c; --toggleBg: #e3e4e8; --toggleBgHover: #c7cad1; } body, button, input { color: var(--pColor); font: 1em/1.5 "Hind", system-ui, -apple-system, sans-serif; } body { overflow: hidden; } aside, button, input, .upload-btn input[type=file] { width: 100%; } aside, input[name=toggle] { position: fixed; left: 0; } aside { background: var(--formBg); bottom: 0; transform: translateY(calc(100% - 1.5em)); transition: transform 0.2s ease-in; } form { padding: 1.5em 1.5em 0 1.5em; } button, input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } button, input[type=file], .toggle-btn { cursor: pointer; } button:hover, button:focus, input[type=file]:hover + button, input[type=file]:focus + button { background: var(--buttonHoverBg); } button { background: var(--buttonBg); border-radius: 0.375em; color: #fff; display: block; margin-bottom: 1.5em; padding: 0.75em 1em; transition: background 0.1s linear; } input, label, .toggle-btn:before { display: block; } input, input[type=file] + button, .upload-btn { margin-bottom: 0.75em; } input { background: var(--inputBg); border-radius: 0.25em; box-shadow: 0 0 0 1px var(--inputBorder) inset; padding: 0.375em; } input:disabled { background: var(--inputDisableBg); cursor: not-allowed; text-overflow: ellipsis; } input[name=toggle] { top: -1.5em; } input[name=toggle]:checked + aside { transform: translateY(0); } label { font-weight: bold; } canvas { cursor: move; } .toggle-btn, .upload-btn { position: relative; } .toggle-btn:before, .upload-btn input[type=file] { position: absolute; } .toggle-btn { background: var(--toggleBg); text-align: center; } .toggle-btn:before { content: ""; top: 33%; left: calc(50% - 0.5em); width: 0; height: 0; border-left: 0.5em solid transparent; border-right: 0.5em solid transparent; border-bottom: 0.5em solid; } input[name=toggle]:checked + aside .toggle-btn:before { border-top: 0.5em solid; border-bottom: 0; } .toggle-btn:hover, input[name=toggle]:focus + aside .toggle-btn { background: var(--toggleBgHover); } .upload-btn, .sr { overflow: hidden; } .upload-btn input[type=file] { padding-top: 2.5em; opacity: 0; top: 0; left: 0; height: 3em; } .sr { display: inline-block; width: 1px; height: 1px; } /* Queries */ @media screen and (min-width: 768px) { aside { width: 20em; } } @media (prefers-color-scheme: dark) { :root { --formBg: #3a3d46; --inputBg: #2e3138; --inputDisableBg: #2e3138; --inputBorder: #2e3138; --pColor: #e3e4e8; --toggleBg: #17181c; --toggleBgHover: #0c0c0e } } </style> </head> <body > <input type="checkbox" id="toggle" name="toggle" value="Toggle Image Panel" checked=""> <aside> <label class="toggle-btn" for="toggle"> <span class="sr">Toggle Image Panel</span> </label> <form action=""> <label for="img_upload">Image</label> <div class="upload-btn"> <input id="img_upload" name="img_upload" type="file" accept="image/*"> <button type="button" for="img_upload" tabindex="-1">Upload</button> <input id="img_name" name="img_name" type="text" placeholder="lock.jpg" disabled=""> </div> <button name="reset_camera" type="button">Reset Camera</button> </form> </aside><canvas width="422" height="448" style="display: block; width: 338px; height: 359px;"></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/BufferGeometryUtils.js"></script> <script > window.addEventListener("DOMContentLoaded",app); function app() { let form = document.forms[0], imgUpload = document.getElementsByName("img_upload")[0], imgName = document.getElementsByName("img_name")[0], resetCamBtn = document.getElementsByName("reset_camera")[0], canvas = document.createElement("canvas"), c = canvas.getContext("2d"), scene, renderer, camera, camControls, img = null, screenLCD, // be careful; attempting to increase these will result in lag tvWidth = 40, tvHeight = 30, adjustWindow = () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth,window.innerHeight); }, buildScreen = () => { return new Promise((resolve,reject) => { let channelProtoGeo =.........完整代码请登录后点击上方下载按钮下载查看
网友评论0