Question

<!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渲染并在谷歌浏览器上测试它。在控制台上它显示出“Three.CanvasRenderer 50”。可能是什么原因以及此消息的含义是什么？

Answer 1

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

mrdoob.com

Hello worlds

Answer 2

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

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

有问题的'6'适用于立方体，但对于圆柱不正确。我不完全确定圆柱体的阵列结构，但我认为6不是用2500（50x50）面创建的圆柱体的正确材料数量。您将不得不研究气缸材料的格式。 Here is a discussion on 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 );

HTML 5和three.js代码不会在网页上显示任何内容

2 个答案: