Question

我尝试创建具有随机移动和大小的浮动球体，以便创建类似这样的图片：

但是现在我创建的球体移动方向相同，动态相同，并且它们具有相同的大小，

这是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js canvas - particles - waves</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                background-color: #ffffff;
                margin: 0px;
                overflow: hidden;
            }

            a {
                color:#0078ff;
            }
        </style>
    </head>
    <body>
        <script src="js/three.min.js"></script>

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

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

        <script>

            var SEPARATION = 8, AMOUNTX = 4, AMOUNTY = 3;

            var container, stats;
            var camera, scene, renderer;

            var particles, particle, count = 0;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

      var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
      var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

            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 = 20;

                var sphereRand = Math.random() * 4 - 1;
                scene = new THREE.Scene();

                var material = new THREE.MeshPhongMaterial( {color: 0x000000, specular: 0x333333, shininess: 100 } );
                console.log(material);

        var light = new THREE.DirectionalLight( 0x333333 );
        light.position.set( 1000, 1000, 1000 ).normalize();
        scene.add(light);
        console.log(light);

        var cube = new THREE.Mesh(geometry, material);
                particles = new Array();
                var PI2 = Math.PI * 2;
                var i = 0;
                for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
                    for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
                        var geometry = new THREE.SphereGeometry(3, 50, 50, 10, Math.PI * 2, 0, Math.PI * 2);
                        particle = particles[ i ++ ] = new THREE.Mesh(geometry, material);
                        particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
                        particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
                        scene.add( particle );
                    }
                }

                renderer = new THREE.WebGLRenderer({alpha: true});
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );
                stats = new Stats();
                container.appendChild( stats.dom );
                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 animate() {
                requestAnimationFrame( animate );
                render();
                stats.update();
            }

            function render() {


                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 ) * 1 ) +
                            ( Math.sin( ( iy + count ) * 0.5 ) * 2 );
                    }
                }
                renderer.render( scene, camera );
                count += 0.1;
            }

        </script>
    </body>
</html>

三个js随机球体大小和运动

0 个答案: