Question

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

现在我添加一些UI组件（按钮，滑块等）来更改json并重建网格。我写了一些猴子代码，我确信可以避免。现在我的东西工作正常，但我确信问题可以更优雅地解决。

这是我的实际工作流程：

关于滑块更改使用回调
该回调称为setter
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结合）并且角度肯定必须是其中的东西。

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

Answer 1

有一个关于使用three.js和angular.js的精彩演讲，它们正好展示了你的问题。

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

我使用角度指令监视特定属性，然后在我的项目中执行onchange逻辑。

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

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

1 个答案: