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

尝试以下“Hello world”示例之一：

mrdoob.com

你好世界

于 2012-09-11T20:46:22.513 回答
0

问题在于材料的初始化。看起来您正试图将多种材料映射到圆柱体上。也许您从一个多维数据集示例中获取了这个片段：

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

有问题的“6”适用于立方体，但不适用于圆柱体。我不完全确定圆柱体的阵列结构，但我认为 6 不是用 2500 (50x50) 面创建的圆柱体的正确材料数量。您将不得不研究气缸材料格式。 这是 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 回答