three.js的新手，如何在three.js中设置此球的动画

New to three.js, how to animate this ball in three.js

本文关键字：three js 设置 动画 新手      更新时间：2024-06-18

嗨，我刚刚在学习webGL和javascript。

我制作了这个三个.js的webGL场景，实际上我开始思考……它们是同一个对象

http://goo.gl/gOiHX4

球被"连接"到三维对象的其余部分，所以我将在blender中自己制作另一个球体。

假设我有一个ball.js和其他结构，tribunal.js

在这种情况下，我将如何沿3D环境对ball.js进行建模？

就像在围绕结构的一个圆圈里。恒定循环。

代码粘贴箱：

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>

在THRE.js中，对象的任何移动都可以通过更改其属性来完成：位置、旋转和/或缩放。这些属性不是简单的数字，因此更改它们以满足您的需求通常需要使用内置函数来确保更改得到正确处理。例如，网格的位置被定义为矢量，可以使用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（）来帮助调试动画。

相关文章：