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属性来旋转网格。

Answer 2

你有一个范围问题（根据你使用es6或es5的情况，它很复杂），这些都是有问题的：

将全局（或不是Js将其添加）声明为全局空间：

var container, sun;

在init函数中引用它：

this.sun = new THREE.Mesh(geometry, material);

工作笔：

Scope Issue in Three.js

此外，TrackballControls不是Three.js的一部分，你必须导入它，检查笔。

另外，对于您可能想要使用的旋转：

sun.rotation.y += 0.003;

三个JS动画屏幕空白

2 个答案: