关于三个js中的分组

Question

我正在处理三个js.因为我在拖动多个对象时遇到了问题。基本上我想在此创建一个电子。我已经创建了一个使用球体几何和然后我将文本添加到球体中。但是当我移动该对象时，文本与球体分离。这是密码

// Creating electron 
var electron = new THREE.Mesh(
    new THREE.SphereGeometry(0.5,1000), 
    new THREE.MeshPhongMaterial({color:'red',transparent: true, opacity: 0.7}) 
); 

var loader1 = new THREE.FontLoader(); 
loader1.load('helvetiker_regular.typeface.json', function (font) 
{ 
    // Creating text 
    southGeometry = new THREE.TextGeometry('+', { font: font, size: 0.5, height:0.02, curveSegments: 7}); 
    southMaterial = new THREE.MeshBasicMaterial({ color:'black' }); 
    on = new THREE.Mesh(southGeometry ,southMaterial); 
    on.position.set(-0.2,-0.2, 1) ; 
    electron.add(on); 
}) 
scene.add(electron); 
objects.push(electron); 

Answer 1

请参阅THREE.Group。

// Creating electron 
var fullElectron = new THREE.Group(); // This will contain both the sphere and the text 

var electron = new THREE.Mesh(
    new THREE.SphereGeometry(0.5,1000), 
    new THREE.MeshPhongMaterial({color:'red',transparent: true, opacity: 0.7}) 
); 

fullElectron.add(electron); // add the sphere 

var loader1 = new THREE.FontLoader(); 
loader1.load('helvetiker_regular.typeface.json', function (font) 
{ 
    // Creating text 
    southGeometry = new THREE.TextGeometry('+', { font: font, size: 0.5, height:0.02, curveSegments: 7}); 
    southMaterial = new THREE.MeshBasicMaterial({ color:'black' }); 
    on = new THREE.Mesh(southGeometry ,southMaterial); 
    on.position.set(-0.2,-0.2, 1) ; 
    fullElectron.add(on); // add the text 
}) 
scene.add(fullElectron); // add the group to the scene 
objects.push(fullElectron); 

现在，您已经将球体和文本分组，将变换应用于组将影响它们两个。如果您通过单击球体来拖动它们，只需沿着父链向上一步即可访问该组。事情是这样的：

function yourDragHandler(sphere){ 
    var theGroup = sphere.parent; 
} 

three.js所R85