javascript - 三个JS动画屏幕空白

Question

我是三个 js 和 webgl 的新手。我正在构建一个复杂的太阳系，在我想要制作任何动画之前，一切都运行良好。这是一个非常精简的版本来显示问题(太阳处于低分辨率)。如果我添加行 sun.rotate.y += 1;它根本不会加载或运行任何东西。我环顾四周，但不明白为什么。我确信我错过了一些愚蠢的事情。感谢您的帮助。

<script>

    // SETUP SCENE

    var camera, controls, scene, renderer;
    var container

    init();
    animate();

    function init() {

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

        controls = new THREE.TrackballControls( camera );

        controls.rotateSpeed = 1.0;
        controls.zoomSpeed = .2;
        controls.panSpeed = 0.8;

        controls.noZoom = false;
        controls.noPan = true;

        controls.staticMoving = false;
        controls.dynamicDampingFactor = 0.3;

        controls.keys = [ 65, 83, 68 ];

        controls.addEventListener( 'change', render );


        scene = new THREE.Scene();


        // ADD THE SUN PHYSICAL LOCATION
        var geometry = new THREE.SphereGeometry(5, 3, 3, 0, Math.PI * 2, 0, Math.PI * 2);
        var material = new THREE.MeshBasicMaterial({color: "Yellow"});
        var sun = new THREE.Mesh(geometry, material);
        scene.add(sun);

        //RENDER
        renderer = new THREE.WebGLRenderer( { antialias: false } );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );

        container = document.getElementById( 'container' );
        container.appendChild( renderer.domElement );

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

        render();
        animate();


    }

    function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

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

            controls.handleResize();

            render();

    }

    function animate() {

            requestAnimationFrame( animate );

            controls.update();

            render();    
    }


    function render() {
            sun.rotate.y +=1; // Problem animating?
            renderer.render( scene, camera );
    }

</script>

Answer 1

您需要将 sun 定义为全局变量，因为目前它在 render() 作用域中不可见。

此外，我认为要旋转网格，您可以调用“rotateX()、rotateY() 或rotateZ()”，因此它是sun.rotateY(0.01)

编辑:我意识到您可以通过修改其rotation而不是其rotate属性来旋转网格。