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

时间:2018-10-14 15:55:15

标签: javascript three.js 3d

我目前正在学习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

2 个答案:

答案 0 :(得分:0)

欢迎使用堆栈溢出。请记住编辑您的问题以包含您的代码,因为当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使其更易于概念化,但是以这种方式实际实现将有额外的开销。

答案 1 :(得分:0)

也许是一个迟到的答案,但尝试以另一种方式工作,将需要转动的立方体在转动功能激活的那一刻分组,然后转动组,然后清空组。