dbfd64a22594a9594b0e175b6f5dae457b75fd3c.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433
  1. System.register(["cc", "cc/env"], function (_export, _context) {
  2. "use strict";
  3. var _cclegacy, __checkObsolete__, __checkObsoleteInNamespace__, _decorator, Component, input, Input, lerp, Node, Quat, Vec2, Vec3, EDITOR, _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, _dec11, _dec12, _dec13, _dec14, _dec15, _dec16, _class, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11, _descriptor12, _descriptor13, _descriptor14, _crd, ccclass, property, menu, tempVec3, tempVec3_2, tempQuat, DeltaFactor, OrbitCamera;
  4. function _initializerDefineProperty(target, property, descriptor, context) { if (!descriptor) return; Object.defineProperty(target, property, { enumerable: descriptor.enumerable, configurable: descriptor.configurable, writable: descriptor.writable, value: descriptor.initializer ? descriptor.initializer.call(context) : void 0 }); }
  5. function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { var desc = {}; Object.keys(descriptor).forEach(function (key) { desc[key] = descriptor[key]; }); desc.enumerable = !!desc.enumerable; desc.configurable = !!desc.configurable; if ('value' in desc || desc.initializer) { desc.writable = true; } desc = decorators.slice().reverse().reduce(function (desc, decorator) { return decorator(target, property, desc) || desc; }, desc); if (context && desc.initializer !== void 0) { desc.value = desc.initializer ? desc.initializer.call(context) : void 0; desc.initializer = undefined; } if (desc.initializer === void 0) { Object.defineProperty(target, property, desc); desc = null; } return desc; }
  6. function _initializerWarningHelper(descriptor, context) { throw new Error('Decorating class property failed. Please ensure that ' + 'transform-class-properties is enabled and runs after the decorators transform.'); }
  7. return {
  8. setters: [function (_cc) {
  9. _cclegacy = _cc.cclegacy;
  10. __checkObsolete__ = _cc.__checkObsolete__;
  11. __checkObsoleteInNamespace__ = _cc.__checkObsoleteInNamespace__;
  12. _decorator = _cc._decorator;
  13. Component = _cc.Component;
  14. input = _cc.input;
  15. Input = _cc.Input;
  16. lerp = _cc.lerp;
  17. Node = _cc.Node;
  18. Quat = _cc.Quat;
  19. Vec2 = _cc.Vec2;
  20. Vec3 = _cc.Vec3;
  21. }, function (_ccEnv) {
  22. EDITOR = _ccEnv.EDITOR;
  23. }],
  24. execute: function () {
  25. _crd = true;
  26. _cclegacy._RF.push({}, "4e454G/OQ1NB7tjzAUf269U", "OrbitCamera", undefined);
  27. __checkObsolete__(['_decorator', 'Component', 'EventMouse', 'EventTouch', 'input', 'Input', 'lerp', 'Node', 'Quat', 'Vec2', 'Vec3']);
  28. ({
  29. ccclass,
  30. property,
  31. menu
  32. } = _decorator);
  33. tempVec3 = new Vec3();
  34. tempVec3_2 = new Vec3();
  35. tempQuat = new Quat();
  36. DeltaFactor = 1 / 200;
  37. /**
  38. * 轨道摄影机
  39. * 1、触摸自由旋转
  40. * 2、镜头远近鼠标滚轮调节
  41. * 3、固定为第三人称摄像机
  42. */
  43. _export("OrbitCamera", OrbitCamera = (_dec = ccclass('OrbitCamera'), _dec2 = menu('OopsFramework/Camera/OrbitCamera (轨道摄影机)'), _dec3 = property({
  44. tooltip: "是否启动触摸控制"
  45. }), _dec4 = property({
  46. tooltip: "是否开启启用缩放半径(鼠标滚轮控制摄像机与目标距离)"
  47. }), _dec5 = property({
  48. tooltip: "摄像机与目标的半径缩放速度",
  49. visible: function visible() {
  50. //@ts-ignore
  51. return this.enableScaleRadius === true;
  52. }
  53. }), _dec6 = property({
  54. tooltip: "摄像机与目标的半径最小值",
  55. visible: function visible() {
  56. //@ts-ignore
  57. return this.enableScaleRadius === true;
  58. }
  59. }), _dec7 = property({
  60. tooltip: "摄像机与目标的半径最大值",
  61. visible: function visible() {
  62. //@ts-ignore
  63. return this.enableScaleRadius === true;
  64. }
  65. }), _dec8 = property({
  66. tooltip: "自动旋转是否开启"
  67. }), _dec9 = property({
  68. tooltip: "自动旋转速度",
  69. visible: function visible() {
  70. //@ts-ignore
  71. return this.autoRotate === true;
  72. }
  73. }), _dec10 = property({
  74. tooltip: "旋转速度"
  75. }), _dec11 = property({
  76. tooltip: "跟随速度"
  77. }), _dec12 = property({
  78. tooltip: "X轴旋转范围(人物上下看的角度控制)"
  79. }), _dec13 = property({
  80. tooltip: "摄像机与目标的距离(以玩家为中心环绕球半径)"
  81. }), _dec14 = property({
  82. type: Node,
  83. tooltip: "跟随目标"
  84. }), _dec15 = property({
  85. type: Vec3,
  86. tooltip: "目标旋转偏移量(初始旋转向量)"
  87. }), _dec16 = property({
  88. tooltip: "是否跟随目标 Y 轴旋转"
  89. }), _dec(_class = _dec2(_class = (_class2 = class OrbitCamera extends Component {
  90. constructor() {
  91. super(...arguments);
  92. _initializerDefineProperty(this, "enableTouch", _descriptor, this);
  93. _initializerDefineProperty(this, "enableScaleRadius", _descriptor2, this);
  94. _initializerDefineProperty(this, "radiusScaleSpeed", _descriptor3, this);
  95. _initializerDefineProperty(this, "minRadius", _descriptor4, this);
  96. _initializerDefineProperty(this, "maxRadius", _descriptor5, this);
  97. _initializerDefineProperty(this, "autoRotate", _descriptor6, this);
  98. _initializerDefineProperty(this, "autoRotateSpeed", _descriptor7, this);
  99. _initializerDefineProperty(this, "rotateSpeed", _descriptor8, this);
  100. _initializerDefineProperty(this, "followSpeed", _descriptor9, this);
  101. _initializerDefineProperty(this, "xRotationRange", _descriptor10, this);
  102. _initializerDefineProperty(this, "_targetRadius", _descriptor11, this);
  103. _initializerDefineProperty(this, "_target", _descriptor12, this);
  104. _initializerDefineProperty(this, "_startRotation", _descriptor13, this);
  105. _initializerDefineProperty(this, "followTargetRotationY", _descriptor14, this);
  106. this._center = new Vec3();
  107. // 摄像机视口方向量
  108. this._targetCenter = new Vec3();
  109. // 摄像机中心点位置(目标位置)
  110. this._touched = false;
  111. // 是否触摸屏幕
  112. this._targetRotation = new Vec3();
  113. // 目标旋转向量
  114. this._rotation = new Quat();
  115. // 摄像机旋转四元素
  116. this._radius = 10;
  117. }
  118. get radius() {
  119. return this._targetRadius;
  120. }
  121. set radius(v) {
  122. this._targetRadius = v;
  123. }
  124. get target() {
  125. return this._target;
  126. }
  127. set target(v) {
  128. this._target = v;
  129. this._targetRotation.set(this._startRotation);
  130. this._targetCenter.set(v.worldPosition);
  131. }
  132. get targetRotation() {
  133. if (!EDITOR) {
  134. this._startRotation.set(this._targetRotation);
  135. }
  136. return this._startRotation;
  137. }
  138. set targetRotation(v) {
  139. this._targetRotation.set(v);
  140. this._startRotation.set(v);
  141. }
  142. // 当前玩家与目标半径距离
  143. start() {
  144. if (this.enableTouch) {
  145. input.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
  146. input.on(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);
  147. input.on(Input.EventType.TOUCH_END, this.onTouchEnd, this);
  148. }
  149. if (this.enableScaleRadius) {
  150. input.on(Input.EventType.MOUSE_WHEEL, this.onMouseWheel, this);
  151. }
  152. if (this.target) this.resetTargetRotation(); // 根据欧拉角信息计算摄像机四元数,旋转顺序为 YZX
  153. Quat.fromEuler(this._rotation, this._targetRotation.x, this._targetRotation.y, this._targetRotation.z);
  154. if (this.target) {
  155. this._targetCenter.set(this.target.worldPosition);
  156. this._center.set(this._targetCenter);
  157. }
  158. this._radius = this.radius;
  159. this.limitRotation();
  160. }
  161. /** 重置摄像机到初始位置 */
  162. resetTargetRotation() {
  163. var targetRotation = this._targetRotation.set(this._startRotation);
  164. if (this.followTargetRotationY) {
  165. targetRotation = tempVec3_2.set(targetRotation);
  166. Quat.toEuler(tempVec3, this.target.worldRotation);
  167. targetRotation.add(tempVec3);
  168. }
  169. }
  170. /** 限制 X 轴旋转(上下看) */
  171. limitRotation() {
  172. var rotation = this._targetRotation;
  173. if (rotation.x < this.xRotationRange.x) {
  174. rotation.x = this.xRotationRange.x;
  175. } else if (rotation.x > this.xRotationRange.y) {
  176. rotation.x = this.xRotationRange.y;
  177. }
  178. rotation.z = 0;
  179. } //#region Touch
  180. onTouchStart() {
  181. this._touched = true;
  182. }
  183. onTouchMove(event) {
  184. if (!this._touched) return;
  185. var delta = event.touch.getDelta();
  186. Quat.fromEuler(tempQuat, this._targetRotation.x, this._targetRotation.y, this._targetRotation.z);
  187. Quat.rotateX(tempQuat, tempQuat, -delta.y * DeltaFactor);
  188. Quat.rotateY(tempQuat, tempQuat, -delta.x * DeltaFactor);
  189. Quat.toEuler(this._targetRotation, tempQuat);
  190. this.limitRotation();
  191. }
  192. onTouchEnd() {
  193. this._touched = false;
  194. } //#endregion
  195. onMouseWheel(event) {
  196. var scrollY = event.getScrollY();
  197. this._targetRadius += this.radiusScaleSpeed * -Math.sign(scrollY); // 滚轮向前为负,滚轮向后为正
  198. this._targetRadius = Math.min(this.maxRadius, Math.max(this.minRadius, this._targetRadius));
  199. }
  200. update(dt) {
  201. var targetRotation = this._targetRotation; // 是否摄像机围绕 Y 轴自动旋转
  202. if (this.autoRotate && !this._touched) {
  203. targetRotation.y += this.autoRotateSpeed * dt;
  204. }
  205. if (this.target) {
  206. // 重置摄像机中心点
  207. this._targetCenter.set(this.target.worldPosition); // 是否跟随 Y 轴目标旋转
  208. if (this.followTargetRotationY) {
  209. targetRotation = tempVec3_2.set(targetRotation);
  210. Quat.toEuler(tempVec3, this.target.worldRotation);
  211. targetRotation.y += tempVec3.y; // 运行时,只变化 Y 旋转
  212. }
  213. }
  214. Quat.fromEuler(tempQuat, targetRotation.x, targetRotation.y, targetRotation.z); // 获取目标对象的旋转四元素(人物面向与摄像机一至)
  215. Quat.slerp(this._rotation, this._rotation, tempQuat, dt * 7 * this.rotateSpeed); // 旋转线性插值(平滑摄像机视口旋转)
  216. Vec3.lerp(this._center, this._center, this._targetCenter, dt * 5 * this.followSpeed); // 摄像机跟随位移线性插值(平滑摄像机节点位置移动)
  217. this._radius = lerp(this._radius, this._targetRadius, dt * 5); // 摄像机与目标距离半径线性插值(镜头平滑前后移动)
  218. Vec3.transformQuat(tempVec3, Vec3.FORWARD, this._rotation); // 计算摄像机旋转后的方向量
  219. Vec3.multiplyScalar(tempVec3, tempVec3, this._radius); // 计算摄像机与目标半径向量
  220. tempVec3.add(this._center); // 计算摄像机与目标偏移后的位置
  221. this.node.position = tempVec3; // 设置摄像机位置
  222. this.node.lookAt(this._center); // 设置摄像机视口方向
  223. }
  224. /** 摄像机立即跟随到制定目标的位置 */
  225. follow() {
  226. var targetRotation = this._targetRotation;
  227. if (this.target) {
  228. // 重置摄像机中心点
  229. this._targetCenter.set(this.target.worldPosition); // 是否跟随 Y 轴目标旋转
  230. if (this.followTargetRotationY) {
  231. targetRotation = tempVec3_2.set(targetRotation);
  232. Quat.toEuler(tempVec3, this.target.worldRotation);
  233. targetRotation.y += tempVec3.y; // 运行时,只变化 Y 旋转
  234. }
  235. }
  236. Quat.fromEuler(tempQuat, targetRotation.x, targetRotation.y, targetRotation.z); // 获取目标对象的旋转四元素(人物面向与摄像机一至)
  237. this._rotation = tempQuat;
  238. this._center = this._targetCenter;
  239. this._radius = this._targetRadius;
  240. Vec3.transformQuat(tempVec3, Vec3.FORWARD, this._rotation); // 计算摄像机旋转后的方向量
  241. Vec3.multiplyScalar(tempVec3, tempVec3, this._radius); // 计算摄像机与目标半径向量
  242. tempVec3.add(this._center); // 计算摄像机与目标偏移后的位置
  243. this.node.position = tempVec3; // 设置摄像机位置
  244. this.node.lookAt(this._center); // 设置摄像机视口方向
  245. }
  246. }, (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "enableTouch", [_dec3], {
  247. configurable: true,
  248. enumerable: true,
  249. writable: true,
  250. initializer: function initializer() {
  251. return true;
  252. }
  253. }), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, "enableScaleRadius", [_dec4], {
  254. configurable: true,
  255. enumerable: true,
  256. writable: true,
  257. initializer: function initializer() {
  258. return false;
  259. }
  260. }), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, "radiusScaleSpeed", [_dec5], {
  261. configurable: true,
  262. enumerable: true,
  263. writable: true,
  264. initializer: function initializer() {
  265. return 1;
  266. }
  267. }), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, "minRadius", [_dec6], {
  268. configurable: true,
  269. enumerable: true,
  270. writable: true,
  271. initializer: function initializer() {
  272. return 5;
  273. }
  274. }), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, "maxRadius", [_dec7], {
  275. configurable: true,
  276. enumerable: true,
  277. writable: true,
  278. initializer: function initializer() {
  279. return 10;
  280. }
  281. }), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, "autoRotate", [_dec8], {
  282. configurable: true,
  283. enumerable: true,
  284. writable: true,
  285. initializer: function initializer() {
  286. return false;
  287. }
  288. }), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, "autoRotateSpeed", [_dec9], {
  289. configurable: true,
  290. enumerable: true,
  291. writable: true,
  292. initializer: function initializer() {
  293. return 90;
  294. }
  295. }), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, "rotateSpeed", [_dec10], {
  296. configurable: true,
  297. enumerable: true,
  298. writable: true,
  299. initializer: function initializer() {
  300. return 1;
  301. }
  302. }), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, "followSpeed", [_dec11], {
  303. configurable: true,
  304. enumerable: true,
  305. writable: true,
  306. initializer: function initializer() {
  307. return 1;
  308. }
  309. }), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, "xRotationRange", [_dec12], {
  310. configurable: true,
  311. enumerable: true,
  312. writable: true,
  313. initializer: function initializer() {
  314. return new Vec2(5, 70);
  315. }
  316. }), _descriptor11 = _applyDecoratedDescriptor(_class2.prototype, "_targetRadius", [property], {
  317. configurable: true,
  318. enumerable: true,
  319. writable: true,
  320. initializer: function initializer() {
  321. return 10;
  322. }
  323. }), _applyDecoratedDescriptor(_class2.prototype, "radius", [_dec13], Object.getOwnPropertyDescriptor(_class2.prototype, "radius"), _class2.prototype), _descriptor12 = _applyDecoratedDescriptor(_class2.prototype, "_target", [property], {
  324. configurable: true,
  325. enumerable: true,
  326. writable: true,
  327. initializer: function initializer() {
  328. return null;
  329. }
  330. }), _applyDecoratedDescriptor(_class2.prototype, "target", [_dec14], Object.getOwnPropertyDescriptor(_class2.prototype, "target"), _class2.prototype), _descriptor13 = _applyDecoratedDescriptor(_class2.prototype, "_startRotation", [property], {
  331. configurable: true,
  332. enumerable: true,
  333. writable: true,
  334. initializer: function initializer() {
  335. return new Vec3();
  336. }
  337. }), _applyDecoratedDescriptor(_class2.prototype, "targetRotation", [_dec15], Object.getOwnPropertyDescriptor(_class2.prototype, "targetRotation"), _class2.prototype), _descriptor14 = _applyDecoratedDescriptor(_class2.prototype, "followTargetRotationY", [_dec16], {
  338. configurable: true,
  339. enumerable: true,
  340. writable: true,
  341. initializer: function initializer() {
  342. return false;
  343. }
  344. })), _class2)) || _class) || _class));
  345. _cclegacy._RF.pop();
  346. _crd = false;
  347. }
  348. };
  349. });
  350. //# sourceMappingURL=dbfd64a22594a9594b0e175b6f5dae457b75fd3c.js.map