\uba3c\uc800 \uc0ac\uc6a9\ud558\ub294 \ud568\uc218\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. (\uc5d0\ub2c8\uba54\uc774\uc158\uc744 \uc704\ud558 GSAP \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc600\uc74c)<\/p>\n
\r\n_zoomFit(object3D, viewMode, bFront, viewAngle) {\r\n const box = new THREE.Box3().setFromObject(object3D);\r\n const sizeBox = box.getSize(new THREE.Vector3()).length();\r\n const centerBox = box.getCenter(new THREE.Vector3());\r\n \r\n const offset = new THREE.Vector3(viewMode===\"X\"?1:0, viewMode===\"Y\"?1:0, viewMode===\"Z\"?1:0);\r\n if(!bFront) offset.negate();\r\n offset.applyAxisAngle(new THREE.Vector3(1,0,0), THREE.Math.degToRad(viewAngle));\r\n\r\n const newPosition = new THREE.Vector3().copy(centerBox).add(offset);\r\n const halfSizeModel = sizeBox * 0.5;\r\n const halfFov = THREE.Math.degToRad(this._camera.fov * .5);\r\n const distance = halfSizeModel \/ Math.tan(halfFov);\r\n const direction = (new THREE.Vector3()).subVectors(newPosition, centerBox).normalize();\r\n newPosition.copy(direction.multiplyScalar(distance).add(centerBox));\r\n\r\n const oldPosition = this._camera.position.clone();\r\n gsap.to(this._camera.position, { duration: 0.5, x: newPosition.x, y: newPosition.y, z: newPosition.z});\r\n\r\n \/\/ camera.lookAt(centerBox.x, centerBox.y, centerBox.z); \/\/ OrbitControls\ub97c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\uc740 \uacbd\uc6b0\r\n \/\/ this._controls.target.copy(centerBox); \/\/ OrbitControls\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\ub294 \uacbd\uc6b0\r\n gsap.to(this._controls.target, { duration: 0.5, \r\n x: centerBox.x, y: centerBox.y, z: centerBox.z}); \r\n}\r\n<\/pre>\n\uc0ac\uc6a9\uc740 \uc90c\uc778 \ub300\uc0c1\uc744 \ub9c8\uc6b0\uc2a4\ub85c \ud074\ub9ad\ud574 \uc120\ud0dd\ud55c\ub2e4\uace0 \ud560\ub54c.. \uba3c\uc800 RayCaster \uac1d\uccb4\ub97c \ud558\ub098 \uc815\uc758\ud558\uad6c\uc694.<\/p>\n
\r\n_setupPicking() {\r\n const raycaster = new THREE.Raycaster();\r\n this._divContainer.addEventListener(\"click\", this._onClick.bind(this));\r\n this._raycaster = raycaster;\r\n}\r\n<\/pre>\n\ud074\ub9ad \uc774\ubca4\ud2b8\uc778 _onClick\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n_onClick(event) {\r\n if(!event.ctrlKey) return false;\r\n const width = this._divContainer.clientWidth;\r\n const height = this._divContainer.clientHeight;\r\n const xy = {x: (event.offsetX \/ width) * 2 - 1, y: -(event.offsetY \/ height) * 2 + 1};\r\n this._raycaster.setFromCamera(xy, this._camera);\r\n const targets = this._raycaster.intersectObjects(this._scene.children);\r\n if(targets.length > 0) {\r\n const mesh = targets[0].object;\r\n this._zoomFit(mesh, \"Y\", true, 50);\r\n }\r\n}\r\n<\/pre>\n\uc774 \uc560\ub2c8\uba54\uc774\uc158 ZoomIn \uae30\ub2a5\uc744 \uc774\uc6a9\ud574 \ub9cc\ub4e0 \ub2e8\uc704 \uae30\ub2a5\uc5d0 \ub300\ud55c \uc608\uc81c \uc601\uc0c1\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n