0

この方法でポリゴンを作成するとき、クリック可能なポリゴンを作成するためにthree.jsを使用しています

var geo = new THREE.Geometry();
            geo.vertices.push(new THREE.Vector3(0.3, 0.3, 0.5));
            geo.vertices.push(new THREE.Vector3(0.3, 0.4, 0.5));
            geo.vertices.push(new THREE.Vector3(0.4, 0.4, 0.5));
            geo.vertices.push(new THREE.Vector3(0.6, 0.35, 0.5));
            geo.vertices.push(new THREE.Vector3(0.4, 0.3, 0.5));                

            for (var face = 0 ; face < 5 - 2; face++) {
                // this makes a triangle fan, from the first +Y point around
                geo.faces.push(new THREE.Face3(0, face + 1, face + 2));
            }

            var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff, opacity: 0.5 }));
            geo.computeFaceNormals();

            layer.add(mesh);
            objects.push(mesh);

表示されますが、ポリゴンはクリックできません。私がこの方法で作成した場合

var geometry = new THREE.CubeGeometry(0.02, 0.02, 0.02);
            var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff, opacity: 0.5 }));

            object.position.x = 0.5;
            object.position.y = 0.5;
            object.position.z = 0.5;

            layer.add(object);
            objects.push(object);

すべてが正常に機能し、立方体はクリック可能ですが、ポリゴンが必要です。イベントメソッドをクリック

function onDocumentMouseClick(event) {
        layerMap.update();
        var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
        var ray = projector.pickingRay(vector, camera);
        var intersects = ray.intersectObjects(objects);
        if (intersects.length > 0) {
            intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
        }
    }

多角形が多すぎます クリック可能な多角形を作成するにはどうすればよいですか?

4

2 に答える 2

0

クラスのintersectTriangle()関数を使用する必要があります。THREE.Ray三角形objectをTHREE.Meshループして、次のような交点を確認します。

function onDocumentMouseClick(event) 
{

    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
    var ray = projector.pickingRay(vector, camera);
    var currentTriangle;
    var currentIntersection, chosenIntersection;
    var currentDistance, chosenDistance;
    var distanceVector;

    chosenIntersection = null;
    chosenDistance = Infinity;

    var vertices = object.geometry.vertices;

    for (var i = 0; i < object.geometry.faces.length; i++)
    {
      currentTriangle = object.geometry.faces[i];
      currentIntersection = ray.intersectTriangle( vertices[ currentTriangle.a ], vertices[ currentTriangle.b ], vertices[ currentTriangle.c ], true );

      if( currentIntersection !== null )
      {
        // The following code checks if a found intersection is closer to the camera than a previous one.
        distanceVector.subVectors(currentIntersection, ray.origin);
        currentDistance = distanceVector.length();

        if( currentDistance < chosenDistance)
        {
          chosenIntersection = currentIntersection;
          chosenDistance = currentDistance;
        }
      }   
   }
}
于 2013-09-14T13:34:45.477 に答える
0

2 つのエラーがあります。

コンストラクターの引数が正しくありませOrthographicCameraん。逆さまになっていて、ニア プレーンがカメラの後ろにあります。

//this.camera = new THREE.OrthographicCamera(0, 1, 0, 1, -3000, 3000);
this.camera = new THREE.OrthographicCamera(0, 1, 1, 0, 1, 3000);

ジオメトリの巻き順は時計回りです。反時計回り (CCW) にする必要があります。

//geo.faces.push(new THREE.Face3(0, face + 1, face + 2));
geo.faces.push(new THREE.Face3(0, face + 2, face + 1));

ヒント: 縮小されていないバージョンの three.js を使用してデバッグします。また、使用するローカル コピーをダウンロードします。

three.js r.60

于 2013-09-14T14:53:52.127 に答える