problem description

recently I want to use vue to implement background ion background link description this effect
npm install three
in the vue component import * as THREE from" three "
found good to attract other js

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

    <script src="js/renderers/CanvasRenderer.js"></script>
     https://github.com/mrdoob/three.js/blob/master/examples/canvas_particles_waves.html

related codes

/ / Please paste the code text below (do not replace the code with pictures)
this is my code

<!--  -->
<template>
    <div id="bannerBgc">

   </div>
</template>

<script>
 import * as THREE from "three";

 import CanvasRenderer from "three/examples/js/renderers/CanvasRenderer"

//  var THREE =require("three")
//  import * as THREE from "three/examples/js/renderers/Projector.js";
// import THREELib from "three-js";

// var THREE = THREELib(["CanvasRenderer", "Projector"])
// import "./index.js"

export default {
//    name:" ",

    data () {
        return {

        }
    },

    components: { //

    },

    computed: { //

    },

    methods: { //

    },
    
   mounted:function(){
       console.log("4-mounted ");
               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" );

                console.log(document.getElementById("bannerBgc"))
                document.getElementById("bannerBgc").appendChild( container );
                // 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,
                    // color:0xFF081D47,
                    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 PP ) {
                    for ( var iy = 0; iy < AMOUNTY; iy PP ) {
                        particle = particles[ i PP ] = 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.position.y = 364;
                camera.lookAt( scene.position );
                var i = 0;
                for ( var ix = 0; ix < AMOUNTX; ix PP ) {
                    for ( var iy = 0; iy < AMOUNTY; iy PP ) {
                        particle = particles[ iPP ];
                        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;
            }
   },
  
}
</script>
<style lang="" scoped>

</style>