Question

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

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

关于三个js的分组

1 个答案: