three实现360度全景视觉差异页面滚动效果代码
代码语言:html
所属分类:视觉差异
代码描述:three实现360度全景视觉差异页面滚动效果代码,鼠标滚动页面,发现背景图也在360度全景旋转。
代码标签: three 360度 全景 视觉 差异 页面 滚动
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Asap&display=swap"); * { margin: 0; padding: 0; } html, body { overscroll-behavior-x: none; overscroll-behavior-y: none; } html { font-size: max(18px, 2.5vw); } body { font-family: "Asap", sans-serif; position: relative; top: 0; left: 0; width: 100vw; min-height: 100vh; text-align: center; color: white; overflow-x: hidden; } a { color: white; } #container { position: relative; z-index: 0; } canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; margin: 0; padding: 0; } section { position: relative; display: flex; align-items: center; justify-content: center; width: 100vw; min-height: 100vh; margin: 3vw 0; z-index: 1; } h1, h2 { filter: drop-shadow(0 0 2px black); } h1 { font-size: 2rem; } h2 { margin: 1rem 0; } .sample_wrap { margin: 3rem 0; } .sample_img { display: inline-block; margin: 0 1rem; } .img { width: 35vw; height: auto; margin: 1rem 0; border: 3px solid white; } #arrow { position: absolute; bottom: 2vh; left: 0; right: 0; font-size: 20vmin; filter: drop-shadow(0 0 1px black); transform-origin: center center; transform: rotate(90deg); -webkit-animation: arrow 0.8s 0s ease infinite; animation: arrow 0.8s 0s ease infinite; } @-webkit-keyframes arrow { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes arrow { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } </style> </head> <body> <div id="container"></div> <section> <div> <h1>Parallax Skybox</h1> <p> - three.js - </p> <p id='arrow'>»</p> </div> </section> <section> <div id="info"> <h2>Reference & Texture</h2> <p><a href="" target="_blank" rel="noopener">three.js - panorama with depth</a></br> Created by <a href="" target="_blank" rel="noopener">@juniorxsound</a>.</p> <p> Panorama from <a href="" target="_blank" rel="noopener">krpano</a>.</p> <div class="sample_wrap"> <div class="sample_img"> <p>Panorama image</p> <img src="//repo.bfw.wiki/bfwrepo/images/360/kandao3.jpg" class="img" /> </div> <div class="sample_img"> <p>Depth map</p> <img src="//repo.bfw.wiki/bfwrepo/images/360/kandao3_depthmap.jpg" class="img" /> </div> </div> </div> </section> <section> <p>@wakana-k</p> </section> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.2.js"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/154/three.module.js" } } </script> <script type="module"> /* three.js - Parallax Skybox */ "use strict"; const img_base = "//repo.bfw.........完整代码请登录后点击上方下载按钮下载查看
网友评论0