mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-11-22 05:37:55 +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) {
|
||||
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);
|
||||
|
@ -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 };
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user