-2 
var container, stats;
            var camera, scene, renderer;
            var arr = new Array();
            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( 70, window.innerWidth / window.innerHeight, 1, 10000 );
                camera.position.z = 1000;

                scene = new THREE.Scene();

                var geometry = new THREE.CubeGeometry( 10, 10, 10 );

                for ( var i = 0; i < geometry.faces.length; i ++ ) 
                {

                    geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );

                }

                var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } );

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

                    arr[i] = new THREE.Mesh( geometry, material );

                    arr[i].position.set( Math.random() * scale, Math.random() * scale, Math.random() * scale ); 
                    scene.add( arr[i] );

                }

                renderer = new THREE.CanvasRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );

                container.appendChild( renderer.domElement );

                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                container.appendChild( stats.domElement );              
                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() 
            {               
                renderer.render( scene, camera );

            }

私の意図は、forループで提供された数に基づいて、ビュースペース全体にキューブの数を配置することでした。しかし、それはここでは機能しないようで、実際には空白の白い画面全体が表示されます。左上隅にfpsも表示されませんでした。誰か助けてください。

4

1 に答える 1

2

デバッガーの使用方法を学習するか、コンソールでエラーを検査する必要があります。

変数を宣言して値scaleを割り当てる必要があります。

var scale = 500;

次のように、Stats ライブラリも含める必要があります。

<script src="Stats.js"></script>

急いで助けを求めないでください。あなたが学ぶための多くの例があります。

于 2012-11-09T19:38:20.193 に答える