3d铅笔手写效果
代码语言:html
所属分类:三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sketchpad</title> <style> #mfPreviewBar { display: none !important; } html, body { position: fixed; overflow: hidden; } body { background-color: #f7f4f0; cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/605067/cursor.png"), auto; font-family: 'Galano Grotesque Semi Bold'; margin: 0; overflow: hidden; } button { font-family: 'Galano Grotesque Semi Bold'; } .colours { bottom: 90px; display: none; left: 50%; list-style-type: none; padding-left: 0; position: absolute; transform: translateX(-50%); z-index: 10; } @media (min-width: 1024px) { .colours { display: flex; } } .colours li { border-radius: 50%; display: inline-block; height: 14px; margin: 0 12px; width: 14px; } .colours li:nth-child(1) { background-color: #100c08; } .colours li:nth-child(2) { background-color: #759BA9; } .colours li:nth-child(3) { background-color: #77dd77; } .colours li:nth-child(4) { background-color: #ff6961; } .colours li:nth-child(5) { background-color: #ffd1dc; } .pencil__border { bottom: 0; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; z-index: 3; } .pencil__border div:nth-child(1), .pencil__border div:nth-child(2) { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .pencil__border div:nth-child(1):before, .pencil__border div:nth-child(1):after, .pencil__border div:nth-child(2):before, .pencil__border div:nth-child(2):after { background-color: #FF851B; content: ""; opacity: .98; position: absolute; } .pencil__border div:nth-child(1):before { height: 20px; left: 20px; top: 0; width: 100%; } @media (min-width: 1024px) { .pencil__border div:nth-child(1):before { height: 60px; left: 55px; } } .pencil__border div:nth-child(1):after { bottom: 60px; height: 100%; left: 0; width: 20px; } @media (min-width: 1024px) { .pencil__border div:nth-child(1):after { bottom: 80px; width: 55px; } } .pencil__border div:nth-child(2):before { bottom: 0; right: 20px; height: 60px; width: 100%; } @media (min-width: 1024px) { .pencil__border div:nth-child(2):before { height: 80px; right: 55px; } } .pencil__border div:nth-child(2):after { bottom: 0; height: 100%; right: 0; width: 20px; } @media (min-width: 1024px) { .pencil__border div:nth-child(2):after { bottom: -60px; width: 55px; } } .pencil__border-inner { border: solid 1px #000; border-width: 2px; border-style: solid; bottom: 58px; left: 19px; position: absolute; right: 19px; top: 19px; } @media (min-width: 1024px) { .pencil__border-inner { bottom: 78px; left: 54px; right: 54px; top: 58px; } } .pencil__refresh { background-color: #FCF4EA; border: none; border-radius: 50%; bottom: 18px; cursor: pointer; height: 26px; padding: 4px 1px 0px; position: absolute; left: 50%; text-align: center; transform: translateX(-50%); width: auto; z-index: 3; } @media (min-width: 1024px) { .pencil__refresh { bottom: 27px; left: 80px; transform: none; } } .pencil__submit { bottom: 27px; display: none; position: absolute; right: 80px; z-index: 4; } @media (min-width: 1024px) { .pencil__submit { display: block; } } .btn { background-color: transparent; border: none; cursor: pointer; font-size: 13px; letter-spacing: .15em; outline: none; padding: 5px 10px 1px 10px; text-transform: uppercase; user-select: none; -moz-user-select: none; } </style> </head> <body translate="no"> <ul class="colours"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="pencil__border"> <div></div> <div></div> <div class="pencil__border-inner"></div> </div> <button class="pencil__refresh btn"> Refresh </button> <button class="pencil__submit btn">Save PNG</button> <script src='http://repo.bfw.wiki/bfwrepo/js/jquery.17.js'></script> <script src='http://repo.bfw.wiki/bfwrepo/js/three.js'></script> <script src='http://repo.bfw.wiki/bfwrepo/js/MTLLoader.js'></script> <script src='http://repo.bfw.wiki/bfwrepo/js/OBJLoader.js'></script> <script> // -- Drawing const colors = [ "#100c08", "#759BA9", "#77dd77", "#ff6961", "#ffd1dc"]; let currentColorIndex = 0; let colorButtons = document.querySelectorAll('.colours li'), colorButtonsL = colorButtons.length; for (var x = 0; x < colorButtonsL; x++) { (x => { colorButtons[x].addEventListener('click', () => { setActiveColour(x); }); })(x); } function setActiveColour(x) { currentColorIndex = x; } // -- Drawing const drawingCanvas = document.createElement('canvas'); drawingCanvas.width = window.innerWidth; drawingCanvas.height = window.innerHeight; drawingCanvas.style.position = 'fixed'; drawingCanvas.style.left = 0; drawingCanvas.style.top = 0; drawingCanvas.style.zIndex = 1; document.body.appendChild(drawingCanvas); var drawingCtx = drawingCanvas.getContext('2d'); let isDrawing, newlyUp = false, lastPoint; let pencilPathDefaults = { minThickness: .2, maxThickness: 2 }; let pencilPathCurrent = { thickness: .2 }; let pencilPathTarget = { thickness: .2 }; document.addEventListener('touchstart', handleMouseDown); document.addEventListener('mousedown', handleMouseDown); function handleMouseDown(e) { if (e.target.localName !== 'canvas') return; isDrawing = true; pencilTargetPos.height = 0; pencilTargetPos.heightRotate = .2; pencilPathTarget.thickness = pencilPathDefaults.maxThickness; let xPos = e.touches ? e.touches[0].clientX : e.clientX, yPos = e.touches ? e.touches[0].clientY : e.clientY; let currentPoint = { x: xPos, y: yPos }; drawingCtx.beginPath(); drawingCtx.fillStyle = colors[currentColorIndex]; drawingCtx.globalAlpha = .9; drawingCtx.arc( currentPoint.x + 5, currentPoint.y + 5, pencilPathDefaults.thickness, false, Math.PI * 2, false); drawingCtx.fill(); lastPoint = currentPoint; } document.addEventListener('touchend', handleMouseUp); document.addEventListener('mouseup', handleMouseUp); function handleMouseUp() { newlyUp = true; isDrawing = false; pencilTargetPos.height = pencilDefaultPos.height; pencilTargetPos.heightRotate = 0; pencilPathTarget.thickness = pencilPathDefaults.minThickness; setTimeout(fullyUp, 50); } function fullyUp() { newlyUp = false; } // -- Pencil // Renderer var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, autoClear: true }); renderer.setClearColor(0x000000, 0); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.domElement.style.zIndex = 5; renderer.domElement.style.position = 'relative'; renderer.domElement.style.pointerEvents = 'none'; document.body.appendChild(renderer.domElement); // Ensure Full Screen on Resize function fullScreen() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } window.addEventListener('resize', fullScreen, false); // Scene var scene = new THREE.Scene(); // Lighting let hemiLight, dirLight; function createLights() { hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6); hemiLight.color.setHSL(0.6, 1, 0.2); hemiLight.groundColor.setHSL(0.095, 1, 0.75); hemiLight.position.set(0, 0, 50); scene.add(hemiLight); hemiLightHelper = new THREE.HemisphereLightHelper(hemiLight, 10); // scene.add( hemiLightHelper ) directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.color.setHSL(1, 1, 1); directionalLight.position.set(-.5, 1, 10); scene.add(directionalLight); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 10); // scene.add( directionalLightHelper ) spotLight = new THREE.SpotLight(0xffffff, 0.4); spotLight.color.setHSL(1, 1, 1); spotLight.position.set(-7, 1, 2); scene.add(sp.........完整代码请登录后点击上方下载按钮下载查看
网友评论0