three.js 前后移动球答案

【问题标题】：three.js move ball forward and backthree.js 前后移动球
【发布时间】：2017-11-02 11:49:42
【问题描述】：

我正在尝试在 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();

【问题讨论】：

标签： animation three.js

【解决方案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);
};

【讨论】：

【解决方案2】：

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

你需要做的是创建一个以球体为基础的球对象，然后添加一个方向属性。

【讨论】：