three打造三维冰淇淋球效果
代码语言:html
所属分类:三维
代码描述:three打造三维冰淇淋球效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .p-text { color: #fffffd; font-family: Helvetica, Arial, sans-serif; line-height: 1.5; text-align: center; text-transform: lowercase; } .p-flex-hzt-center { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; } body { height: 100vh; background-color: hotpink; margin: 0; padding: 0; overflow: hidden; } .loader { width: 100%; height: 100%; font-size: 0.6rem; letter-spacing: 3px; position: absolute; top: 0; left: 0; z-index: 120; -webkit-box-align: center; align-items: center; } .loader span { font-size: 1rem; } .toggle { width: 100%; position: absolute; bottom: 20px; left: 0; z-index: 90; } .toggle__btn { background-color: hotpink; border: 1px solid #fffffd; cursor: pointer; font-size: 0.55rem; letter-spacing: 2px; outline: none; padding: 5px 13px; -webkit-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .toggle__btn:last-child { border-left: 0; } .toggle__btn[data-active] { background-color: #fffffd; color: hotpink; font-weight: bold; } .credit { width: 100%; color: rgba(255, 255, 253, 0.15); font-size: 0.5em; letter-spacing: 2px; position: absolute; bottom: 3px; left: 0; } </style> </head> <body translate="no"> <div class="loader p-text p-flex-hzt-center" id="canvas-loader"> <p> <span>🍦</span><br />Loading </p> </div> <div id="canvas-wrapper" aria-label="ice cream world"></div> <div class="toggle p-flex-hzt-center" id="canvas-toggle"> <button class="toggle__btn p-text" type="button" data-mode="multicolored" data-active="true">multicolored</button> <button class="toggle__btn p-text" type="button" data-mode="monochrome">monochrome</button> </div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.109.js"></script> <script > /* * ICE CREAM WORLD * Made with ThreeJS - Enjoy! * * Use cursor to move around the space. * On mobile touch + drag screen. * * Press buttons to change the world's flavor: multicolored vs. monochrome pink <3. * * Have any performance tips on this code? I'm all ears! * * Art assets are a remix by me from an original photo by Dids - https://www.pexels.com/@didsss * * #044 - #100DaysOfCode * By ilithya | 2020 * https://www.ilithya.rocks/ * https://twitter.com/ilithya_net */ // CREATE LOADER let loadingManager = null; let ASSETS_LOADED = false; const loadingScreen = { scene: new THREE.Scene(), camera: new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 100), removeText() { const loadingText = document.querySelector("#canvas-loader"); if (loadingText.parentNode) { loadingText.parentNode.removeChild(loadingText); } } }; // CREATE RENDERED WORLD const nearDist = 1; const farDist = 1000; const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, nearDist, farDist); const scene = new THREE.Scene(); const renderer = new THREE.WebGLRenderer({ antialias: true }); const canvasWrapper = document.querySelector("#canvas-wrapper"); const init = () => { // Initialize loader loadingManager = new THREE.LoadingManager(); loadingManager.onLoad = () => { loadingScreen.removeText(); ASSETS_LOADED = true; }; // Initialize rendered world camera.position.set(0, 0, 220); renderer.setClearColor(".........完整代码请登录后点击上方下载按钮下载查看
网友评论0