diff --git a/src/interface/index.js b/src/interface/index.js
index ebb881b..a0beb48 100644
--- a/src/interface/index.js
+++ b/src/interface/index.js
@@ -156,13 +156,17 @@ class Interface extends React.Component {
   }
 
   componentWillUpdate(nextProps, nextState) {
-    const { control, box, render } = this.state;
+    const { control, box, render, setSize } = this.state;
     if (control && nextState.controlMode !== this.state.controlMode) control.setMode(nextState.controlMode);
     if (box && nextState.settings.dimensions !== this.state.settings.dimensions) {
       const { dimensions } = nextState.settings;
       box.scale.set(dimensions.y, dimensions.z, dimensions.x);
       render();
     }
+    if (setSize && nextProps.width !== this.props.width || nextProps.height !== this.props.height || nextProps.pixelRatio !== this.props.pixelRatio) {
+      console.log('update pixel ratio');
+      setSize(nextProps.width, nextProps.height, nextProps.pixelRatio);
+    }
   }
 
   render() {
@@ -238,7 +242,8 @@ Interface.propTypes = {
   quality: PropTypes.object.isRequired,
   defaultQuality: PropTypes.string.isRequired,
   material: PropTypes.object.isRequired,
-  defaultMaterial: PropTypes.string.isRequired
+  defaultMaterial: PropTypes.string.isRequired,
+  pixelRatio: PropTypes.number.isRequired
 };
 Interface.defaultProps = {
   defaultSettings: baseSettings,
@@ -247,7 +252,8 @@ Interface.defaultProps = {
   quality: qualitySettings,
   defaultQuality: 'medium',
   material: materialSettings,
-  defaultMaterial: 'pla'
+  defaultMaterial: 'pla',
+  pixelRatio: 1
 };
 
 export default injectSheet(styles)(Interface);
diff --git a/src/interface/utils.js b/src/interface/utils.js
index 159ba1f..eed3915 100644
--- a/src/interface/utils.js
+++ b/src/interface/utils.js
@@ -10,7 +10,7 @@ export function placeOnGround(mesh) {
 }
 
 export function createScene(canvas, props, state) {
-  const { width, height, geometry } = props;
+  const { width, height, geometry, pixelRatio } = props;
   const { controlMode, settings } = state;
 
   // center geometry
@@ -22,13 +22,20 @@ export function createScene(canvas, props, state) {
 
   const renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
   renderer.setClearColor(0xffffff, 0);
-  renderer.setSize(width, height);
 
   const scene = new THREE.Scene();
 
-  const camera = new THREE.PerspectiveCamera(50, width / height, 1, 10000);
+  const camera = new THREE.PerspectiveCamera(50, 1, 1, 10000);
   camera.position.set(0, 400, 300);
 
+  const setSize = (width, height, pixelRatio = 1) => {
+    renderer.setSize(width, height);
+    renderer.setPixelRatio(pixelRatio);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+    render();
+  };
+
   const directionalLight = new THREE.DirectionalLight(0xd5d5d5);
   directionalLight.position.set(1, 1, 1);
   scene.add(directionalLight);
@@ -71,7 +78,7 @@ export function createScene(canvas, props, state) {
   const { dimensions } = settings;
   box.scale.set(dimensions.y, dimensions.z, dimensions.x);
 
-  render();
+  setSize(width, height, pixelRatio);
 
-  return { control, editorControls, scene, mesh, camera, renderer, render, box };
+  return { control, editorControls, scene, mesh, camera, renderer, render, box, setSize };
 }