mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-11-22 21:47:59 +01:00
update size when props change
This commit is contained in:
parent
10055824aa
commit
fcfe7f7bc6
@ -156,13 +156,17 @@ class Interface extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
componentWillUpdate(nextProps, nextState) {
|
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 (control && nextState.controlMode !== this.state.controlMode) control.setMode(nextState.controlMode);
|
||||||
if (box && nextState.settings.dimensions !== this.state.settings.dimensions) {
|
if (box && nextState.settings.dimensions !== this.state.settings.dimensions) {
|
||||||
const { dimensions } = nextState.settings;
|
const { dimensions } = nextState.settings;
|
||||||
box.scale.set(dimensions.y, dimensions.z, dimensions.x);
|
box.scale.set(dimensions.y, dimensions.z, dimensions.x);
|
||||||
render();
|
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() {
|
render() {
|
||||||
@ -238,7 +242,8 @@ Interface.propTypes = {
|
|||||||
quality: PropTypes.object.isRequired,
|
quality: PropTypes.object.isRequired,
|
||||||
defaultQuality: PropTypes.string.isRequired,
|
defaultQuality: PropTypes.string.isRequired,
|
||||||
material: PropTypes.object.isRequired,
|
material: PropTypes.object.isRequired,
|
||||||
defaultMaterial: PropTypes.string.isRequired
|
defaultMaterial: PropTypes.string.isRequired,
|
||||||
|
pixelRatio: PropTypes.number.isRequired
|
||||||
};
|
};
|
||||||
Interface.defaultProps = {
|
Interface.defaultProps = {
|
||||||
defaultSettings: baseSettings,
|
defaultSettings: baseSettings,
|
||||||
@ -247,7 +252,8 @@ Interface.defaultProps = {
|
|||||||
quality: qualitySettings,
|
quality: qualitySettings,
|
||||||
defaultQuality: 'medium',
|
defaultQuality: 'medium',
|
||||||
material: materialSettings,
|
material: materialSettings,
|
||||||
defaultMaterial: 'pla'
|
defaultMaterial: 'pla',
|
||||||
|
pixelRatio: 1
|
||||||
};
|
};
|
||||||
|
|
||||||
export default injectSheet(styles)(Interface);
|
export default injectSheet(styles)(Interface);
|
||||||
|
@ -10,7 +10,7 @@ export function placeOnGround(mesh) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function createScene(canvas, props, state) {
|
export function createScene(canvas, props, state) {
|
||||||
const { width, height, geometry } = props;
|
const { width, height, geometry, pixelRatio } = props;
|
||||||
const { controlMode, settings } = state;
|
const { controlMode, settings } = state;
|
||||||
|
|
||||||
// center geometry
|
// center geometry
|
||||||
@ -22,13 +22,20 @@ export function createScene(canvas, props, state) {
|
|||||||
|
|
||||||
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
|
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
|
||||||
renderer.setClearColor(0xffffff, 0);
|
renderer.setClearColor(0xffffff, 0);
|
||||||
renderer.setSize(width, height);
|
|
||||||
|
|
||||||
const scene = new THREE.Scene();
|
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);
|
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);
|
const directionalLight = new THREE.DirectionalLight(0xd5d5d5);
|
||||||
directionalLight.position.set(1, 1, 1);
|
directionalLight.position.set(1, 1, 1);
|
||||||
scene.add(directionalLight);
|
scene.add(directionalLight);
|
||||||
@ -71,7 +78,7 @@ export function createScene(canvas, props, state) {
|
|||||||
const { dimensions } = settings;
|
const { dimensions } = settings;
|
||||||
box.scale.set(dimensions.y, dimensions.z, dimensions.x);
|
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 };
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user