세 개의 js 교차면 정점 위치에 문제가 있음

Question

Hy! 나는 3 개의 js에서 일하고있다. THREE.JSONLoader로 모델을로드하고 있습니다. 이제 저는이 물체와 얼굴을 선택하는 부분에 있습니다. 그것은 효과가있다. 레이가 1 개체와 만나는 곳

intersections = raycaster.intersectObjects(objects); 

if (intersections.length > 0) { 

      if (intersected != intersections[ 0 ].object) { 

       intersected = intersections[ 0 ].object; 

       /*HERE*/ 
        console.log("Hit-face a @ " + intersections[0].face.a); 
        console.log("Hit-face b @ " + intersections[0].face.b); 
        console.log("Hit-face c @ " + intersections[0].face.c); 

        var faceColorMaterial = new THREE.MeshBasicMaterial( 
        { color: 0xffffff, vertexColors: THREE.FaceColors }); 

        var sphereGeometry = new THREE.SphereGeometry(0.1, 32, 16); 
        var sphereGeometryf = new THREE.SphereGeometry(3, 32, 16); 
        var sphereGeometrys = new THREE.SphereGeometry(3, 32, 16); 
        var sphereGeometryt = new THREE.SphereGeometry(3, 32, 16); 

        var sphere = new THREE.Mesh(sphereGeometry, faceColorMaterial); 
        sphere.position.set(intersections[0].point.x, intersections[0].point.y, intersections[0].point.z); 

        var spheref = new THREE.Mesh(sphereGeometryf, faceColorMaterial); 
        spheref.position.set(intersections[0].object.geometry.vertices[intersections[0].face.a].x + intersections[0].object.position.x, 
        intersections[0].object.geometry.vertices[intersections[0].face.a].y + intersections[0].object.position.y, 
        intersections[0].object.geometry.vertices[intersections[0].face.a].z + intersections[0].object.position.z); 

        var spheres = new THREE.Mesh(sphereGeometrys, faceColorMaterial); 
        spheres.position.set(intersections[0].object.geometry.vertices[intersections[0].face.b].x + intersections[0].object.position.x, 
        intersections[0].object.geometry.vertices[intersections[0].face.b].y + intersections[0].object.position.y, 
        intersections[0].object.geometry.vertices[intersections[0].face.b].z + intersections[0].object.position.z); 

        var spheret = new THREE.Mesh(sphereGeometryt, faceColorMaterial); 
        spheret.position.set(intersections[0].object.geometry.vertices[intersections[0].face.c].x + intersections[0].object.position.x, 
        intersections[0].object.geometry.vertices[intersections[0].face.c].y + intersections[0].object.position.y, 
        intersections[0].object.geometry.vertices[intersections[0].face.c].z + intersections[0].object.position.z); 



        scene.add(sphere); 
        scene.add(spheref); 
        scene.add(spheres); 
        scene.add(spheret); 
       /*HERE*/ 
      } 
     } 

그래서이 예제 코드에서 "영역"는 교차점이다 하지만 지금은 선택한면의 정점을 얻으려면, 아래의 코드를 확인.

spheref-spheres-spheret는 정점 시각화입니다. 그러나이 정점에 해당 구체를 추가하면 다른 곳에 표시됩니다.

위의 내 코드로 onDocumentMouseDown 이벤트를 대체하여,이 예제 작업 위의 방법 http://stemkoski.github.io/Three.js/Mouse-Click.html

그러나로드 된 객체와 함께 작동하지 않습니다. I는 ^^ 그것을 해결 ...

Answer 1

개체의 WorldMatrix를 포인트에 적용하지 못했습니다. 다음과 같이

먼저 원래 메쉬의 얼굴 포인트를 얻을 : 여기

는 그것이 작동하는 방법이다.

PointA = intersections[0].object.geometry.vertices[intersections[0].face.a] 

이 시점에는 크기 조정, 회전, 변환이 없습니다. 따라서 올바른 위치를 얻으려면 이들을 포인트에 추가해야합니다. 이를 위해서는 대상의 WorldMatrix를 포인트에 적용하면됩니다.

PointA.applyMatrix4(intersections[0].object.matrixWorld); 

이제 분야를 지정해야하는 실제 좌표가 있습니다. (PointA.x, PointA.y, PointA.z)

Answer 2

OK 문제가

그래서 문제를 I이 사용되었다 ... 스케일로이었다 myobject.scale.set (3, 3, 3);

그러나 꼭지점 좌표는 변경되지 않았으므로이 줄을 주석으로 처리하고 3 배 더 큰 모델을 내보낼 것입니다. 그러나 scalled modell로 작업하려면 x, y, z 값을 3 번 (x가 숫자 인 배율에 따라 x 번) 추가해야합니다.