माउस

Question

के साथ थ्री.जेएस में कैमरा घुमाएं मेरे पास मेरे दृश्य में बहुत सी वस्तुएं हैं इसलिए घूमने से उनमें से सभी दर्द हो सकते हैं। तो माउस क्लिक और ड्रैग पर मूल रूप से कैमरे को स्थानांतरित करने का सबसे आसान तरीका क्या है? इस तरह सभी रोशनी, दृश्य में ऑब्जेक्ट एक ही स्थान पर हैं, इसलिए एकमात्र चीज़ बदलना कैमरा है। Three.js एक बिंदु के चारों ओर एक कैमरा घुमाने के लिए एक रास्ता प्रदान नहीं करता है, या यह करता है?

आप

Answer 1

Here's a project with a rotating camera धन्यवाद। स्रोत के माध्यम से देखकर ऐसा लगता है कि कैमरे की स्थिति को सर्कल में ले जाना है।

function onDocumentMouseMove(event) { 

    event.preventDefault(); 

    if (isMouseDown) { 

     theta = - ((event.clientX - onMouseDownPosition.x) * 0.5) 
       + onMouseDownTheta; 
     phi = ((event.clientY - onMouseDownPosition.y) * 0.5) 
       + onMouseDownPhi; 

     phi = Math.min(180, Math.max(0, phi)); 

     camera.position.x = radious * Math.sin(theta * Math.PI/360) 
          * Math.cos(phi * Math.PI/360); 
     camera.position.y = radious * Math.sin(phi * Math.PI/360); 
     camera.position.z = radious * Math.cos(theta * Math.PI/360) 
          * Math.cos(phi * Math.PI/360); 
     camera.updateMatrix(); 

    } 

    mouse3D = projector.unprojectVector(
     new THREE.Vector3(
      (event.clientX/renderer.domElement.width) * 2 - 1, 
      - (event.clientY/renderer.domElement.height) * 2 + 1, 
      0.5 
     ), 
     camera 
    ); 
    ray.direction = mouse3D.subSelf(camera.position).normalize(); 

    interact(); 
    render(); 

} 

Here's another demo और यह एक में मैं यह सिर्फ एक पैरामीटर, जो शायद जाने के लिए बेहतर तरीका है के रूप में कैमरे के साथ एक नई THREE.TrackballControls वस्तु बनाता है लगता है।

controls = new THREE.TrackballControls(camera); 
controls.target.set(0, 0, 0) 

Answer 2

THREE.PointerLockControls

Answer 3

पर एक नजर डालें निम्न उदाहरण

http://threejs.org/examples/#misc_controls_orbit

http://threejs.org/examples/#misc_controls_trackball

वहाँ विभिन्न माउस नियंत्रण के लिए अन्य उदाहरण हैं, लेकिन दोनों पर एक नज़र इनमें से कैमरे को एक बिंदु के चारों ओर घूमने और माउस व्हील, मुख्य डाय के साथ ज़ूम इन और आउट करने की अनुमति मिलती है वरीयता है ऑर्बिट कंट्रोल्स कैमरे की दिशा को लागू करता है, और ट्रैकबॉल कंट्रोल्स कैमरे को ऊपर-नीचे घुमाने की अनुमति देता है।

आपको बस इतना करना है अपने HTML दस्तावेज़

<script src="js/OrbitControls.js"></script> 

में नियंत्रण शामिल हैं और अपने स्रोत में इस लाइन में शामिल है

controls = new THREE.OrbitControls(camera, renderer.domElement); 

Answer 4

यह चलती/के लिए एक अच्छा प्रारंभिक बिंदु के रूप में काम कर सकते हैं घूर्णन/माउस/ट्रैकपैड (टाइपस्क्रिप्ट में) के साथ कैमरा ज़ूम करना:

class CameraControl { 
    zoomMode: boolean = false 
    press: boolean = false 
    sensitivity: number = 0.02 

    constructor(renderer: Three.Renderer, public camera: Three.PerspectiveCamera, updateCallback:() => void){ 
     renderer.domElement.addEventListener('mousemove', event => { 
      if(!this.press){ return } 

      if(event.button == 0){ 
       camera.position.y -= event.movementY * this.sensitivity 
       camera.position.x -= event.movementX * this.sensitivity   
      } else if(event.button == 2){ 
       camera.quaternion.y -= event.movementX * this.sensitivity/10 
       camera.quaternion.x -= event.movementY * this.sensitivity/10 
      } 

      updateCallback() 
     })  

     renderer.domElement.addEventListener('mousedown',() => { this.press = true }) 
     renderer.domElement.addEventListener('mouseup',() => { this.press = false }) 
     renderer.domElement.addEventListener('mouseleave',() => { this.press = false }) 

     document.addEventListener('keydown', event => { 
      if(event.key == 'Shift'){ 
       this.zoomMode = true 
      } 
     }) 

     document.addEventListener('keyup', event => { 
      if(event.key == 'Shift'){ 
       this.zoomMode = false 
      } 
     }) 

     renderer.domElement.addEventListener('mousewheel', event => { 
      if(this.zoomMode){ 
       camera.fov += event.wheelDelta * this.sensitivity 
       camera.updateProjectionMatrix() 
      } else { 
       camera.position.z += event.wheelDelta * this.sensitivity 
      } 

      updateCallback() 
     }) 
    } 
} 

की तरह में छोड़:

this.cameraControl = new CameraControl(renderer, camera,() => { 
    // you might want to rerender on camera update if you are rerendering all the time 
    window.requestAnimationFrame(() => renderer.render(scene, camera)) 
}) 

नियंत्रण:

• चाल जबकि [ट्रैकपैड पर माउस छोड़ दिया/एकल उंगली पकड़] x/y विमान में कैमरा ले जाने के लिए
• कदम [ माउस व्हील/ट्रैकपैड] पर दो उंगलियों
• पकड़ shift + [माउस व्हील/दो फाई z-दिशा में ऊपर/नीचे स्थानांतरित करने के लिए ट्रैकपैड पर] ngers बढ़ती/घटते क्षेत्र के देखने
• चाल जबकि [माउस ट्रैकपैड पर सही/दो उंगलियों] पकड़े कैमरा बारी बारी से करने के लिए (चार का समुदाय)

इसके अतिरिक्त के माध्यम से/बाहर ज़ूम करने के लिए :

यदि आप फील्ड-ऑफ-व्यू को बदलने के बजाय 'दूरी' (yz के साथ) को बदलकर ज़ूम करना चाहते हैं तो आप स्थिति की वाई और जेड के अनुपात को रखते हुए कैमरे की स्थिति y और z को ऊपर/नीचे टक्कर दे सकते हैं जैसे:

// in mousewheel event listener in zoom mode 
const ratio = camera.position.y/camera.position.z 
camera.position.y += (event.wheelDelta * this.sensitivity * ratio) 
camera.position.z += (event.wheelDelta * this.sensitivity)