2012-01-12 3 views
1

저는 ThreeJS를 공부했는데 현재 문제를 파악할 수 없습니다.ThreeJS 레이는 보이지 않는 비행기와 교차점이 있습니까?

카메라에서 광선을 찍을 때 너무 많은 교차점이 있으며 그 중 일부는 실제 비행기 근처에 있지 않습니다. 나는 교차로를 발견해야한다. 그것은 실제로 보이는 비행기를 관통하고있다. 어떤 아이디어로 그렇게 할 수 있습니까?

예 (비행기를 두 번 클릭, 각 상자에는 교차로를 나타냅니다 크롬과 FF로 작동합니다.) : 당신은 당신의 형상에 computeCentroids 및 computeFaceNormals를 호출 할 필요가 http://concurio.com/webgl/threejs-plane.html

+0

최신 버전의 Threejs로 시도해 보셨습니까? – Neil

+0

코드에서 버그가있는 것 중 하나는 캔버스가 페이지의 왼쪽 위 모서리에 정렬되어 있지 않기 때문에 마우스 좌표가 약간 오프셋되어 있다는 것입니다. 수정되지 않은 평면 형상으로 코드를 테스트하면 모든 것이 제대로 작동합니다. 정점 z 좌표에 대한 오프셋을 추가하면 반환 된 교차점이 잘못되었습니다 (흥미로운 시각화를 위해 교차 테스트 및 mousemove 핸들러에서 작업하십시오). –

답변

0

합니다. 그리고 그때조차도, 교차로 코드는 평평한면에서만 작용합니다. 형상에 평면이 아닌 사각형이 있어야하는 경우 대신 삼각형을 사용해야합니다. 또는 Three.js의 버그를 수정하십시오 (https://github.com/mrdoob/three.js/issues/1357에 문제 제기)

또한 renderer.domElement를 페이지의 왼쪽 상단으로 이동하십시오.

즉,이 시도 : Three.js를의 dev에 지점에서

var s = renderer.domElement.style; 
s.left = s.top = '0px'; 
s.position = 'absolute'; 

var planeGeo = new THREE.PlaneGeometry(400, 200, 40, 40); 
for (var i = 0, l = planeGeo.vertices.length; i < l; i ++) { 
    // planar quad faces 
    var p = planeGeo.vertices[i].position; 
    p.z = Math.sin(p.y/20)*40; 
} 
planeGeo.computeFaceNormals(); 
planeGeo.computeCentroids(); 

[업데이트]를, 당신이 해결 방법으로 사용할 수 있습니다 THREE.GeometryUtils.triangulateQuads있다. 이미 얼굴 법선과 중심을 계산하므로이 한 줄만 코드에 추가하면됩니다.

THREE.GeometryUtils.triangulateQuads(planeGeo);