3つのjでグルーピングすることについて

Question

私は3つのjs.Inで作業しています。複数のオブジェクトをドラッグする場合に問題に直面しています。基本的に、これで電子を作りたいと思います。球のジオメトリと球体にテキストを追加しました。しかし、そのオブジェクトを動かすと、球体からテキストが分離されてしまいます。これはコードです

// 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