이전 코드를 Three.js로 업데이트 할 수 없습니다.

Question

예전 THREE.js 릴리스에서 threejs_mousepick.html 예제를 현재 버전으로 업데이트 할 때 지난 2 주 동안 막혔습니다. 오, 예, 저는 프로그래밍에 초보자입니다.

나는 피들을 만들었는데 누군가가 울면서 나를 돕는 데 도움이 될 것입니다. CANNON.js는 훌륭한 API이며, 오늘날의 THREE.js로 예가 너무 오래되었거나 사용할 수 없다는 것을 보니 슬픈 일입니다. 나는 그것이 많은 일이고 도움이되는 느낌이지만 처음에는 도움이 필요하다는 것을 이해합니다. 그래서 @schteppe 당신이 이것을 읽으면, 연락하십시오 : 나는 이것에 대해 약간의 시간을 할애 할 용의가 있습니다.

Answer 1

답변은 질문과 마찬가지로 광범위합니다.

THREE.Raycaster() 및 THREE.Plane()을 사용하면 많은 일이 간단 해집니다. projectOntoPlane, findNearestIntersectingObject, getRayCasterFromScreenCoord과 같은 기능을 없애고 setScreenPerpCenter 기능 (이름은 우스꽝 스럽지만 그대로 두었습니다)을 단 한 줄로 단축합니다.

jsfiddle 예를 들어 R87

gplane가 THREE.Plane()입니다 :

var gplane = new THREE.Plane(), gplaneNormal = new THREE.Vector3(); 

는 descripting 주석에 기록 된 바와 같이, 우리는 우리가 공동으로 우리의 관점을 이동 가상 비행기를 만들 수 있습니다. 여기

function setScreenPerpCenter(point) { 
    gplane.setFromNormalAndCoplanarPoint(gplaneNormal.subVectors(camera.position, point).normalize(), point); 
} 

, 우리는 일반 카메라의 위치와 큐브에 클릭의 점 사이 뺄셈의 정규화 된 벡터이고, 일반과 동일 평면 점에서 우리 비행기를 설정하고 점이다 클릭 포인트 자체 해당 방법에 대해 읽어보십시오 here