Question

我使用OBJloader和Three.JS库在场景中加载了两个模型。一些模型使用model.setRotationFromQuaternion( camera.quaternion );

进行广告牌

我的目标是从广告牌上的顶点到相应模型上的顶点绘制线条 - 在首次加载场景时，应在两个模型上的最近点之间绘制线条。模型可以自由旋转，因此线条在旋转时需要更改，保持连接到相同的初始顶点。

把它想象成广告牌是一个标签，线条连接在标签和旋转模型的某个地方。

我怎样才能做到这一点？

下面是我的代码片段 - 问题是所有模型的位置都是0,0,0所以我需要知道如何在标签和模型上获取顶点的位置并连接两个

 addLabelLines(){
    var geometry = new THREE.Geometry();    

    for ( var i = 0; i < this.labels.length; i ++ ) { 
        var currentLabel = this.labels[i];
        var modelMatchingLabel;
        //find matching model
        for(var j = 0; j < this.models.length; j++){
          if(currentLabel.name.toLowerCase().indexOf(this.models[j].name) >= 0){
            modelMatchingLabel = this.models[j];
          }
        }

        if(!modelMatchingLabel){
          console.warn("no model matching label "+currentLabel.name);
          return;
        }
        else{
          console.log('found model '+modelMatchingLabel.name +" matches label "+currentLabel.name);

          geometry.vertices.push( currentLabel.position );
          geometry.vertices.push( modelMatchingLabel.position );
        }        
    }


    var material = new THREE.LineBasicMaterial( { color: 0x800080 } );

    line = new THREE.Line( geometry, material, THREE.LineSegments );

    scene.add( line );
  }

Answer 1

要获得能够绘制直线的最近点，需要使用典型的“最近邻居”算法。看看这个例子，因为它将为您提供一种非常有效的方式来实现您正在寻找的东西

https://threejs.org/examples/webgl_nearestneighbour.html

Three.js在两个模型的最近顶点之间绘制动态线

1 个答案: