THREE.JS 包含相同对象的多个组答案

【问题标题】：THREE.JS Multiple groups containing the same objectsTHREE.JS 包含相同对象的多个组
【发布时间】：2021-06-24 05:51:38
【问题描述】：

我目前正在学习 THREE.js 并尝试制作一个可玩的魔方。

我希望能够整体旋转一个面，而不是一次移动一个立方体，我可以通过创建一个 THREE.Group 并在其中添加立方体来实现。问题是单个立方体包含在多个面中，我找不到解决方案。如果我创建一个对象，将其添加到第一个组，然后将其添加到第二个组，它就会从第一个组中删除。

我很确定有一个解决方法，但找不到它，因为我对 THREE.js 和 3D 编程真的很陌生（我只学习了基础课程 https://www.udemy.com/3d-programming-with-javascript-and-the-threejs-3d-library/）。

有我的代码，但我认为无论如何它不会很有用。

https://pastebin.com/Hq66UvBU

Thanks

【问题讨论】：

可能是stackoverflow.com/questions/20089098/…的副本
我已经找到了这个但是不能让它工作，而且它已经很旧了：/
我认为THREE.Group 是您的用例的错误类。正如您所说，单个多维数据集需要以这样一种方式组织，即可以在魔方的不同侧面实现多个成员资格。我建议使用自定义数据结构并在用户执行更改时以特殊方式转换单个多维数据集。顺便说一句：这是带有您的代码的live example。
也很有趣：github.com/joews/rubik-js
我会看看我能用它做什么，谢谢！

标签： javascript three.js 3d

【解决方案1】：

欢迎来到 Stack Overflow。请记住编辑您的问题以包含您的代码，因为当 pastebin 链接失效时，您的问题会丢失重要的上下文。

将对象添加到THREE.Group 的正确方法是通过the add function，就像您一样。但是添加到多个组的对象将永远只是它添加到的最后一个组的子对象。这是因为add 会查看对象是否已经定义了parent，并在设置新父对象（r97 code）之前从该父对象中删除该对象。

例子：

let obj = new THREE.Object3D()
let p1 = new THREE.Group()
let p2 = new THREE.Group()

p1.add(obj) // obj.parent == p1
p2.add(obj) // 1. three.js calls p1.remove(obj) 2. obj.parent == p2

除此之外，正如@Mugen87 所提到的，您的立方体不仅需要能够拥有多个成员资格，而且还需要能够随着位置的变化进入和离开面部组。对我来说，这意味着您几乎需要单独转换立方体。您可以使用THREE.Group 使其更易于概念化，但以这种方式实际实现它会产生额外的开销。

【讨论】：

【解决方案2】：

也许回答晚了，但尝试以另一种方式工作，并在激活转向功能时将需要转动的立方体分组，然后将组翻转，然后清空组。

【讨论】：