From 6b571a779905a5cf17307a939d75c6da547e5ad4 Mon Sep 17 00:00:00 2001 From: Oni-Men Date: Thu, 22 Aug 2019 18:34:15 +0900 Subject: [PATCH] Improve furniture preview (#5328) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Improve furniture preview * improve calc method * camera.aspectいらないことに気付いた * refactor & go camera far away * 対角線の長さで計算するように * 対角線の計算にhypot()を使用 Co-Authored-By: Aya Morisawa --- .../app/common/views/pages/room/preview.vue | 16 ++++++++++++---- 1 file 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); };