suzanne.soy/solvespace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Three.js: correctly handle browser zoom.

Browse Source 
Before this commit, controls went wild on zoom ratios other than 1:1,
and the rendering wasn't too good either.
This commit is contained in:
whitequark 2016-06-11 20:45:37 +00:00
parent 917a7b93ce
commit fb2f32eb72
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/export.cpp
View File

@ -859,6 +859,8 @@ void SolveSpaceUI::ExportMeshAsThreeJsTo(FILE *f, const std::string &filename,
<script> <script>
</script> </script>
<script> <script>
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);
@ -1014,13 +1016,13 @@ SolvespaceCamera = function(renderWidth, renderHeight, scale, up, right, offset)
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);
@ -1043,7 +1045,7 @@ SolvespaceCamera = function(renderWidth, renderHeight, scale, up, right, offset)
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,
@ -1053,7 +1055,7 @@ SolvespaceCamera = function(renderWidth, renderHeight, scale, up, right, offset)
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);
@ -1197,6 +1199,9 @@ SolvespaceCamera = function(renderWidth, renderHeight, scale, up, right, offset)
height = params.height; height = params.height;
} }
width *= window.devicePixelRatio;
height *= window.devicePixelRatio;
domElement = init(); domElement = init();
render(); render();
return domElement; return domElement;
@ -1206,8 +1211,8 @@ SolvespaceCamera = function(renderWidth, renderHeight, scale, up, right, offset)
scene = new THREE.Scene(); scene = new THREE.Scene();
edgeScene = new THREE.Scene(); edgeScene = new THREE.Scene();
camera = new SolvespaceCamera(width, camera = new SolvespaceCamera(width/window.devicePixelRatio,
height, 5, new THREE.Vector3(0, 1, 0), height/window.devicePixelRatio, 5, new THREE.Vector3(0, 1, 0),
new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 0, 0)); new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 0, 0));
mesh = createMesh(obj); mesh = createMesh(obj);
@ -1232,6 +1237,7 @@ SolvespaceCamera = function(renderWidth, renderHeight, scale, up, right, offset)
renderer = new THREE.WebGLRenderer({ antialias: true}); renderer = new THREE.WebGLRenderer({ antialias: true});
renderer.setSize(width, height); renderer.setSize(width, height);
renderer.autoClear = false; renderer.autoClear = false;
renderer.domElement.style = "width:"+width/window.devicePixelRatio+"px;height:"+height/window.devicePixelRatio+"px;";
controls = new SolvespaceControls(camera, renderer.domElement); controls = new SolvespaceControls(camera, renderer.domElement);
controls.addEventListener("change", render); controls.addEventListener("change", render);