0 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3d cylinder</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 {
                font-family: Monospace;
                background-color: #f0f0f0;
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <script src="three.min.js" type="text/javascript"></script>

        <script src="Stats.js" type="text/javascript"></script>

        <script>

            var container, stats;

            var camera, scene, renderer;

            var cylinder;

            var targetRotation = 0;
            var targetRotationOnMouseDown = 0;

            var mouseX = 0;
            var mouseXOnMouseDown = 0;

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

            init();         

            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                var info = document.createElement( 'div' );
                info.style.position = 'absolute';
                info.style.top = '10px';
                info.style.width = '100%';
                info.style.textAlign = 'center';                
                container.appendChild( info );              

                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.y = 150;
                camera.position.z = 500;

                scene = new THREE.Scene();

                // cylinder
                var materials = [];
                for ( var i = 0; i < 6; i ++ ) {

                    materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );

                }
                cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 400, 50, 50, false), materials);
                    cylinder.overdraw = true;
                    scene.add(cylinder);

                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 );

            }

        </script>

    </body>
</html>

次のコードで、HTML5 と three.js を使用して 3D シリンダーを描画しようとしています。Canvas レンダリングを使用して、Google Chrome ブラウザでテストしています。コンソールでは、「Three.CanvasRenderer 50」が表示されます。何が原因で、このメッセージの意味は何ですか?

4

2 に答える 2

0

問題は、材料の初期化にあります。複数のマテリアルを円柱にマッピングしようとしているようです。おそらく、キューブの例からこのスニペットを取得しました。

var materials = [];
for ( var i = 0; i < 6; i ++ ) {
    materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
}

問題の「6」は立方体には適していますが、円柱には正しくありません。円柱の配列構造は完全にはわかりませんが、2500（50x50）面で作成された円柱の材料の数は6ではないと思います。円柱の材料フォーマットを調査する必要があります。 これがあなたが始めるためのgithubに関する議論です。

これを行うことによって：

cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 400, 10, 10, false), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ));
cylinder.overdraw = true;
scene.add(cylinder);

シリンダーが見えるはずです。

シーンにカメラを追加する必要があることに注意してください。

scene.add( camera );
于 2012-09-11T23:28:06.957 に答える
0

次の「Hello world」の例のいずれかを試してください。

mrdoob.com

ハローワールド

于 2012-09-11T20:46:22.513 に答える