三人组移动

Three.js move as group

本文关键字：移动 三人组      更新时间：2023-09-26

这看起来应该很容易，但我花了将近一周的时间来尝试如何在Three.js中将多个项目作为一个组拖动的各种可能的组合https://jsfiddle.net/mz7Lv9dt/1/让球发挥作用。我想我可以添加一些TextGeometry，当然，在最近的几次发布中，它对API做了一些重大更改，使大多数示例过时。

在最终使它作为一行工作后，我想添加换行符并将其作为一个组移动，但我似乎无法做到。

在这里，你可以看到它与球配合得很好，但你不能拖动文本https://jsfiddle.net/ajhalls/h05v48wd/

通过交换大约三行代码（位置行93-99），我可以将其拖动到您可以拖动的位置，您可以在这里看到：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 
    });
}

根据我上周研究的所有内容，这"应该"是有效的。我有一段时间它在"工作"，但由于group对象的大小，轴心点错误，setLength功能不起作用，它将对象从相机上翻转开。总而言之，一切都一团糟。

我确实尝试过使用2d对象，如画布和精灵，但由于这里详细说明的原因，Three.js TextGeometry Wordwrap-drag as group无法使其工作。

求你了，有人帮帮我！

问题最终出现在group上。以前我在创建它时，用position.z向它添加对象，这增加了组周围方框的大小，然后在这样做之后，我将方框移动到相机前面，并做了group.lookAt，这意味着当我拖动它时，包括枢轴点在内的所有东西和从后面看它都是错误的。正确的方法是创建组，定位，面对相机，然后添加文本。

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

当然，考虑到您想要移动对象的父对象，在鼠标事件中需要进行一些更改，如下所示：

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;
}
相关文章：