Javascript 三元'；旋转对象时不渲染

啊，我真的需要一些帮助，快发疯了。我有一个包含三个对象的three.js HTML5页面（1）立方体，（2）圆柱体，（3）导入的OBJ网格

一切正常，直到我尝试旋转网格（吉他），然后没有渲染。在添加到场景之前，我可以对其进行旋转和定位，但是如果我尝试在渲染函数中旋转它，所有内容都会变黑

谁能告诉我我做错了什么？代码附在下面

谢谢

    <script src="../build/three.min.js"></script>

    <script src="js/loaders/DDSLoader.js"></script>
    <script src="js/loaders/MTLLoader.js"></script>
    <script src="js/loaders/OBJMTLLoader.js"></script>

    <script src="js/Detector.js"></script>
    <script src="js/libs/stats.min.js"></script>

    <script>


      var targetRotation = 0;
        var targetRotationOnMouseDown = 0;

        var mouseX = 0;
        var mouseXOnMouseDown = 0;

        var container, stats;

        var camera, scene, renderer;
  var guitar,button1,cube;

        var mouseX = 0, mouseY = 0;

        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( 45, window.innerWidth / window.innerHeight, 1, 2000 );
            camera.position.z = 640;

            // scene

            scene = new THREE.Scene();

            var ambient = new THREE.AmbientLight( 0x444444 );
            scene.add( ambient );

            var directionalLight = new THREE.DirectionalLight( 0xffeedd );
            directionalLight.position.set( 0, 0, 1 ).normalize();
            scene.add( directionalLight );

            // model

            THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

            var loader = new THREE.OBJMTLLoader();
            loader.load( 'obj/male02/guitarOBJ.obj', 'obj/male02/male02_dds.mtl', function ( guitar ) {
    guitar.rotation.x = 1.57;
            scene.add( guitar );

            } );

            var geometry = new THREE.CylinderGeometry( 5, 5, 50, 32 );
    var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
    button1 = new THREE.Mesh( geometry, material );
    button1.rotation.y = 1;
    button1.rotation.z = 0.75;
    scene.add( button1 );

    var geometry = new THREE.BoxGeometry( 100, 100, 100 );

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

                var hex = Math.random() * 0xffffff;
                geometry.faces[ i ].color.setHex( hex );
                geometry.faces[ i + 1 ].color.setHex( hex );

            }

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

            cube = new THREE.Mesh( geometry, material );
            cube.position.y = 150;
            scene.add( cube );


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

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

            //

            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 onDocumentMouseMove( event ) {

            ///mouseX = ( event.clientX - windowHalfX ) / 2;
            ///mouseY = ( event.clientY - windowHalfY ) / 2;

        ///}

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

        }

        function render() {

      guitar.rotation.y = button1.rotation.y = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;

    camera.lookAt( scene.position );

            renderer.render( scene, camera );

        }

    </script>

var目标=0；
var targetRotationOnMouseDown=0；
var-mouseX=0；
var mouseXOnMouseDown=0；
var容器，stats；
摄像机、场景、渲染器；
var吉他，按钮1，立方体；
var mouseX=0，mouseY=0；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，12000）；
摄像机位置z=640；
//场面
场景=新的三个。场景（）；
var环境光=新的三个环境光（0x4444）；
场景。添加（环境光）；
var方向灯=新的三个方向灯（0xffeedd）；
directionalLight.position.set（0,0,1）.normalize（）；
场景。添加（方向光）；
//模型
添加（/\.dds$/i，新的三个.DDSLoader（））；
var loader=new THREE.OBJMTLLoader（）；
loader.load（'obj/male02/guitarOBJ.obj'，'obj/male02/male02_dds.mtl'，函数（吉他）{
吉他.旋转.x=1.57；
场景。添加（吉他）；
} );
var几何=新的三个圆柱几何（5,5,50,32）；
var material=新的三个.MeshBasicMaterial（{color:0xffff00}）；
button1=新的三个网格（几何体、材质）；
按钮1.旋转。y=1；
按钮1.旋转z=0.75；
场景。添加（按钮1）；
var geometry=新的3.BoxGeometry（100100100）；
对于（变量i=0；iif(mesh){
    mesh.rotation.y += 0.02;
}