three实现三维立体炫酷相册交互效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维立体炫酷相册交互效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <style> html, body, body:after, canvas { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } /* stay put when ios tries to elastic scroll */ canvas, body:after { position: fixed; top: 0; left: 0; } body:after { content: ''; z-index: -1; background: #a9a89b; background: linear-gradient(45deg, #a9a89b, #76766d) } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script> <script > const albumArt = '//repo.bfw.wiki/bfwrepo/image/5ef9ef9fbf5b0.png'; class App { constructor() { this._bg = 0xa9a89b; this._bind('_render', '_resize'); this._setup(); this._createScene(); window.addEventListener('resize', this._resize); } _bind(...methods) { methods.forEach(method => this.........完整代码请登录后点击上方下载按钮下载查看
网友评论0