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

How to automatically update a mesh on changing parameters on THREE.js

本文关键字：参数 网格 更新 THRE js      更新时间：2023-11-04

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

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

这是我的实际工作流程：

  1. 在滑块更改时使用回调
  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肯定是其中的一部分。

任何关于结构、模式、特定用例或基于上述THRE.js、d3.js、angular.js框架之一的示例的建议都可能具有启发性。事实上，我更喜欢有angular.js的解决方案…

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

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

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

  $scope.$watch($attrs.something, function(changedSomething){
         doSomeLogicWith(changedSomething);
  });
相关文章：