Question

好的，所以我对three.js很新，并且正在努力用 camera.lookAt 和 camera.position 方法来完成一些功能。我正在开发的项目是一个3D图形应用程序。

几年前，一个名叫'Hans Rosling'的人推出了这个用于绘制和可视化统计数据的奇妙新模型。该模型很快被Google采用，现在与Google Public Data一起使用。该模型经常在社会科学中用于分析和识别统计学中的趋势。

在this example中，图表上的每个圆圈代表一个国家/地区。圆的半径由国家的人口决定，其X和Y位置是根据已收集的有关该国家的统计数据确定的。上面的例子使用X上的“Life Expectancy”和Y上的“生育率”。除此之外，你可以使用底部的时间线功能播放数据，并观察历史记录。统计。 我对夏季项目的想法是制作这个图形工具的全功能3D版本。我相信拥有带有第三个变量的Z轴将允许用户识别数据中更复杂的趋势。

这是一个缓慢的开始，因为我对3D图形完全陌生，但你可以看到我迄今为止在 www.igraph.info 所做的工作。我想让核心功能正常工作，因为我开始绘制所有数据点，但正如我所说，我正在努力使用相机。它的工作方式现在你可以通过点击和拖动功能旋转散点图。我希望相机工作的方式是like this，其中 camera.lookAt 相对于鼠标位置而 camera.position 可以更改为W，S，A，D或箭头键。这将使用户完全控制观看位置和天使，我认为这是该应用的重要特征。如果有更多有经验的Three.js会给我一些建议或指出我正确的方向，我将非常感激！

这是我的代码到目前为止的样子：

renderer.render(scene, camera);
  var paused = false;
  var last = new Date().getTime();
  var down = false;
  var sx = 0, sy = 0;
  window.onmousedown = function (ev){
    down = true; sx = ev.clientX; sy = ev.clientY;
  };
  window.onmouseup = function(){ down = false; };
  window.onmousemove = function(ev) {
    if (down) {
      var dx = ev.clientX - sx;
      var dy = ev.clientY - sy;
      scatterPlot.rotation.y += dx*0.01;
      camera.position.y += dy;
      sx += dx;
      sy += dy;
    }
  }
  var animating = false;
  window.ondblclick = function() { animating = !animating; };
  function animate(t) {
    if (!paused) {
      last = t;
      if (animating) {
        var v = pointGeo.vertices;
        for (var i=0; i<v.length; i++) {
          var u = v[i];
          u.angle += u.speed * 0.01;
          u.position.x = Math.cos(u.angle)*u.radius;
          u.position.z = Math.sin(u.angle)*u.radius;
        }
        pointGeo.__dirtyVertices = true;
      }
      renderer.clear();
      camera.lookAt(scene.position);
      renderer.render(scene, camera);
    }
    window.requestAnimationFrame(animate, renderer.domElement);
  };
  animate(new Date().getTime());
  onmessage = function(ev) {
    paused = (ev.data == 'pause');
  };

感谢！

Three.js Camara属性和方法

0 个答案: