三.js - 无法创建圆柱体

Question

I'm trying to create a Cylinder but with no success.我正在尝试创建一个 Cylinder，但没有成功。 This is my code:这是我的代码：

geometry02 = new THREE.CylinderGeometry( 20, 100, 100, 1000 );
material02 = new THREE.MeshBasicMaterial({color: 0x0000ff});
cylinder02 = new THREE.Mesh( geometry02, material02 );
cylinder02.position.x = 300;
scene.addObject( cylinder02 );

Am I forgetting to include something?我忘记包括什么了吗？

Answer 1

There is nothing wrong with the snippet you just posted.您刚刚发布的代码段没有任何问题。 I can confirm it runs ok if I paste in an example.如果我粘贴一个例子，我可以确认它运行正常。

Make sure that:确保：

There aren't any javascript errors (check your browser's Console)没有任何 javascript 错误（检查浏览器的控制台）
The camera is pointing in the right direction (as anshulkatta mentions, camera.lookAt(yourObject); is a good way to do that)相机指向正确的方向（正如 anshulkatta 提到的， camera.lookAt(yourObject);是一个很好的方法）
Your model's position/scale has decent values/is within the camera's frustrum/visible area您的模型的位置/比例具有合适的值/在相机的视锥/可见区域内

As a side note, you might want to decrease the segmentsRadius parameter(1000) to a smaller value.作为旁注，您可能希望将 segmentRadius 参数（1000）减小到较小的值。 You might get a similar look/level detail with less vertices/faces.您可能会使用较少的顶点/面获得类似的外观/级别细节。

Answer 2

Please try below code请尝试以下代码

<!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 src="Detector.js" type="text/javascript"></script>

        <script>
            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            var container, stats;

            var camera, scene, renderer, light;

            var cylinder, line, geometry;

            var targetRotation = 0;
            var targetRotationOnMouseDown = 0;

            var mouseX = 0;
            var mouseXOnMouseDown = 0;

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

            init();                     
            animate();

            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';
                //info.innerHTML = 'Drag to spin the cylinder';
                container.appendChild( info );

                // camera

                camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
            camera.position.y = 100;
            camera.position.z = 800;

                // scene

                scene = new THREE.Scene();

                // light

                scene.add( new THREE.AmbientLight( 0x404040 ) );

                light = new THREE.DirectionalLight( 0xffffff );
                light.position.set( 0, 1, 0 );
                scene.add( light );

                // texture

                var map = THREE.ImageUtils.loadTexture( 'ash_uvgrid01.jpg' );
                map.wrapS = map.wrapT = THREE.RepeatWrapping;
                map.anisotropy = 16;

                materials = [
                    new THREE.MeshLambertMaterial( { ambient: 0xbbbbbb, map: map, side: THREE.DoubleSide } ),
                    new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side:                                     THREE.DoubleSide } )
                ];

                // Grid

                geometry = new THREE.Geometry();
                geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
                geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );

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

                    line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                    line.position.z = ( i * 50 ) - 500;
                    scene.add( line );

                    line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                    line.position.x = ( i * 50 ) - 500;
                    line.rotation.y = 90 * Math.PI / 180;
                    scene.add( line );

                }

                // cylinder

                cylinder = THREE.SceneUtils.createMultiMaterialObject( new THREE.CylinderGeometry( 50, 50, 200, 25, 10, false ), materials );
                cylinder.overdraw = true;
                scene.add(cylinder);


                // renderer

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

                // stats

                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                container.appendChild( stats.domElement );

                document.addEventListener( 'mousedown', onDocumentMouseDown, false );
                document.addEventListener( 'touchstart', onDocumentTouchStart, false );
                document.addEventListener( 'touchmove', onDocumentTouchMove, false );               

                window.addEventListener( 'resize', onWindowResize, false );

            }

            function onWindowResize() {

                camera.left = window.innerWidth / - 2;
                camera.right = window.innerWidth / 2;
                camera.top = window.innerHeight / 2;
                camera.bottom = window.innerHeight / - 2;
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function onDocumentMouseDown( event ) {

                event.preventDefault();

                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                document.addEventListener( 'mouseup', onDocumentMouseUp, false );
                document.addEventListener( 'mouseout', onDocumentMouseOut, false );

                mouseXOnMouseDown = event.clientX - windowHalfX;
                targetRotationOnMouseDown = targetRotation;

            }

            function onDocumentMouseMove( event ) {

                mouseX = event.clientX - windowHalfX;

                targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

            }

            function onDocumentMouseUp( event ) {

                document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

            }

            function onDocumentMouseOut( event ) {

                document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

            }

            function onDocumentTouchStart( event ) {

                if ( event.touches.length === 1 ) {

                    event.preventDefault();

                    mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
                    targetRotationOnMouseDown = targetRotation;

                }

            }

            function onDocumentTouchMove( event ) {
                if ( event.touches.length === 1 ) {
                    event.preventDefault();
                    mouseX = event.touches[ 0 ].pageX - windowHalfX;
                    targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
                }
            }

            function animate() {
                requestAnimationFrame( animate );
                render();
                stats.update();

            }

            function render() {             
                cylinder.rotation.y += ( targetRotation - cylinder.rotation.y ) * 0.05;
                renderer.render( scene, camera );               
            }           


        </script>

    </body>
</html>

三.js - 无法创建圆柱体

问题描述

2 个解决方案

解决方案1
7 已采纳 2011-11-28 12:30:45

解决方案2
0 2012-09-12 07:19:37

三.js - 无法创建圆柱体

问题描述

2 个解决方案

解决方案1 7 已采纳 2011-11-28 12:30:45

解决方案2 0 2012-09-12 07:19:37

解决方案1
7 已采纳 2011-11-28 12:30:45

解决方案2
0 2012-09-12 07:19:37