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[method] = this[method].bind(this)); } _setup() { const renderer = this._renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); const scene = this._scene = new THREE.Scene(); scene.fog = new THREE.Fog(this._bg, 100, 190); const camera = this._camera = new MovePerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 120); } _createScene() { const scene = this._scene; const light = new THREE.PointLight(0xffffff); light.position.set(100, 100, 200); scene.add(light); const frags = this._frags = new FragmentPlanes(albumArt); scene.add(frags); } _render() { const camera = this._camera; const frags = this._frags; const renderer = this._renderer; const scene = this._scene; renderer.render(scene, camera); camera._update(); frags._update(); requestAnimationFrame(this._render); } _resize(e) { const renderer = this._renderer; c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0