이 경우 지금 2 주 이상을 threejs하는 드래곤 보트 축제에서 배우고, 지금은 인터넷 상대적으로 무거운 물질로부터 수집 된 프로젝트에 구덩이의 크기를 강화 것을 요약, 다음과 같은 오류가 알려 위대한 하나님 감사합니다.
첫째, 데이터 threejs 학습
- Threejs 시작하기
- 공식 웹 사이트 Threejs
- Threejs 구오 롬반 기술 블로그
- 기술 블로그에 늦게 황혼 치
- Threejs 소스 설명
- THREEJS 개발 가이드 및 장 케이스
프로젝트 구덩이 요약의 두 번째 크기
1.의 효과를 달성하기 위해 :
2. 어려운 점
- 어떻게 부하 OBJ 및 MTL 파일을 달성하기 위해
// 가져 오기 OBJ 외부 모델의 기능 은 setObj () { // 로드 MTL 에 대한 합니다 (하자 I = 0; 나는 <objUrl.length 내가 ++ ) { // 로드 디스플레이 진행 VAR 으로 onProgress = 함수 (XHR) { IF (xhr.lengthComputable) { var에 에는 percentComplete = xhr.loaded / xhr.total * 100; CONSOLE.LOG (Math.round (에는 percentComplete 2) + '% 다운로드 됨' ); } } // 로드 에러를 호출 VAR을 의 OnError = 함수 () {}, 새로운 신규 THREE.MTLLoader () .setPath ('소스 /' ) .load (mtlUrl [I] + '. MTL' 기능 (재료) { materials.preload (); 새로운 THREE.OBJLoader () .setMaterials (재료) .setPath ( "소스 / ' ) .load (objUrl [I] '. OBJ'+, 기능 (오브젝트) { // 设置模型的位置 object.position.x = 2 나 * + 20 ] object.position.y = 2 ; object.position.z = 2 ; object.castShadow = true로 ; object.receiveShadow = true로 ; // 모델을 현장에 추가됩니다 (객체) scene.add; // objects.push (개체); }는으로 onProgress의의 OnError ) }); } }
- 수입 3D 모델 후 드래그를 달성하는 방법
함수 드래그 THREE.DragControls이지만, 우리가 유형 그룹인지를 확인, 외부 모델을 가져오고 dragControls이 찾아부터 직접 쓰기 dragcontrols 템플릿 경우, 당신은 찾을 수 있습니다, 드래그 형 메쉬의 유형입니다 전화 간단하게 드래그를 실현할 수 없습니다.
// 모델은 드래그 실현 기능 드래그 (객체) { // 초기화 끌기 조절 var에 dragControls = 새 새 , THREE.DragControls (개체, 카메라, renderer.domElement) dragControls.addEventListener ( 'hoveron', 기능 (이벤트) { /을 / 객체하게 선택된 제어 대상 바인딩 변환 transform.attach (event.object하는) }) // 끌기 시작 dragControls.addEventListener ( '단지 dragStart' 함수 () { controls.enabled = false로를 ] )} / / 드래그 끝 dragControls.addEventListener ( 'dragend' 함수 () { controls.enabled = 참 ; }); }
당신은 드래그의 원칙을 구현 threejs보고있다이 시간, 당신은 THREE.Raycaster를 사용해야 세계는, 마우스의 좌표에 2 차원 좌표를 변환, 마우스의 2 차원 좌표를 캡처, 카메라에서 광선을 방출 마우스 위치를 클릭하여 (2 차원 좌표)와 가까울수록 전진 dragControls 전화 마지막 검사 자손을 허용하고까지의 거리에 따른 소자의 정렬 광선에 의해 교차 된 물체의 배열을 상기 빔의 위치를 계산하고 취득하는 현재 카메라 행렬.
참고 : 판사가이 위치에 마우스 클릭 또는 여기에 터치 스크린 클릭을 검색하는 것으로, 휴대 단말기 또는 PC 결국 현재 페이지에주의를 지불해야하는 위치도, 드래그를 실현 페이지의 끝을 이동하려면 :
// 이동 단말기 또는 PC의 결정 VAR의 OS = 함수 () { VAR UA가 = navigator.userAgent, isWindowsPhone = / (창문 : 전화) / (UA) .test, isSymbian = / (? SymbianOS) / .test (UA) || isWindowsPhone, isAndroid = / (안드로이드?) / (UA) .test, isFireFox = / : / (파이어 폭스?) (UA) .test, isChrome = / (? : 크롬 | CriOS) / .test (UA), isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && / (!? 모바일) / 테스트 (UA)) || (isFireFox && / (.? 타블렛) / .test (UA)), isPhone = /(?:iPhone)/.test(ua) &&! isTablet, ISPC는 =! isPhone &&!는 && isAndroid! isSymbian; 반환 { isTablet : isTablet, isPhone : isPhone, isAndroid : isAndroid, ISPC : ISPC }; } (); ............ var에 마우스 = 새로운 THREE.Vector2 (); 경우 (os.isAndroid || os.isPhone) { // 移动端点击位置 VAR의 터치 event.touches = [0 ]; mouse.x = (touch.pageX / window.innerWidth) * 1 - 2 ; mouse.y= - (touch.pageY / window.innerHeight) * 2 + 1이다. ] } 다른 IF (os.isTablet) { // 이동 종료 위치 클릭 VAR의 터치 event.touches = [0 ] mouse.x = (touch.pageX / window.innerWidth) * 2 - 1이다. ] mouse.y = - (touch.pageY / window.innerHeight) * 2 + 1이다. ] } 다른 IF (os.isPc) { // 마우스 클릭 위치 원하는 지점을 계산 raycaster . -1의 범위에서 화면의 중심점에 위치 1 mouse.x = (event.clientX / window.innerWidth) * 2 - 1이다. ] mouse.y . = - (event.clientY / window.innerHeight) 1 + 2 * ; }
- 어떻게 디스플레이 좌표 변경
수요는 우리가 표시하는 세 가지 GUI를 사용하여이 경우, 디스플레이가 회전 좌표 또는 번역 제어 할 수있는 사용자가 필요합니다. 즉 :
초기화 () { // 设置의 GUI选项의 var에 gui_tag = 새로운 기능 () { 이 .translate = 진정한 ; } VAR의 GUI가 = 새로운 dat.GUI (); gui.add (gui_tag, '번역' ); ... } // 时刻渲染 기능 애니메이션 () { ...... 경우 (gui_tag.translate === 사실 ) { transform.setMode ( "변환" ); } 다른 { transform.setMode ( "회전" ); } }
- 어떻게 회전 및 줌 카메라를 제어하는 방법
제어하기 위해 카메라를 회전 orbitControl를 사용하지만, 그것은 당신이 카메라를 더한 시간을 회전 할 때 함께 이동 카메라를 찾을 모델을 드래그 할 때, 모델을 드래그하는이 시간이 적은대로되고, 것이라는 점을 주목할 필요가있다 때 우리는 추가 할 :
transform.addEventListener ( '드래그 변경된' 함수 (이벤트) { orbit.enabled ! = event.value 단계; });
전체 코드는 다음과 같습니다
함수 초기화 () { // 添加相机的旋转 궤도 = 새로운 THREE.OrbitControls (카메라 renderer.domElement); orbit.enableDamping = 진정한 ; orbit.update (); transform.addEventListener ( '드래그 변경된' 함수 (이벤트) { orbit.enabled ! = event.value 단계; }); orbit.addEventListener ( '변화' , 렌더링); } ... 함수 애니메이션 () { ... orbit.update (); }
- 어떻게 마이크로 채널 애플릿에 포함 된 페이지 threejs을 표시합니다
마이크로 채널 애플릿에 고정 된 라벨 형식을 가지고, 우리는 threejs 모델을 찾아 특정 페이지로 이동하려면 웹보기를 사용할 수 있습니다.
3. 나머지 문제
디스플레이의 종류는 다음 일반 PC 단부 페이지 좌표 변환의 특징을 표시 할 수 있지만, 실패 할 끝으로 이동.
4. 참고 낮은 함정은
- 다음과 같이 index.html 파일을 받게됩니다, 두 번 클릭해도 열 수 없습니다 :
해결 방법 : 열 webstorm을 사용할 수 있으며,이 HTTP했다 : localhost를 요청.
- 터치 touchstart 가져온 파일에서 듣고있을 것입니다 다음과 같이이 시간이 주어집니다 :
{: 거짓 수동} 캔 이때 하였다.
예를 들면 :
scope.domElement.addEventListener ( 'touchstart'onTouchStart {수동 : 거짓 });