? ? ? ? 在一些簡單的webgl項目中，我們經常碰到的操作就是兩指縮放，滑動旋轉，這兩種操作經常要進行PC和手機的適配，這里總結一下我踩了的一些小小的坑吧~

? ? ? ? 1.手機與PC獲取屏幕對應點擊位置的方法不同：

? ? ? ? 手機是觸摸獲取位置，PC是點擊鼠標獲取位置兩者的代碼略有不同，這與threejs構建的3D世界沒有關系，僅僅是將點擊/觸摸的位置轉換為窗體位置罷了，我在下面總結一下：

? ? ? ? PC點擊位置：

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; ? ? ? ? 手機觸摸位置：

mouse.x = (event.touches[ 0 ].pageX / window.innerWidth) * 2 -1; mouse.y = -(event.touches[ 0 ].pageY / window.innerHeight) *2 +1; ? ? ? ? 2.手機和電腦移動方式的不同：

? ? ? ? 大家都知道，鼠標和觸摸都分為點擊/按下、移動/滑動、抬起這三個階段，這里就有一個小坑了！點擊抬起手機電腦的操作方式都是一樣的，但是移動這塊，電腦中鼠標點擊之后到下次點擊鼠標的移動會不斷觸發onDocumentMouseMove方法，也就是說鼠標不可能點擊（0,0）位置，突然下一次移動到（10,10）位置，因為期間還有一個鼠標移動事件不斷地觸發。而手機則不同，這次你點擊了（0,0）下次點擊（10,10）就在正常不過了，我們也不需要手指在屏幕上進行滑動。那是這些有什么用呢？

? ? ? ? 這里就不得不提到我最近做的一個小的程序，用threejs實現3D地球展示，當手指滑動/鼠標拖動時旋轉地球，我用的方法是，每次移動獲得x/y的值，減去上次移動的值，得到這次滑動的偏移量然后旋轉地球，這個效果在PC上沒有任何問題，可是到了手機上，每次滑動完屏幕，下次滑動時地球又嗖的一下跳回去了，然后我想了半天才發現是這個原因，手機在滑動完成之后，下一次滑動點擊位置不同，x/y的差值太大了，所以需要在每次點擊時就先儲存到上次移動的值~下面是代碼

function onDocumentMouseDown( event ) {is_click = true; is_move = false; //適配手機 if(event.touches){mouse.x = (event.touches[ 0 ].pageX / window.innerWidth) * 2 -1; mouse.y = -(event.touches[ 0 ].pageY / window.innerHeight) *2 +1; pre_mouse.x = mouse.x; pre_mouse.y = mouse.y; }}function onDocumentMouseMove( event ) {is_move = true; mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; if(is_click){if(earth && earth_cloud){earth.rotation.set(earth.rotation.x - (mouse.y - pre_mouse.y), earth.rotation.y + (mouse.x - pre_mouse.x), earth.rotation.z); earth_cloud.rotation.set(earth_cloud.rotation.x - (mouse.y - pre_mouse.y), earth_cloud.rotation.y + (mouse.x - pre_mouse.x), earth_cloud.rotation.z); }}pre_mouse.x = mouse.x; pre_mouse.y = mouse.y; }function onDocumentTouchMove() {is_move = true; mouse.x = (event.touches[ 0 ].pageX / window.innerWidth) * 2 -1; mouse.y = -(event.touches[ 0 ].pageY / window.innerHeight) *2 +1; if(is_click){if(earth && earth_cloud){earth.rotation.set(earth.rotation.x - (mouse.y - pre_mouse.y), earth.rotation.y + (mouse.x - pre_mouse.x), earth.rotation.z); earth_cloud.rotation.set(earth_cloud.rotation.x - (mouse.y - pre_mouse.y), earth_cloud.rotation.y + (mouse.x - pre_mouse.x), earth_cloud.rotation.z); }}pre_mouse.x = mouse.x; pre_mouse.y = mouse.y; } ? ? ? ? 先總結這兩個坑~大家在開發中遇到什么問題也可以在評論中指出，多交流，多學習才有助于提高嘛~

總結

以上是生活随笔為你收集整理的threejs中PC与手机操作的一些总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。