记一次在vue项目中加入three.js动画的探索过程

接到了一个任务，给PC端登录页面加一个动画

由于将近一年没有接触动画，查了一下，决定先学习一下three.js看能不能实现，若有时间再考虑用原生实现。 由于需要的动画在three.js官网里面有对应的例子，初步打算直接把对应的代码放在项目中 官网中对应的例子的网址是： https://github.com/mrdoob/three.js/blob/master/examples/canvas_particles_waves.html

对应的例子中的关键代码如下

<script src="../build/three.js"></script>

<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/CanvasRenderer.js"></script>

<script src="js/libs/stats.min.js"></script>

复制代码

关键就是对相应的路径下的文件的应用

• 一开始是直接把相应的文件都分别复制了一份放在了项目中，然后直接在项目中的index.html中用script标签引入进来
• 接着在相应的登录页面的.vue文件中放入了下面的代码

var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
			var container, stats;
			var camera, scene, renderer;
			var particles, particle, count = 0;
			var mouseX = 0, mouseY = 0;
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
			init();
			animate();
			function init() {
				container = document.createElement( 'div' );
				document.body.appendChild( container );
				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
				camera.position.z = 1000;
				scene = new THREE.Scene();
				particles = new Array();
				var PI2 = Math.PI * 2;
				var material = new THREE.SpriteCanvasMaterial( {
					color: 0xffffff,
					program: function ( context ) {
						context.beginPath();
						context.arc( 0, 0, 0.5, 0, PI2, true );
						context.fill();
					}
				} );
				var i = 0;
				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
						particle = particles[ i ++ ] = new THREE.Sprite( material );
						particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
						particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
						scene.add( particle );
					}
				}
				renderer = new THREE.CanvasRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );
				stats = new Stats();
				container.appendChild( stats.dom );
				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
				//
				window.addEventListener( 'resize', onWindowResize, false );
			}
			function onWindowResize() {
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}
			//
			function onDocumentMouseMove( event ) {
				mouseX = event.clientX - windowHalfX;
				mouseY = event.clientY - windowHalfY;
			}
			function onDocumentTouchStart( event ) {
				if ( event.touches.length === 1 ) {
					event.preventDefault();
					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					mouseY = event.touches[ 0 ].pageY - windowHalfY;
				}
			}
			function onDocumentTouchMove( event ) {
				if ( event.touches.length === 1 ) {
					event.preventDefault();
					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					mouseY = event.touches[ 0 ].pageY - windowHalfY;
				}
			}
			//
			function animate() {
				requestAnimationFrame( animate );
				render();
				stats.update();
			}
			function render() {
				camera.position.x += ( mouseX - camera.position.x ) * .05;
				camera.position.y += ( - mouseY - camera.position.y ) * .05;
				camera.lookAt( scene.position );
				var i = 0;
				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
						particle = particles[ i++ ];
						particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
							( Math.sin( ( iy + count ) * 0.5 ) * 50 );
						particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 4 +
							( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4;
					}
				}
				renderer.render( scene, camera );
				count += 0.1;
			}
复制代码

此时启动项目，报错信息是THREEunderfind

尝试解决问题

• 在百度上搜索怎么在vue项目中引入three.js，看到的相关案例并不多
• 参考了一下这个网址中的解决方法：https://segmentfault.com/q/1010000011782776
• 用npm安装了three和tween，并在项目中用

    import * as THREE from "three";
    import * as TWEEN from "tween";
复制代码

• 运行项目后报错是

"export 'SpriteCanvasMaterial' (imported as 'THREE') was not found in 'three'
复制代码

• 继续尝试其他方法，相关报错比较多的就是一些模块找不到，毕竟官网的例子的写法应该是不能直接放到自己的项目中
• 尝试各种写法均失败，也尝试向认识的大佬或者朋友们求助，不过大家都没有用过，所以也不知道该怎么解决这个问题
• 只好去iview官网看他是怎么写的，后来继续搜索找到了iview官网的源码
• iview官网源码地址是https://github.com/iview/iview-doc
• 接下来就是找到相应地方的代码然后放在项目中
• 目前效果已经出来了，就是跟iview官网相比不够流畅，总感觉卡卡的，目前正在查看原因