如何在框架内使用 dat.GUI 访问 THREE.TorusKnotGeometry 的参数

Question

我正在使用 datGUI 来调整圆环结的内部参数（p 和 q，它们改变了它的拓扑结构）。通常的过程是使用 getObject3D 获取对 Aframe 组件下的 THREE.geometry 的引用，并将该对象及其属性（待调整）传递到 dat.GUI.

问题是我找不到三中的路径。 TorusKnotGeometry 对象添加到我要操作的属性（ p 和 q ）。

我（成功）获得了对包含使用 el.getObject3D('mesh') 的 TorusKnotGeometry 的 THREE.group 的引用，并将其记录到控制台，并浏览了对象以查找我希望的参数操纵（p 和 q）。我唯一能找到它们的地方是 torusKnotg3D.geometry.metadata.parameters。

我把它传给了dat.GUI，它没有抛出错误，但没有改变圆环结。所以问题是，控制 THREE.TorusKnotGeometry 的参数在哪里？

let torusKnot = document.querySelector("#torusKnot");
let torusKnot3D = document.querySelector("#torusKnot").object3D;
let torusKnotg3D = document.querySelector("#torusKnot").getObject3D('mesh');
tk3Dp=torusKnotg3D.geometry.metadata.parameters;

let gui = new dat.GUI();
tnParams = gui.addFolder("Torus Knot");
tnParams.add(tk3Dp, "p", 0, 12).name('p');

我预计使用 getObject3D() 会 return 三。 TorusKnotGeometry 显示了我想要操作的参数，但我找不到它们。对于更简单的对象，例如 gltf 模型中的图元，这很简单，但是这里的几何组件的属性不容易找到。

这是一个故障文件 https://glitch.com/~ambient-light-gui

这是我服务器上的同一个文件，因此您可以浏览从 getObject3D return 编辑并记录到控制台的对象。

http://www.sensorium.love/experiments/yamashiro/bonsai/ambientLightGUI.html

Answer 1

我认为这不是访问权限的问题，而是 dat.gui 的工作方式。它会更改参数，但不会更新几何体。

快速浏览 this 示例：

1.必须注册更改

dat.gui 文件夹有一个 onChanged 定义：

folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );

2。需要重新创建几何图形

generateGeometry 是一个使用更改后的属性创建全新 Buffer 几何图形的函数，如下所示：
```
let newGeo = new THREE.TorusKnotBufferGeometry(tk3Dp.radius, tk3Dp.tube,
             tk3Dp.tubularSegments, tk3Dp.radialSegments, tk3Dp.p, tk3Dp.q)
```
然后调用 updateGroupGeometry 提供网格和新几何体。

updateGroupGeometry 处理旧几何并将其替换为新几何，如下所示：

// here the mesh has no children:
mesh.geometry.dispose()
mesh.geometry = newGeo

在thisfiddle中查看。

虽然我自己应用更改，但在三个示例中有一个用于检测几何形状和东西的完整大机制。它不是 three.js 或 dat.gui.js 的一部分，如果您发现它是一个单独的库，请告诉我。

0。 TorusKnotGeometry 参数

就像你找到它们一样 -

// Mesh
let mesh = el.getObject3D('mesh')

// TorusKnotGeometry parameters
let tkgp = mesh.geometry.metadata.parameters;

如何在框架内使用 dat.GUI 访问 THREE.TorusKnotGeometry 的参数

How to access parameters of THREE.TorusKnotGeometry using dat.GUI within aframe

aframe