diff --git a/src/assets/stylesheets/scene-ui.scss b/src/assets/stylesheets/scene-ui.scss index 55b72bfcbc8ddb2b8ce3d3dd37b6f92bd5912744..7a881a03eda9433771646620d913d884bd6b53f8 100644 --- a/src/assets/stylesheets/scene-ui.scss +++ b/src/assets/stylesheets/scene-ui.scss @@ -89,12 +89,13 @@ height: 115%; top: -40px; left: -40px; + img { width: 100%; height: 100%; - background-color: black; } + background-color: black; filter: blur(10px); } diff --git a/src/assets/stylesheets/scene.scss b/src/assets/stylesheets/scene.scss index 39c9092e8220ec40cc8bc6f7b26e70ddaeab5d17..2c2d78c7405011710ff64e92ef59eafe94b69dab 100644 --- a/src/assets/stylesheets/scene.scss +++ b/src/assets/stylesheets/scene.scss @@ -1,7 +1,7 @@ @import 'shared'; @import 'loader'; -.brightened { +canvas { filter: saturate(1.1) brightness(1.1) contrast(1.1); } diff --git a/src/components/scene-preview-camera.js b/src/components/scene-preview-camera.js index 17024305c39c01f658c4e5c09fa2d60afc7b246f..0b7beaa29679518f63fceda44052f9efe37c2a1e 100644 --- a/src/components/scene-preview-camera.js +++ b/src/components/scene-preview-camera.js @@ -29,8 +29,7 @@ AFRAME.registerComponent("scene-preview-camera", { }, tick: function() { - let t = (new Date().getTime() - this.startTime) / (1000.0 * DURATION); - t = (Math.sin(t * Math.PI * 2) + 1.0) / 2.0; + const t = (new Date().getTime() - this.startTime) / (1000.0 * DURATION); const from = this.backwards ? this.targetPoint : this.startPoint; const to = this.backwards ? this.startPoint : this.targetPoint; @@ -43,7 +42,7 @@ AFRAME.registerComponent("scene-preview-camera", { this.el.object3D.position.set(lerp(from.x, to.x, t), lerp(from.y, to.y, t), lerp(from.z, to.z, t)); this.el.object3D.rotation.setFromQuaternion(newRot); - if (t >= 1.0) { + if (t >= 0.99) { this.backwards = !this.backwards; this.startTime = new Date().getTime(); } diff --git a/src/react-components/scene-ui.js b/src/react-components/scene-ui.js index 2007269c186e2a963f7651b481b8df46abbf497d..ef47cc5985308ab80d05eab0f6a9044c86de0a2b 100644 --- a/src/react-components/scene-ui.js +++ b/src/react-components/scene-ui.js @@ -25,11 +25,18 @@ class SceneUI extends Component { }; state = { - screenshotReady: false + showScreenshot: false }; constructor(props) { super(props); + + // Show screenshot if scene isn't loaded in 5 seconds + setTimeout(() => { + if (!this.props.sceneLoaded) { + this.setState({ showScreenshot: true }); + } + }, 5000); } componentDidMount() { @@ -60,18 +67,16 @@ class SceneUI extends Component { }; render() { - const showScreenshot = !this.props.sceneLoaded || !this.props.sceneId; - return ( <IntlProvider locale={lang} messages={messages}> <div className={styles.ui}> <div className={classNames({ [styles.screenshot]: true, - [styles.screenshotHidden]: !showScreenshot + [styles.screenshotHidden]: this.props.sceneLoaded })} > - <img src={this.props.sceneScreenshotURL} onLoad={() => this.setState({ screenshotReady: true })} /> + {this.state.showScreenshot && <img src={this.props.sceneScreenshotURL} />} </div> <div className={styles.whiteOverlay} /> <div className={styles.grid}> diff --git a/src/scene.js b/src/scene.js index c72e1bc11de69cc6f2e1b3a5cb3562e990ea936a..4928184b1c03f0e5ba6afde63847f9dcdee295fb 100644 --- a/src/scene.js +++ b/src/scene.js @@ -87,7 +87,6 @@ function mountUI(scene, props = {}) { const onReady = async () => { const scene = document.querySelector("a-scene"); window.APP.scene = scene; - document.querySelector("canvas").classList.add("brightened"); const sceneId = qs.get("scene_id") || document.location.pathname.substring(1).split("/")[1]; console.log(`Scene ID: ${sceneId}`);