Edit Question - KnowledgeHub

Title Body

I'm playing around with Three.js and WebGL and can't quite get the controls the way I want. I chose to try to "roll my own" controls since Three.js's FirstPersonControls do not use pointer lock. Anyway, I took most of my code from the built-in FirstPersonControls, converted it to use pointer lock ( movementX instead of pageX - offset ), but I am having trouble smoothing the look motion. Here is my onMouseMove (using originalEvent since it is a jquery event): onMouseMove: function(e) { if(!document.pointerLockElement) return; var moveX = e.originalEvent.movementX || e.originalEvent.mozMovementX || e.originalEvent.webkitMovementX || 0, moveY = e.originalEvent.movementY || e.originalEvent.mozMovementY || e.originalEvent.webkitMovementY || 0; //Update the mouse movement for coming frames this.mouseMovementX = moveX; this.mouseMovementY = moveY; } And my Controls.update() (called on each animation frame, with the THREE.Clock delta): update: function(delta) { if(this.freeze) { return; } //movement, works fine if(this.moveForward) this.camera.translateZ(-(actualMoveSpeed + this.autoSpeedFactor)); if(this.moveBackward) this.camera.translateZ(actualMoveSpeed); if(this.moveLeft) this.camera.translateX(-actualMoveSpeed); if(this.moveRight) this.camera.translateX(actualMoveSpeed); ///////// //ISSUES ARE WITH THIS CODE: ///////// //look movement, really jumpy this.lon += this.mouseMovementX; this.lat -= this.mouseMovementY; this.lat = Math.max(-85, Math.min(85, this.lat)); this.phi = (90 - this.lat) * Math.PI / 180; this.theta = this.lon * Math.PI / 180; this.target.x = this.

Tags (comma-separated) Cancel