Question

我试图用three.js创造一个不断向前和向后移动但没有成功的球。它只是不起作用。只朝一个方向移动我的代码：

       var scene = new THREE.Scene();    
       var camera = new THREE.PerspectiveCamera( 75,                    window.innerWidth/window.innerHeight, 0.1, 1000 );    
        var renderer = new THREE.WebGLRenderer();    
        renderer.setSize( window.innerWidth, window.innerHeight );    
        document.body.appendChild( renderer.domElement );    
        var faceradius = 0.2;    
        var bodyradius = 0.2;
        var geometry = new THREE.SphereGeometry( faceradius, 32, 32 );//sphere size
        var material = new THREE.MeshBasicMaterial( { color: 0x24D69D } ); //red color
        var face = new THREE.Mesh( geometry, material );
        scene.add( face );      
        var group = new THREE.Group();
        group.add(face);
        scene.add(group);
        var counter = 0;
        camera.position.z = 5;

        var render = function () {
            requestAnimationFrame( render );
            if (counter < 100){
                group.position.x += 0.01;
                counter++;
            }

            renderer.render(scene, camera);

            if (counter > 100){
                group.position.x -= 0.01;
                counter++;
            }

            if (counter > 200){
                counter = 0;
            }
            renderer.render(scene, camera);
        };

        render();

Answer 1

试试这个：

var render = function () {
  requestAnimationFrame( render );

  if (counter <=100){ //Note the <=
    group.position.x += 0.01;
    counter++;
  }

  if (counter > 100){
    group.position.x -= 0.01;
    counter++;
  }

  if (counter > 200){
    counter = 0;
  }
  renderer.render(scene, camera);
};

Answer 2

据我所知，动画是递归函数，因此计数器不会上升 - 每次调用它时，计数器将恢复原始值。

您需要做的是使用sphere作为基础创建一个球对象，然后添加一个方向属性。

three.js向前和向后移动球

2 个答案: