Three.js move as group

Question

Es scheint, als ob dies einfach sein sollte, aber ich habe fast eine Woche damit verbracht, jede mögliche Kombination aus dem Ziehen mehrerer Objekte als Gruppe in Three.js auszuprobieren. Es begann einfach, ich benutzte dieses Beispiel https://jsfiddle.net/mz7Lv9dt/1/, um den Ball zum Laufen zu bringen. Ich dachte, ich könnte einfach etwas TextGeometry hinzufügen, das natürlich einige wichtige API-Änderungen in den letzten paar Veröffentlichungen hatte, die die meisten Beispiele veralten ließen.

Nachdem ich es schließlich als eine einzige Zeile funktionierte, wollte ich Wordwrap hinzufügen und es als Gruppe verschieben, aber ich kann es nicht scheinen.

Hier können Sie es sehen die Arbeit mit dem Ball ganz gut, aber Sie können den Text https://jsfiddle.net/ajhalls/h05v48wd/

Durch Austausch rund drei Zeilen Code (Ortslinie 93-99) nicht ziehen, kann ich es bekommen, wo Sie können die einzelnen Linien ziehen um, die Sie hier sehen können: https://jsfiddle.net/ajhalls/t0e2se3x/

function addText(text, fontSize, boundingWidth) { 
    var wrapArray; 
    wrapArray = text.wordwrap(10,2); 
    var loader = new THREE.FontLoader(); 
    loader.load('https://cdn.coursesaver.com/three.js-74/examples/fonts/helvetiker_bold.typeface.js', 
    function (font) { 
    group = new THREE.Group(); 
    group.name = "infoTag"; 
     for (var i = 0; i < wrapArray.length; i++) { 
     var objectID=i; 
     var line = wrapArray[objectID]; 
     var textGeo = new THREE.TextGeometry(line, {font: font,size: fontSize,height: 10,curveSegments: 12,bevelThickness: 0.02,bevelSize: 0.05,bevelEnabled: true}); 
      textGeo.computeBoundingBox(); 
      var centerOffset = -0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x); 
      var textMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000, specular: 0xffffff }); 
      var mesh = new THREE.Mesh(textGeo, textMaterial); 
      mesh.position.x = centerOffset +200; 
      mesh.position.y = i*fontSize*-1+11; 
      mesh.position.z = 280; 
      mesh.castShadow = true; 
      mesh.receiveShadow = true; 
      mesh.geometry.center(); 
      mesh.lookAt(camera.position); 
      mesh.name = i; 
      group.add(mesh); //this should work - comment out and swap for other two lines to see 
      scene.add(mesh); // this should work- comment out and swap for other two lines to see 

     //objects.push(mesh);//works on individual lines if you uncomment this 
     //scene.add(mesh); //works on individual lines if you uncomment this 
     } 
    objects.push(group); // this should work- comment out and swap for other two lines to see 

    }); 

} 

das „sollte“ arbeiten nach allem, was ich in der letzten Woche recherchiert hatte. Ich hatte einen Moment, wo es "funktionierte", aber wegen der Größe des group Objekts waren die Drehpunkte falsch, die setLength Funktion funktionierte nicht, und es kippte das Objekt weg von der Kamera. Alles in allem war es ein Durcheinander.

Ich habe versucht, 2d-Objekte wie Leinwände und Sprites, aber aus den hier aufgeführten Gründen Three.js TextGeometry Wordwrap - drag as group konnte es nicht funktionieren.

Bitte, jemand mir helfen!

Answer 1

Das Problem endete mit der group. Zuvor habe ich es erstellt, indem ich Objekte mit einer position.z hinzugefügt habe, die die Größe der Box um die Gruppe vergrößert hat. Nachdem ich das gemacht habe, habe ich die Box vor die Kamera geschoben und eine group.lookAt gemacht, was bedeutete, dass ich sie gezogen habe alles inklusive Drehpunkt und Blick von hinten war falsch. Der richtige Weg war, die Gruppe zu erstellen, sie zu positionieren, der Kamera gegenüberzustehen und dann den Text hinzuzufügen.

function addText(text, fontSize, wrapWidth, tagColor, positionX, positionY, positionZ) { 
    var wrapArray; 
    wrapArray = text.wordwrap(wrapWidth,2); 
    var loader = new THREE.FontLoader(); 
    loader.load('/js/fonts/helvetiker_bold.typeface.js', function (font) { 
    group = new THREE.Group(); 
    group.position.x=positionX; 
    group.position.y=positionY; 
    group.position.z=positionZ; 
    group.lookAt(camera.position); 
    group.tourType = "infoTag"; 
    group.name = "infoTag-" + objects.length; 
    group.dataID=objects.length; 
    group.textData=text; 
     for (var i = 0; i < wrapArray.length; i++) { 
      var objectID=i; 
      var line = wrapArray[objectID]; 
      var textGeo = new THREE.TextGeometry(line, { 
        font: font, 
        size: fontSize, 
        height: 1, 
        curveSegments: 12, 
        bevelThickness: 0.02, 
        bevelSize: 0.05, 
        bevelEnabled: true 
       }); 

       textGeo.computeBoundingBox(); 
       var centerOffset = -0.5 * (textGeo.boundingBox.max.x - textGeo.boundingBox.min.x); 
       var textMaterial = new THREE.MeshPhongMaterial({ color: tagColor, specular: 0xffffff }); 

       var mesh = new THREE.Mesh(textGeo, textMaterial); 
       mesh.dataID=objects.length; 

       mesh.position.x = 0; 
       mesh.position.y = (i*mesh.geometry.boundingBox.max.y*-1)*1.15; 
       mesh.position.z = 0; 
       mesh.castShadow = true; 
       mesh.receiveShadow = true; 
       mesh.geometry.center(); 
       //mesh.lookAt(camera.position); 
       mesh.name = "infoTag-mesh-" + objects.length; 
       group.add(mesh); 
     } 
    scene.add(group); 
    objects.push(group); 
    }); 
} 

Natürlich gab es einige Veränderungen in der Maus-Ereignisse gemacht werden, zu berücksichtigen, dass Sie die Eltern des Objekts verschieben möchten, die etwa wie folgt aussieht:

function onDocumentMouseDown(event) { 
    event.preventDefault(); 
    raycaster.setFromCamera(mouse, camera); 
    var intersects = raycaster.intersectObjects(objects, true); 
    if (intersects.length > 0) { 
     if (intersects[0].object.parent.tourType == 'infoTag') { 
      var manipulatingInfoTag = true; 

      SELECTED = intersects[0].object.parent; 
     }else{ 
      SELECTED = intersects[0].object; 
     } 
    var intersects = raycaster.intersectObject(plane); 
    if (intersects.length > 0) { 
     offset.copy(intersects[0].point).sub(plane.position); 
    } 
    container.style.cursor = 'move'; 
    } 


    isUserInteracting = true; 
    onPointerDownPointerX = event.clientX; onPointerDownPointerY = event.clientY; onPointerDownLon = lon; onPointerDownLat = lat; 
}