three.js的新手，如何在Three.js中对此球进行动画处理

Question

嗨，我只是在学习webGL和javascript。

我已经制作了Three.js WebGL场景，实际上已经想到了……它们是同一对象

http://goo.gl/gOiHX4

球已“连接”到3d对象的其余部分，因此我将自己在搅拌器中制作另一个球体。

假设我有一个ball.js，其余的结构是tribunal.js

在这种情况下，我将如何在3D环境中设置ball.js？

就像绕结构旋转一圈一样。 恒定循环。

pastebin也用于代码：

http://paste.ubuntu.com/6549663/

    <!doctype html>
<html lang="en">
<head>
  <title>My 3D webGL experiment</title>
  <meta charset="utf-8">
</head>
<body style="margin: 0;">

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

  <script>

    // Set up the scene, camera, and renderer as global variables.
    var scene, camera, renderer;

    init();
    animate();

    // Sets up the scene.
    function init() {

      // Create the scene and set the scene size.
      scene = new THREE.Scene();
      var WIDTH = window.innerWidth,
          HEIGHT = window.innerHeight;

      // Create a renderer and add it to the DOM.
      renderer = new THREE.WebGLRenderer({antialias:true});
      renderer.setSize(WIDTH, HEIGHT);
      document.body.appendChild(renderer.domElement);

      // Create a camera, zoom it out from the model a bit, and add it to the scene.
      camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
      camera.position.set(90,80,0);
      scene.add(camera);

      // Create an event listener that resizes the renderer with the browser window.
      window.addEventListener('resize', function() {
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;
        renderer.setSize(WIDTH, HEIGHT);
        camera.aspect = WIDTH / HEIGHT;
        camera.updateProjectionMatrix();
      });

      // Set the background color of the scene.
      renderer.setClearColorHex(0xB5DBDB, 1);

      // Create a light, set its position, and add it to the scene.
      var light = new THREE.PointLight(0xf44fff);
      light.position.set(200,200,200);
      scene.add(light);

      // Load in the mesh and add it to the scene.
      var loader = new THREE.JSONLoader();
      loader.load( "models/tribunal.js", function(geometry){
        var material = new THREE.MeshLambertMaterial({color: 0xCC0000});
        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
      });

      // Add OrbitControls so that we can pan around with the mouse.
      controls = new THREE.OrbitControls(camera, renderer.domElement);

    }


    // Renders the scene and updates the render as needed.
    function animate() {

      // Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
      requestAnimationFrame(animate);

      // Render the scene.
      renderer.render(scene, camera);
      controls.update();

    }

  </script>

</body>
</html>

Answer 1

在THREE.js中，对象的任何移动都可以通过更改其属性来完成：位置，旋转和/或缩放。 这些属性不是简单的数字，因此更改它们以满足您的需求通常需要使用内置函数，以确保正确处理更改。 例如，网格的位置被定义为一个Vector，可以使用set（）函数更改它，如下所示：

mesh.position.set( 0, 0, 0 ); // Standard [ x, y, z ] coordinate system

还有许多其他方法可以更改文档和代码中描述的Vector中的值。 将对象的属性视为对象本身，并熟悉这些对象及其父对象可用的方法。

要回答您的问题：在一段时间内连续移动对象需要在animate（）函数中添加更多代码。 每次调用animate（）函数时，以下代码将沿x轴在正方向上移动一个网格1单位：

mesh.position.translateX( 1 );

提示：

有多种类型的运动，但它们大多是位置，旋转和/或比例的组合。
重要的是要记住子对象受父对象影响。 如果将网格B附加到网格A，则应用于网格A的运动也将移动网格B。
animate（）循环中对对象的变量引用必须是全局的，以便animate（）循环知道您在说什么对象。
位置，比例和甚至旋转的变化都可以使物体快速移出摄像机的视锥（或视场）。
使用OrbitControls.js和console.log（）帮助调试动画。

three.js的新手，如何在Three.js中对此球进行动画处理

问题描述

1 个解决方案

解决方案1
2 2014-10-28 21:23:43

three.js的新手，如何在Three.js中对此球进行动画处理

问题描述

1 个解决方案

解决方案1 2 2014-10-28 21:23:43

解决方案1
2 2014-10-28 21:23:43