Improve furniture preview (#5328)

* Improve furniture preview

* improve calc method

* camera.aspectいらないことに気付いた

* refactor & go camera far away

* 対角線の長さで計算するように

* 対角線の計算にhypot()を使用

Co-Authored-By: Aya Morisawa <AyaMorisawa4869@gmail.com>

1 files changed, 12 insertions, 4 deletions

diff --git a/src/client/app/common/views/pages/room/preview.vue b/src/client/app/common/views/pages/room/preview.vue
index 3f849d8c04..94c13cee9f 100644
--- a/src/client/app/common/views/pages/room/preview.vue
+++ b/src/client/app/common/views/pages/room/preview.vue
@@ -10,7 +10,8 @@ export default Vue.extend({
 	data() {
 		return {
 			selected: null,
-			objectHeight: 0
+			objectHeight: 0,
+			orbitRadius: 5
 		};
 	},
 
@@ -57,9 +58,9 @@ export default Vue.extend({
 			const timer = Date.now() * 0.0004;
 			requestAnimationFrame(render);
 			
-			camera.position.y = 2 + this.objectHeight / 2;
-			camera.position.z = Math.cos(timer) * 10;
-			camera.position.x = Math.sin(timer) * 10;
+			camera.position.y = Math.sin(Math.PI / 6) * this.orbitRadius;	// Math.PI / 6 => 30deg
+			camera.position.z = Math.cos(timer) * this.orbitRadius;
+			camera.position.x = Math.sin(timer) * this.orbitRadius;
 			camera.lookAt(new THREE.Vector3(0, this.objectHeight / 2, 0));
 			renderer.render(scene, camera);
 		};
@@ -89,6 +90,13 @@ export default Vue.extend({
 			});
 			const objectBoundingBox = new THREE.Box3().setFromObject(obj);
 			this.objectHeight = objectBoundingBox.max.y - objectBoundingBox.min.y;
+
+			const objectWidth = objectBoundingBox.max.x - objectBoundingBox.min.x;
+			const objectDepth = objectBoundingBox.max.z - objectBoundingBox.min.z;
+
+			const horizontal = Math.hypot(objectWidth, objectDepth) / camera.aspect;
+			this.orbitRadius = Math.max(horizontal, this.objectHeight) * camera.zoom * 0.625 / Math.tan(camera.fov * 0.5 * (Math.PI / 180));
+		
 			scene.add(obj);
 		};