关于三个js中的分组答案

【问题标题】：Regarding grouping in three js关于三个js中的分组
【发布时间】：2017-06-16 03:06:04
【问题描述】：

我正在使用三个 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);

【问题讨论】：

标签： three.js

【解决方案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;
}

三个.js r85

【讨论】：