three实现文字悬浮磁吸排斥扭曲效果代码
代码语言:html
所属分类:悬停
代码描述:three实现文字悬浮磁吸排斥扭曲效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); html, body { margin: 0; height: 100%; overflow: hidden; font-family: 'Roboto' !important; color: white; font-size: 9px; } #magic { position: fixed; width: 100%; height: 100vh; display: block; top: 0; left: 0; z-index: -9999; } .playground{ position: fixed; width: 100%; height: 100vh; display: block; top: 0; left: 0; display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: flex-end; align-items: center; } .bottomPosition{ text-align: center; margin-bottom: 50px; } .minText{ font-size: 14px; } a { color: white; font-size: 12px; text-decoration: none; } .logo { width: 50px; height: 50px; } </style> </head> <body> <!-- partial:index.partial.html --> <script type="x-shader/x-vertex" id="vertexshader"> attribute float size; attribute vec3 customColor; varying vec3 vColor; void main() { vColor = customColor; vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); gl_PointSize = size * ( 300.0 / -mvPosition.z ); gl_Position = projectionMatrix * mvPosition; } </script> <script type="x-shader/x-fragment" id="fragmentshader"> uniform vec3 color; uniform sampler2D pointTexture; varying vec3 vColor; void main() { gl_FragColor = vec4( color * vColor, 1.0 ); gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); } </script> <div id="magic"></div> <!-- partial --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script> <script > const preload = () => { let manager = new THREE.LoadingManager(); manager.onLoad = function() { const environment = new Environment( typo, particle ); } var typo = null; const loader = new THREE.FontLoader( manager ); const font = loader.load('//repo.bfw.wiki/bfwrepo/json/font_zsd4dr.json', function ( font ) { typo = font; }); const particle = new THREE.TextureLoader( manager ).load( '//repo.bfw.wiki/bfwrepo/images/particle_a64uzf.png'); } if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) preload (); else document.addEventListener("DOMContentLoaded", preload ); class Environment { constructor( font, particle ){ this.font = font; this.particle = particle; this.container = document.querySelector( '#magic' ); this.scene = new THREE.Scene(); this.createCamera(); this.createRenderer(); this.setup() this.bindEvents(); } bindEvents(){ window.addEventListener( 'resize', this.onWindowResize.bind( this )); } setup(){ this.createParticles = new CreateParticles( this.scene, this.font, this.particle, this.camera, this.renderer ); } render() { this.createParticles.render() this.renderer.render( this.scene, this.camera ) } createCamera() { this.camera = new THREE.PerspectiveCamera( 65, this.container.clientWidth / this.container.clientHeight, 1, 10000 ); this.camera.position.set( 0,0, 100 ); } createRenderer() { this.renderer = new THREE.WebGLRenderer(); this.renderer.setSize( this.container.clientWidth, this.container.clientHeight ); this.renderer.setPixelRatio( Math.min( window.devicePixelRatio, 2)); this.renderer.outputEncoding = THREE.sRGBEncoding; this.container.appendChild( this.renderer.domElement ); this.renderer.setAnimationLoop(() => { this.render() }) } onWindowResize(){ this.camera.aspect = this.container.clientWidth / this.container.clientHeight; this.camera.updateProjectionMatrix();.........完整代码请登录后点击上方下载按钮下载查看
网友评论0