CODEWITHSUNDEEP
three.js
Naren
Naren

Reputation: 73

Regarding grouping in three js

I am working with the three js.In that I am facing a problem in case of dragging multiple objects.Basically I want to create an electron in this.I have created a sphere using sphere geometry and a text geometry.And then I have added text to sphere.But when I move that object the text becoming separated from the sphere. This is the code

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

Upvotes: 0

Views: 45

Answers (1)

TheJim01
TheJim01

Reputation: 8876

Please see 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);

Now that you've grouped the sphere and the text, applying transformations to the group will affect both of them. If you're dragging them by clicking on the sphere, simply take one step up the parent chain to gain access to the group. Something like this:

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

three.js r85

Upvotes: 1

Related Questions