diff --git a/src/client/app/common/views/pages/room/preview.vue b/src/client/app/common/views/pages/room/preview.vue index 3f849d8c0..94c13cee9 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); };