javascript - 如何在 THREE.js 上更改参数时自动更新网格

Question

我是 Threejs 和 javascript 的新手。我正在基于 json 参数对象构建一个网格，它效果很好。

现在我添加一些 UI 组件(按钮、 slider 等)来更改 json 并重建网格。我正在编写一些猴子代码，我确信它可以避免。现在我的东西可以正常工作了，但我确信问题可以得到更优雅的解决。

这是我的实际工作流程:

1. slider 更改时使用回调
2. 该回调调用 setter
3. setter 更改 JSON 参数并重建网格

我确信这一切都可以通过简单地更改 JSON 和一些 JavaScript 魔法来自动化。

这是实际的伪代码:

sliderWidth.onChange( function(newValue) {
    MyObject3D.setWidth(newValue);
});

这是我的 MyObject3D 的骨架:

var MyObject3D = function(parameters) {
  this.parameters = parameters;
  this.init();
};

MyObject3D.prototype.init = function() {
    var geometry = this.initGeometry();
    var material = new THREE.MeshPhongMaterial( { color: this.parameters.color, shading: THREE.FlatShading } );
    this.mesh = new THREE.Mesh(geometry, material);
}

MyObject3D.prototype.setWidth = function(n) {
    this.parameters.width = n;
    scene.remove( this.mesh );
    this.init();
    scene.add( this.mesh );
}

我确信，借助 JavaScript 的高动态性和所有全新的框架，这段代码可以轻松实现自动化。我主要看的是d3.js并在 angular.js 。特别是 d3.js 似乎非常适合 enter-update-exit 范例(但我没有找到将其与 Three.js 结合的标准方法)，并且 Angular 肯定必须是某种东西就在其中。

任何关于结构、模式、特定用例或基于提到的框架之一的示例的建议(THREE.js、d3.js、angular.js)都可以具有启发性。实际上我更喜欢使用 angular.js 的解决方案..

Answer 1

有一个关于使用 Three.js 和 angular.js 的精彩演讲，它准确地展示了您的问题。

https://www.youtube.com/watch?v=mCIZoLaPJxM&t=8m5s

我使用 Angular Directive(指令)来监视特定属性，然后在我的项目中执行一些 onchange 逻辑。

  $scope.$watch($attrs.something, function(changedSomething){
         doSomeLogicWith(changedSomething);
  });