FirstPersonControls.js 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793
  1. /**
  2. * @author mschuetz / http://mschuetz.at
  3. *
  4. * adapted from THREE.OrbitControls by
  5. *
  6. * @author qiao / https://github.com/qiao
  7. * @author mrdoob / http://mrdoob.com
  8. * @author alteredq / http://alteredqualia.com/
  9. * @author WestLangley / http://github.com/WestLangley
  10. * @author erich666 / http://erichaines.com
  11. *
  12. *
  13. *
  14. */
  15. import * as THREE from "../../libs/three.js/build/three.module.js";
  16. import {Buttons} from "../defines.js";
  17. import {Utils} from "../utils.js";
  18. import cameraLight from "../utils/cameraLight.js";
  19. import Common from "../utils/Common.js";
  20. export class FirstPersonControls extends THREE.EventDispatcher {
  21. constructor (viewer, viewport) {
  22. super();
  23. this.viewer = viewer;
  24. this.renderer = viewer.renderer;
  25. this.scene = viewer.scene;
  26. this.rotationSpeed = 200;
  27. this.moveSpeed = 10;
  28. this.setCurrentViewport({hoverViewport:viewport, force:true}) //this.currentViewport = viewport
  29. this.keys = {
  30. FORWARD: ['W'.charCodeAt(0), 38],
  31. BACKWARD: ['S'.charCodeAt(0), 40],
  32. LEFT: ['A'.charCodeAt(0), 37],
  33. RIGHT: ['D'.charCodeAt(0), 39],
  34. UP: ['Q'.charCodeAt(0)],
  35. DOWN: ['E'.charCodeAt(0)],
  36. //SHIFT : [16],
  37. ALT : [18],
  38. Rotate_LEFT : ['L'.charCodeAt(0)],
  39. Rotate_RIGHT : ['J'.charCodeAt(0)],
  40. Rotate_UP : ['K'.charCodeAt(0)],
  41. Rotate_DOWN : ['I'.charCodeAt(0)],
  42. };
  43. this.fadeFactor = 20;
  44. this.yawDelta = 0;
  45. this.pitchDelta = 0;
  46. this.translationDelta = new THREE.Vector3(0, 0, 0);
  47. this.translationWorldDelta = new THREE.Vector3(0, 0, 0);
  48. this.tweens = [];
  49. this.dollyStart = new THREE.Vector2
  50. this.dollyEnd = new THREE.Vector2
  51. //this.enableChangePos = true
  52. this.viewer.addEventListener('camera_changed',(e)=>{
  53. this.setFPCMoveSpeed(e.viewport)
  54. })
  55. let drag = (e) => {
  56. if(!this.enabled)return
  57. let viewport = e.dragViewport;
  58. if(!viewport)return
  59. let camera = viewport.camera
  60. let mode
  61. if(e.isTouch){
  62. if(e.touches.length == 1){
  63. mode = (!e.dragViewport || e.dragViewport.name == 'MainView') ? 'rotate' : 'pan'
  64. }else if(e.touches.length == 2){
  65. mode = 'scale'
  66. }else{
  67. mode = (!e.dragViewport || e.dragViewport.name == 'MainView') ? 'pan' : 'scale'
  68. }
  69. }else{
  70. //mode = e.buttons === Buttons.LEFT && (!e.dragViewport || e.dragViewport.name == 'MainView') ? 'rotate' : 'pan'
  71. mode = e.buttons === Buttons.LEFT && camera.type != 'OrthographicCamera' ? 'rotate' : 'pan'
  72. }
  73. //console.log('mode ', mode )
  74. let moveSpeed = this.currentViewport.getMoveSpeed();
  75. if (e.drag.startHandled === undefined) {///???????
  76. e.drag.startHandled = true;
  77. this.dispatchEvent({type: 'start'});
  78. }
  79. if (mode.includes('rotate')) {//旋转
  80. //来自panoramaControl updateRotation
  81. if(!this.pointerDragStart){
  82. return this.pointerDragStart = e.pointer.clone()
  83. }
  84. let view = this.scene.view;
  85. if(Potree.settings.rotAroundPoint && this.intersectStart && this.canMovePos(viewport) && !viewer.images360.isAtPano() && !this.viewer.inputHandler.pressedKeys[17]){//定点旋转: 以当前intersect的点为target旋转,不改点在屏幕中的位置
  86. let distance = camera.position.distanceTo(this.intersectStart.location) //不按下ctrl的话
  87. //按照orbitControl的方式旋转:
  88. let rotationSpeed = 2.5;
  89. this.yawDelta -= e.drag.pointerDelta.x * rotationSpeed;
  90. this.pitchDelta += e.drag.pointerDelta.y * rotationSpeed;
  91. //先更新一下相机:
  92. this.update()
  93. view.applyToCamera(camera)
  94. //然后得到新的相机角度下,原先点在屏幕中的位置所对应的3d点现在的坐标。只需要平移一下新旧坐标差值即可。
  95. let newPointerDir = viewer.inputHandler.getMouseDirection(this.intersectStart.pointer).direction.clone().multiplyScalar(distance)
  96. let pivot = new THREE.Vector3().addVectors(camera.position, newPointerDir) //新的3d点
  97. let moveVec = new THREE.Vector3().subVectors(pivot, this.intersectStart.location)
  98. this.translationWorldDelta.copy(moveVec.negate())
  99. //立即更新下,防止因update和此drag频率不同而打滑。
  100. this.update()
  101. view.applyToCamera(camera)
  102. }else{
  103. let _matrixWorld = camera.matrixWorld
  104. camera.matrixWorld = new THREE.Matrix4;//unproject 前先把相机置于原点
  105. var e1 = new THREE.Vector3(this.pointerDragStart.x,this.pointerDragStart.y,-1).unproject(camera)
  106. , t = new THREE.Vector3(e.pointer.x,e.pointer.y,-1).unproject(camera)
  107. , i = Math.sqrt(e1.x * e1.x + e1.z * e1.z)
  108. , n = Math.sqrt(t.x * t.x + t.z * t.z)
  109. , o = Math.atan2(e1.y, i)
  110. , a = Math.atan2(t.y, n);
  111. this.pitchDelta += o - a //上下旋转
  112. e1.y = 0,
  113. t.y = 0;
  114. var s = Math.acos(e1.dot(t) / e1.length() / t.length());
  115. if(!isNaN(s)){
  116. var yawDelta = s //左右旋转
  117. this.pointerDragStart.x > e.pointer.x && (yawDelta *= -1)
  118. this.yawDelta += yawDelta
  119. }
  120. //console.log('rotate:', this.pitchDelta, e.pointer.toArray(), this.pointerDragStart.toArray())
  121. this.pointerDragStart.copy(e.pointer)
  122. camera.matrixWorld = _matrixWorld ;
  123. }
  124. }
  125. if (mode.includes('pan')) {//平移
  126. if(!this.canMovePos(viewport)){
  127. return
  128. }
  129. if(camera.type == "OrthographicCamera"){
  130. //console.log(e.drag.pointerDelta, e.pointer, e.drag.end)
  131. let moveVec = Utils.getOrthoCameraMoveVec(e.drag.pointerDelta, camera )//最近一次移动向量
  132. let pointclouds;
  133. let Alignment = window.viewer.modules.Alignment
  134. let MergeEditor = window.viewer.modules.MergeEditor
  135. let handleState = Alignment.handleState
  136. let a = e.buttons === Buttons.LEFT && viewport.alignment && handleState && viewport.alignment[handleState]
  137. if(Potree.settings.editType == 'pano'){//右键平移视图、左键操作点云
  138. let PanoEditor = window.viewer.modules.PanoEditor
  139. if(a && PanoEditor.selectedPano){
  140. if(!PanoEditor.selectedGroup || !PanoEditor.checkIfAllLinked({group:PanoEditor.selectedGroup}) ){
  141. if(handleState == 'translate' && ( e.drag.intersectStart.pointclouds && Common.getMixedSet(PanoEditor.selectedClouds, e.drag.intersectStart.pointclouds).length || PanoEditor.selectedPano.hovered)//拖拽到点云上 或 circle
  142. || handleState == 'rotate' )
  143. {
  144. pointclouds = PanoEditor.selectedClouds
  145. }
  146. }else{
  147. PanoEditor.dispatchEvent('needToDisConnect')
  148. console.warn('选中的漫游点连通了整个数据集,不允许移动')
  149. }
  150. }
  151. if(!pointclouds && e.buttons === Buttons.LEFT && viewport.rotateSide){
  152. return PanoEditor.rotateSideCamera(-e.drag.pointerDelta.x)
  153. }
  154. }else if(Potree.settings.editType == 'merge'){
  155. if(e.buttons === Buttons.LEFT && viewport.rotateSide){
  156. return MergeEditor.rotateSideCamera(-e.drag.pointerDelta.x)
  157. }
  158. }else{
  159. /* if(Alignment.selectedClouds && Alignment.selectedClouds.length){
  160. pointclouds = a && e.drag.intersectStart.pointclouds && Common.getMixedSet(Alignment.selectedClouds, e.drag.intersectStart.pointclouds).length && Alignment.selectedClouds
  161. }else{ */
  162. pointclouds = a && e.drag.intersectStart.pointcloud && [e.drag.intersectStart.pointcloud]
  163. //}
  164. }
  165. if(pointclouds){
  166. this.dispatchEvent({
  167. type : "transformPointcloud",
  168. intersect: e.intersect.orthoIntersect,
  169. intersectStart: e.drag.intersectStart.orthoIntersect,
  170. moveVec,
  171. pointclouds,
  172. camera
  173. })
  174. }else{
  175. this.translationWorldDelta.add(moveVec.negate())
  176. }
  177. }else{
  178. if(e.drag.intersectStart){//如果拖拽着点云
  179. if(e.drag.z == void 0){//拖拽开始
  180. let pointerStartPos2d = e.drag.intersectStart.location.clone().project(camera);//识别到的点云点的位置
  181. e.drag.z = pointerStartPos2d.z //记录z,保持拖拽物体到屏幕距离不变,所以z深度不变
  182. e.drag.projectionMatrixInverse = camera.projectionMatrixInverse.clone()
  183. //防止吸附到最近点上(因为鼠标所在位置并非识别到的点云点的位置,需要得到鼠标所在位置的3d坐标。)
  184. let pointerStartPos2dReal = new THREE.Vector3(this.pointerDragStart.x,this.pointerDragStart.y, e.drag.z);
  185. e.drag.translateStartPos = pointerStartPos2dReal.clone().unproject(camera);
  186. /* this.viewer.dispatchEvent({
  187. type: 'dragPanBegin',
  188. projectionMatrixInverse : e.drag.projectionMatrixInverse
  189. }); */
  190. //console.log('开始拖拽', e.pointer.clone())
  191. }
  192. //拖拽的过程中将projectionMatrixInverse替换成开始拖拽时的,因为near、far一直在变,会导致unproject计算出的3d坐标改变很大而闪烁。
  193. var _projectionMatrixInverse = camera.projectionMatrixInverse;
  194. camera.projectionMatrixInverse = e.drag.projectionMatrixInverse;
  195. let newPos2d = new THREE.Vector3(e.pointer.x,e.pointer.y, e.drag.z );
  196. let newPos3d = newPos2d.clone().unproject(camera);
  197. let moveVec = newPos3d.clone().sub( e.drag.translateStartPos /* e.drag.intersectStart.location */ );//移动相机,保持鼠标下的位置永远不变,所以用鼠标下的新位置减去鼠标下的原始位置
  198. camera.projectionMatrixInverse = _projectionMatrixInverse
  199. this.translationWorldDelta.copy(moveVec.negate()) //这里没法用add,原因未知,会跳动
  200. //console.log('pan 1', this.translationWorldDelta.clone())
  201. //四指松开剩三指时会偏移一下,暂不知道哪里的问题,或许跟开头防止点云吸附有关?
  202. }else{ //如果鼠标没有找到和点云的交点,就假设移动整个模型(也可以去扩大范围寻找最近点云)
  203. /* let center = viewer.scene.pointclouds[0].position;
  204. let radius = camera.position.distanceTo(center);
  205. let ratio = radius * Math.tan(THREE.Math.degToRad(camera.fov)/2) / 1000 */
  206. /* let speed = this.currentViewport.getMoveSpeed()
  207. if(FirstPersonControls.boundPlane){
  208. speed = FirstPersonControls.boundPlane.distanceToPoint(this.currentViewport.position)
  209. speed = Math.max(1 , speed)
  210. } */
  211. let lastIntersect = viewport.lastIntersect ? (viewport.lastIntersect.location || viewport.lastIntersect) : viewer.bound.center //该viewport的最近一次鼠标和点云的交点
  212. let speed = camera.position.distanceTo(lastIntersect)
  213. let fov = cameraLight.getHFOVForCamera(camera, true)
  214. let ratio = speed * Math.tan(fov/2)
  215. this.translationDelta.x -= e.drag.pointerDelta.x * ratio
  216. this.translationDelta.z -= e.drag.pointerDelta.y * ratio
  217. //console.log('pan2', e.drag.pointerDelta)
  218. }
  219. }
  220. this.useAttenuation = false
  221. }
  222. if(mode.includes('scale')){
  223. this.dollyEnd.subVectors(e.touches[0].pointer, e.touches[1].pointer);
  224. //if(!this.dollyStart)return
  225. var scale = this.dollyEnd.length() / this.dollyStart.length()
  226. //console.log('scale ',scale)
  227. let pointer = new THREE.Vector2().addVectors(e.touches[0].pointer, e.touches[1].pointer).multiplyScalar(0.5);//两个指头的中心点
  228. dolly({
  229. pointer,
  230. scale, camera
  231. })
  232. this.dollyStart.copy(this.dollyEnd);
  233. }
  234. //最好按ctrl可以变为dollhouse的那种旋转
  235. };
  236. let drop = e => {
  237. if(!this.enabled)return
  238. this.dispatchEvent({type: 'end'});
  239. };
  240. let dolly = (e={})=>{
  241. if(Potree.settings.displayMode == 'showPanos' && this.currentViewport == viewer.mainViewport/* this.currentViewport.unableChangePos */){//全景时
  242. this.dispatchEvent({type:'dollyStopCauseUnable',delta:e.delta, scale:e.scale})
  243. return
  244. }
  245. let camera = e.camera
  246. if(camera.type == "OrthographicCamera"){
  247. let ratio
  248. if(e.delta != void 0){//滚轮缩放
  249. if(e.delta == 0){//mac
  250. return
  251. }else if (e.delta < 0) {
  252. ratio = 0.9
  253. } else if (e.delta > 0) {
  254. ratio = 1.1
  255. }
  256. }else{
  257. ratio = e.scale //触屏缩放
  258. }
  259. let zoom = camera.zoom * ratio
  260. let limit = camera.zoomLimit
  261. if(limit) zoom = THREE.Math.clamp(zoom, limit.min,limit.max )
  262. let pointerPos = new THREE.Vector3(e.pointer.x, e.pointer.y,0.5);
  263. let oldPos = pointerPos.clone().unproject(camera);
  264. if(camera.zoom != zoom){
  265. camera.zoom = zoom
  266. camera.updateProjectionMatrix()
  267. }
  268. let newPos = pointerPos.clone().unproject(camera);
  269. //定点缩放, 恢复一下鼠标所在位置的位置改变量
  270. let moveVec = new THREE.Vector3().subVectors(newPos,oldPos)
  271. this.translationWorldDelta.add(moveVec.negate())
  272. this.useAttenuation = false
  273. }else{
  274. let speed , direction
  275. if(e.delta != void 0){//滚轮缩放
  276. speed = this.currentViewport.getMoveSpeed() * 15
  277. //var direction = this.currentViewport.view.direction.clone();
  278. direction = this.viewer.inputHandler.getMouseDirection().direction //定点缩放
  279. if(e.delta == 0){//mac
  280. return
  281. }else if (e.delta < 0) {
  282. speed *= -1
  283. }
  284. }else{
  285. const constantDis = this.currentViewport.getMoveSpeed() * 200 //constantDis = 10;//常量系数,当放大一倍时前进的距离。可以调整
  286. speed = (e.scale-1)*constantDis //触屏缩放
  287. //pointer = new THREE.Vector2().addVectors().multiplyScalar(0.5);//两个指头的中心点
  288. direction = this.viewer.inputHandler.getMouseDirection(e.pointer).direction //定点缩放
  289. }
  290. this.useAttenuation = true
  291. var vec = direction.multiplyScalar(speed )
  292. this.translationWorldDelta.copy(vec)
  293. }
  294. }
  295. let scroll = (e) => {
  296. if(!this.enabled || !e.hoverViewport)return
  297. this.setCurrentViewport(e)
  298. e.camera = e.hoverViewport.camera
  299. dolly(e)
  300. };
  301. let dblclick = (e) => {
  302. if(!this.enabled)return
  303. if(!Potree.settings.dblToFocusPoint)return;//调试时才可双击
  304. if(Potree.settings.displayMode == 'showPointCloud'/* !viewer.images360.isAtPano() */) this.zoomToLocation(e.mouse);
  305. };
  306. this.viewer.addEventListener('global_drag', drag);
  307. /* this.viewer.addEventListener('global_touchmove', (e)=>{
  308. if(!this.enabled)return
  309. if(e.touches.length>1){//单指的就触发上一句
  310. //console.log('global_touchmove' )
  311. drag(e)
  312. }
  313. }); */
  314. this.viewer.addEventListener('global_drop', drop);
  315. this.viewer.addEventListener('global_mousewheel', scroll);
  316. this.viewer.addEventListener('global_dblclick', dblclick);
  317. let prepareScale = (e)=>{//触屏的scale
  318. this.dollyStart.subVectors(e.touches[0].pointer, e.touches[1].pointer);
  319. }
  320. let prepareRotate = (e)=>{
  321. this.pointerDragStart = e.pointer.clone()
  322. this.intersectStart = e.intersect && e.intersect.location && {
  323. location : e.intersect.location,
  324. pointer : e.intersect.location.clone().project(e.dragViewport.camera) //intersect点在屏幕中的位置
  325. }
  326. //console.log('prepareRotate' )
  327. }
  328. let preparePan = (e)=>{//触屏的pan点云 还是会偏移
  329. this.pointerDragStart = e.pointer.clone()
  330. e.drag.z = void 0 //清空
  331. drag(e) //触屏点击时更新的pointer直接用一次drag
  332. //console.log('preparePan ' )
  333. }
  334. this.viewer.addEventListener('global_mousedown'/* 'startDragging' */, (e)=>{
  335. if(!this.enabled)return
  336. this.setCurrentViewport(e)
  337. prepareRotate(e)
  338. })
  339. //注意,每次增减指头都会修改pointer,需要更新下状态
  340. this.viewer.addEventListener('global_touchstart', (e)=>{
  341. if(!this.enabled)return
  342. if(e.touches.length==2){//只监听开头两个指头
  343. prepareScale(e)
  344. }else if(e.touches.length>=3){
  345. preparePan(e)
  346. }
  347. })
  348. this.viewer.addEventListener('global_touchend', (e)=>{
  349. if(!this.enabled)return
  350. if(e.touches.length==2){//停止平移,开始scale
  351. prepareScale(e)
  352. }else if(e.touches.length==1){//停止scale,开始rotate
  353. prepareRotate(e)
  354. }else if(e.touches.length>=3){//重新准备下平移(因为抬起的指头可能包含平移使用的数据),否则抬起时漂移
  355. preparePan(e)
  356. }
  357. })
  358. /* this.viewer.addEventListener('enableChangePos', (e)=>{
  359. if(!this.enabled)return
  360. this.enableChangePos = e.canLeavePano
  361. }) */
  362. }
  363. canMovePos(viewport){
  364. if(viewport == viewer.mainViewport && (Potree.settings.displayMode == 'showPanos'
  365. || viewer.images360.bumping || viewer.images360.latestToPano))return false
  366. else return true
  367. }
  368. setEnable(enabled){
  369. this.enabled = enabled;
  370. }
  371. setFPCMoveSpeed(viewport){
  372. if(viewport.camera.type == 'OrthographicCamera'){
  373. let s = 1 / viewport.camera.zoom
  374. viewport.setMoveSpeed(s)
  375. }else{
  376. if(viewport == viewer.mainViewport && FirstPersonControls.boundPlane){
  377. let s = FirstPersonControls.boundPlane.distanceToPoint(viewer.mainViewport.view.position)
  378. s = Math.sqrt(s) / 10;
  379. s = Math.max(FirstPersonControls.standardSpeed , s)
  380. s *= Potree.config.moveSpeedAdujust;
  381. viewer.setMoveSpeed(s)
  382. }
  383. }
  384. }
  385. setCurrentViewport(o={}){//add
  386. if(!this.enabled && !o.force )return
  387. if(o.hoverViewport && this.currentViewport != o.hoverViewport ){
  388. this.currentViewport = o.hoverViewport
  389. //this.viewer.setMoveSpeed(this.currentViewport.radius/100);
  390. this.setFPCMoveSpeed(this.currentViewport)
  391. }
  392. if(this.currentViewport.camera.type == 'OrthographicCamera'){
  393. this.lockElevationOri = true
  394. this.lockRotation = true
  395. }else{
  396. this.lockElevationOri = false
  397. this.lockRotation = false
  398. }
  399. }
  400. setScene (scene) {
  401. this.scene = scene;
  402. }
  403. stop(){
  404. this.yawDelta = 0;
  405. this.pitchDelta = 0;
  406. this.translationDelta.set(0, 0, 0);
  407. }
  408. zoomToLocation(mouse){
  409. if(!this.enabled)return
  410. let camera = this.scene.getActiveCamera();
  411. /* let I = Utils.getMousePointCloudIntersection(
  412. mouse,
  413. camera,
  414. this.viewer,
  415. this.scene.pointclouds); */
  416. var I = this.viewer.inputHandler.intersect
  417. if (!I) {
  418. return;
  419. }
  420. let targetRadius = 0;
  421. {
  422. let minimumJumpDistance = 0.2;
  423. let domElement = this.renderer.domElement;
  424. let ray = Utils.mouseToRay(this.viewer.inputHandler.pointer, camera);
  425. let {origin, direction} = this.viewer.inputHandler.getMouseDirection()
  426. let raycaster = new THREE.Raycaster();
  427. raycaster.ray.set(origin, direction);
  428. let nodes = I.pointcloud.nodesOnRay(I.pointcloud.visibleNodes, ray);
  429. let nodes2 = I.pointcloud.nodesOnRay(I.pointcloud.visibleNodes, raycaster.ray);
  430. let lastNode = nodes[nodes.length - 1];
  431. let radius = lastNode.getBoundingSphere(new THREE.Sphere()).radius;
  432. targetRadius = Math.min(this.scene.view.radius, radius);
  433. targetRadius = Math.max(minimumJumpDistance, targetRadius);
  434. }
  435. let d = this.scene.view.direction.multiplyScalar(-1);
  436. let cameraTargetPosition = new THREE.Vector3().addVectors(I.location, d.multiplyScalar(targetRadius));
  437. // TODO Unused: let controlsTargetPosition = I.location;
  438. let animationDuration = 600;
  439. let easing = TWEEN.Easing.Quartic.Out;
  440. { // animate
  441. let value = {x: 0};
  442. let tween = new TWEEN.Tween(value).to({x: 1}, animationDuration);
  443. tween.easing(easing);
  444. this.tweens.push(tween);
  445. let startPos = this.scene.view.position.clone();
  446. let targetPos = cameraTargetPosition.clone();
  447. let startRadius = this.scene.view.radius;
  448. let targetRadius = cameraTargetPosition.distanceTo(I.location);
  449. tween.onUpdate(() => {
  450. let t = value.x;
  451. this.scene.view.position.x = (1 - t) * startPos.x + t * targetPos.x;
  452. this.scene.view.position.y = (1 - t) * startPos.y + t * targetPos.y;
  453. this.scene.view.position.z = (1 - t) * startPos.z + t * targetPos.z;
  454. this.scene.view.radius = (1 - t) * startRadius + t * targetRadius;
  455. this.viewer.setMoveSpeed(this.scene.view.radius / 2.5);
  456. });
  457. tween.onComplete(() => {
  458. this.tweens = this.tweens.filter(e => e !== tween);
  459. });
  460. tween.start();
  461. }
  462. }
  463. update (delta=1) {
  464. if(!this.enabled)return
  465. //console.log('update')
  466. let view = this.currentViewport.view
  467. { // cancel move animations on user input
  468. let changes = [ this.yawDelta,
  469. this.pitchDelta,
  470. this.translationDelta.length(),
  471. this.translationWorldDelta.length() ];
  472. let changeHappens = changes.some(e => Math.abs(e) > 0.001);
  473. if (changeHappens && this.tweens.length > 0) {
  474. this.tweens.forEach(e => e.stop());
  475. this.tweens = [];
  476. }
  477. }
  478. { // accelerate while input is given
  479. let ih = this.viewer.inputHandler;
  480. let moveForward = this.keys.FORWARD.some(e => ih.pressedKeys[e]);
  481. let moveBackward = this.keys.BACKWARD.some(e => ih.pressedKeys[e]);
  482. let moveLeft = this.keys.LEFT.some(e => ih.pressedKeys[e]);
  483. let moveRight = this.keys.RIGHT.some(e => ih.pressedKeys[e]);
  484. let moveUp = this.keys.UP.some(e => ih.pressedKeys[e]);
  485. let moveDown = this.keys.DOWN.some(e => ih.pressedKeys[e]);
  486. let rotateLeft = this.keys.Rotate_LEFT.some(e => ih.pressedKeys[e]);
  487. let rotateRight = this.keys.Rotate_RIGHT.some(e => ih.pressedKeys[e]);
  488. let rotateUp = this.keys.Rotate_UP.some(e => ih.pressedKeys[e]);
  489. let rotateDown = this.keys.Rotate_DOWN.some(e => ih.pressedKeys[e]);
  490. this.lockElevation = this.lockElevationOri || this.keys.ALT.some(e => ih.pressedKeys[e]);
  491. if(!this.lockRotation){
  492. if(rotateLeft){
  493. this.yawDelta -= 0.01
  494. }else if(rotateRight){
  495. this.yawDelta += 0.01
  496. }
  497. if(rotateUp){
  498. this.pitchDelta -= 0.01
  499. }else if(rotateDown){
  500. this.pitchDelta += 0.01
  501. }
  502. }
  503. if(this.canMovePos(this.currentViewport) && !this.lockKey){
  504. if(this.lockElevation){
  505. let dir = view.direction;
  506. dir.z = 0;
  507. dir.normalize();
  508. if (moveForward && moveBackward) {
  509. this.translationWorldDelta.set(0, 0, 0);
  510. } else if (moveForward) {
  511. this.translationWorldDelta.copy(dir.multiplyScalar(this.currentViewport.getMoveSpeed()));
  512. } else if (moveBackward) {
  513. this.translationWorldDelta.copy(dir.multiplyScalar(-this.currentViewport.getMoveSpeed()));
  514. }
  515. }else{
  516. if (moveForward && moveBackward) {
  517. this.translationDelta.y = 0;
  518. } else if (moveForward) {
  519. this.translationDelta.y = this.currentViewport.getMoveSpeed();
  520. } else if (moveBackward) {
  521. this.translationDelta.y = -this.currentViewport.getMoveSpeed();
  522. }
  523. }
  524. if (moveLeft && moveRight) {
  525. this.translationDelta.x = 0;
  526. } else if (moveLeft) {
  527. this.translationDelta.x = -this.currentViewport.getMoveSpeed();
  528. } else if (moveRight) {
  529. this.translationDelta.x = this.currentViewport.getMoveSpeed();
  530. }
  531. if (moveUp && moveDown) {
  532. this.translationWorldDelta.z = 0;
  533. } else if (moveUp) {
  534. this.translationWorldDelta.z = this.currentViewport.getMoveSpeed();
  535. } else if (moveDown) {
  536. this.translationWorldDelta.z = -this.currentViewport.getMoveSpeed();
  537. }
  538. if(moveUp || moveDown || moveForward || moveBackward){
  539. this.useAttenuation = false
  540. }
  541. }
  542. }
  543. { // apply rotation
  544. let yaw = view.yaw;
  545. let pitch = view.pitch;
  546. yaw += this.yawDelta /* * delta; */
  547. pitch += this.pitchDelta/* * delta; */
  548. view.yaw = yaw;
  549. view.pitch = pitch;
  550. this.yawDelta = 0
  551. this.pitchDelta = 0
  552. }
  553. if(this.translationWorldDelta.length()>0) {
  554. // console.log('translationDelta')
  555. }
  556. { // apply translation
  557. view.translate(
  558. this.translationDelta.x, /* * delta, */
  559. this.translationDelta.y, /* * delta, */
  560. this.translationDelta.z, /* * delta */
  561. );
  562. this.translationDelta.set(0,0,0)
  563. //if(this.translationWorldDelta.length())console.log(translationWorldDelta)
  564. view.translateWorld(
  565. this.translationWorldDelta.x /* * delta */,
  566. this.translationWorldDelta.y /* * delta */,
  567. this.translationWorldDelta.z /* * delta */
  568. );
  569. //this.translationWorldDelta.set(0,0,0)
  570. }
  571. { // set view target according to speed
  572. //view.radius = 1 * this.currentViewport.getMoveSpeed();
  573. /* if(viewer.bound) view.radius = view.position.distanceTo(viewer.bound.center)
  574. let speed = view.radius/100;
  575. this.viewer.setMoveSpeed(speed); */
  576. //this.setMoveSpeed()
  577. }
  578. if(this.useAttenuation){ //只有滚轮缩放时开启
  579. let attenuation = Math.max(0, 1 - this.fadeFactor * delta);
  580. /*this.yawDelta *= attenuation;
  581. this.pitchDelta *= attenuation;
  582. this.translationDelta.multiplyScalar(attenuation);*/
  583. this.translationWorldDelta.multiplyScalar(attenuation);
  584. }else{
  585. this.translationWorldDelta.set(0,0,0)
  586. }
  587. }
  588. };