zcy
/
solvespace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Three.js: correctly handle browser zoom. 

Before this commit, controls went wild on zoom ratios other than 1:1,
and the rendering wasn't too good either.
pull/10/head
whitequark 2016-06-11 22:45:23 +00:00
parent a425395fe3
commit 44223ea332
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
res/threejs/SolveSpaceControls.js
View File

@ -1,3 +1,5 @@
window.devicePixelRatio = window.devicePixelRatio || 1;
SolvespaceCamera = function(renderWidth, renderHeight, scale, up, right, offset) { SolvespaceCamera = function(renderWidth, renderHeight, scale, up, right, offset) {
THREE.Camera.call(this); THREE.Camera.call(this);
@ -153,13 +155,15 @@ SolvespaceControls = function(object, domElement) {
switch (event.button) { switch (event.button) {
case 0: case 0:
_rotateCur.set(event.screenX, event.screenY); _rotateCur.set(event.screenX / window.devicePixelRatio,
event.screenY / window.devicePixelRatio);
_rotatePrev.copy(_rotateCur); _rotatePrev.copy(_rotateCur);
document.addEventListener('mousemove', mousemove, false); document.addEventListener('mousemove', mousemove, false);
document.addEventListener('mouseup', mouseup, false); document.addEventListener('mouseup', mouseup, false);
break; break;
case 2: case 2:
_offsetCur.set(event.screenX, event.screenY); _offsetCur.set(event.screenX / window.devicePixelRatio,
event.screenY / window.devicePixelRatio);
_offsetPrev.copy(_offsetCur); _offsetPrev.copy(_offsetCur);
document.addEventListener('mousemove', mousemove, false); document.addEventListener('mousemove', mousemove, false);
document.addEventListener('mouseup', mouseup, false); document.addEventListener('mouseup', mouseup, false);
@ -182,7 +186,8 @@ SolvespaceControls = function(object, domElement) {
function mousemove(event) { function mousemove(event) {
switch (event.button) { switch (event.button) {
case 0: case 0:
_rotateCur.set(event.screenX, event.screenY); _rotateCur.set(event.screenX / window.devicePixelRatio,
event.screenY / window.devicePixelRatio);
var diff = new THREE.Vector2().subVectors(_rotateCur, _rotatePrev) var diff = new THREE.Vector2().subVectors(_rotateCur, _rotatePrev)
.multiplyScalar(1 / object.zoomScale); .multiplyScalar(1 / object.zoomScale);
object.rotate(-0.3 * Math.PI / 180 * diff.x * object.zoomScale, object.rotate(-0.3 * Math.PI / 180 * diff.x * object.zoomScale,
@ -192,7 +197,8 @@ SolvespaceControls = function(object, domElement) {
break; break;
case 2: case 2:
_mouseMoved = true; _mouseMoved = true;
_offsetCur.set(event.screenX, event.screenY); _offsetCur.set(event.screenX / window.devicePixelRatio,
event.screenY / window.devicePixelRatio);
var diff = new THREE.Vector2().subVectors(_offsetCur, _offsetPrev) var diff = new THREE.Vector2().subVectors(_offsetCur, _offsetPrev)
.multiplyScalar(1 / object.zoomScale); .multiplyScalar(1 / object.zoomScale);
object.offsetProj(diff.x, -diff.y); object.offsetProj(diff.x, -diff.y);
@ -369,8 +375,11 @@ solvespace = function(obj, params) {
scene.add(ambientLight); scene.add(ambientLight);
renderer = new THREE.WebGLRenderer({ antialias: true}); renderer = new THREE.WebGLRenderer({ antialias: true});
renderer.setSize(width, height); renderer.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
renderer.autoClear = false; renderer.autoClear = false;
renderer.domElement.style =
"width: " + width + "px;" +
"height: " + height + "px;";
controls = new SolvespaceControls(camera, renderer.domElement); controls = new SolvespaceControls(camera, renderer.domElement);
controls.addEventListener("change", render); controls.addEventListener("change", render);