Three.js渲染不起作用

Question

我正在尝试创建一个随机粒子系统并使用线将它们连接在一起，我没有得到任何错误，但我也没有得到任何结果，这是我的代码：

//---------- Core

$(window).load(function () {

    CanvasDraw();
    animate();
});

//-------------------- Canvas (WebGL)

var camera, scene, renderer;

function CanvasDraw() {


    //--------------- Setting The App

    var mouseX = 0, mouseY = 0,

    windowHalfX = window.innerWidth / 2,
    windowHalfY = window.innerHeight / 2,

    container, particle, line,

    PI2 = Math.PI * 2,

    geometry = new THREE.Geometry();


        container = document.getElementById("container");

        camera = new THREE.PerspectiveCamera( 75, container.offsetWidth / container.offsetHeight, 1, 10000 );
        camera.position.set( 0, 0, 100 );

        scene = new THREE.Scene();

        function webglAvailable() {

            try {

                var canvas = $('canvas');

                return !!( window.WebGLRenderingContext && (

                canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) )

                );

                } catch ( e ) {

                    return false;
                }
       }


               if ( webglAvailable() ) {

                  renderer = new THREE.WebGLRenderer({antialias:true});

                  } else {

                         renderer = new THREE.CanvasRenderer();

                         }

               renderer.setSize( container.offsetWidth, container.offsetHeight );

               container.appendChild( renderer.domElement );

    //--------------- Drawing

        //--------------- Particles

               var Pmaterial = new THREE.SpriteCanvasMaterial( {

                    color: 0x000000,
                    program: function ( context ) {

                        context.beginPath();
                        context.arc( 0, 0, 0.4, 0, PI2, true );
                        context.fill();

                    }

                } );

               particle = new THREE.Particle( Pmaterial );

               for ( var i = 0; i < 400; i ++ ) {

                    particle.position.x = Math.random() * 2 - 1;
                    particle.position.y = Math.random() * 2 - 1;
                    particle.position.z = Math.random() * 2 - 1;

                    particle.position.normalize();

                    particle.position.multiplyScalar( Math.random() * 10 + 800 );

                    particle.scale.x = particle.scale.y = 3;

                    geometry.vertices.push( particle.position );

                    scene.add( particle );

               }   

       //--------------- Lines

                var Lmaterial = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );

                line = new THREE.Line( geometry, Lmaterial );

                scene.add( line );

}

            function animate() {

                requestAnimationFrame( animate );

                render();

            }

            function render() {

                renderer.render( scene, camera );

            }

我是three.js的新手，我完全按照我在其中一个例子中看到的那样做，请建议，

感谢。