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(); this.renderer.setSize( this.container.clientWidth, this.container.clientHeight ); } } class CreateParticles { constructor( scene, font, particleImg, camera, renderer ) { this.scene = scene; this.font = font; this.particleImg = particleImg; this.camera = camera; this.renderer = renderer; this.raycaster = new THREE.Raycaster(); this.mouse = new THREE.Vector2(-200, 200); this.colorChange = new THREE.Color(); this.buttom = false; this.data = { text: 'FUTURE\nIS NOW', amount: 1500, particleSize: 1, particleColor: 0xffffff, textSize: 16, area: 250, ease: .05, } this.setup(); this.bindEvents(); } setup(){ const geometry = new THREE.PlaneGeometry( this.visibleWidthAtZDepth( 100, this.camera ), this.visibleHeightAtZDepth( 100, this.camera )); const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, transparent: true } ); this.planeArea = new THREE.Mesh( geometry, material ); this.planeArea.visible = false; this.createText(); } bindEvents() { document.addEventListener( 'mousedown', this.onMouseDown.bind( this )); document.addEventListener( 'mousemove', this.onMouseMove.bind( this )); document.addEventListener( 'mouseup', this.onMouseUp.bind( this )); } onMouseDown(){ this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; const vector = new THREE.Vector3( this.mouse.x, this.mouse.y, 0.5); vector.unproject( this.camera ); const dir = vector.sub( this.camera.position ).normalize(); const distance = - this.camera.position.z / dir.z; this.currenPosition = this.camera.position.clone().add( dir.multiplyScalar( distance ) ); const pos = this.particles.geometry.attributes.position; this.buttom = true; this.data.ease = .01; } onMouseUp(){ this.buttom = false; this.data.ease = .05; } onMouseMove( ) { this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; this.mouse.y = - ( event.clientY / window.inne.........完整代码请登录后点击上方下载按钮下载查看
网友评论0