Received a task to add an animation to the PC login page

Since I have not been in touch with animation for nearly a year, I checked it and decided to learn three.js first to see if it can be implemented. If there is time, I will consider using native implementation. As there are corresponding examples of animation required on the official website of three.js, we initially plan to directly put the corresponding codes in the project. The website of the corresponding examples on the official website is: https://github.com/mrdoob/three.js/blob/master/examples/canvas_particles_waves.html

The key code in the corresponding example is as follows

<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>

Copy the code

The key is to apply the files in the corresponding path

  • At first, the corresponding files were directly copied into the project, and then directly into the projectindex.htmlusingscriptTags come in
  • Then in the corresponding login page.vueThe following code is placed in the file
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(); 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++ ]; Y = (math. sin((ix + count) * 0.3) * 50) + (math. sin((iy + count) * 0.5) * 50)); Y = (Math. Sin ((ix + count) * 0.3) * 4 + (Math. Sin ((iy + count) * 0.5)) + 1) * 4; } } renderer.render( scene, camera ); Count + = 0.1; }Copy the code

At this point, the project starts and the error message is THREEunderfind

Try to solve the problem

  • Search on BaiduHow to introduce three.js in vue projectI haven’t seen many related cases
  • Take a look at the solution in this website:https://segmentfault.com/q/1010000011782776
  • Installed with NPMthreeandtweenAnd used in the project
    import * as THREE from "three";
    import * as TWEEN from "tween";
Copy the code
  • An error is reported after running the project
"export 'SpriteCanvasMaterial' (imported as 'THREE') was not found in 'three'
Copy the code
  • Continue to try other methods, related errors are more often found in some modules, after all, the example on the official website should not be directly put into their own projects
  • Try all kinds of writing methods failed, also try to know the big guy or friends for help, but we have not used, so do not know how to solve this problem
  • Had to go to iView official website to see how he wrote, and then continue to search to find the source of iView official website
  • Iview official website source address ishttps://github.com/iview/iview-doc
  • The next step is to find the code in place and put it in the project
  • At present, the effect has been out, but it is not smooth enough compared with the iView official website, I always feel that Kaka, now I am checking the reason