vue 如何引用threejs

Question

问题描述

最近使用vue想引用threejs 实现背景离子背景链接描述这个效果
npm install three
在vue的组件 import * as THREE from “three”
在用的时候 发现好要引其他的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

链接描述

    
    这两个js 怎么在vue的组件中引用呢？
    

问题出现的环境背景及自己尝试过哪些方法

    尝试过些方法都不行！

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
这是我的代码

<!--  -->
<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 ++ ) {
                    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.position.y = 364;
                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;
            }
   },
  
}
</script>
<style lang='' scoped>

</style>

Answer 1

官网都有的 仔细看看
不同引入方式

文档=>