四、如何改变观察视角

靠的两个东西Mitt.js和TWEEN.js,那么他们分别是什么呢，咱们下来说说

1.Mitt.js

它被叫做小型事件发布订阅库，常被作为兄弟组件间传值.

gitHub地址： GitHub - developit/mitt: 🥊 Tiny 200 byte functional event emitter / pubsub.

npm地址： mitt - npm

使用方法也很简单

import mitt from 'mitt'
const emitter = mitt()
function onFoo(data) {
    console.log(data);
}
const TOPIC = 'topic'
// 订阅，在触发的页面监听值，onFoo里面的参数就是被传递的data
emitter.on(TOPIC, onFoo)   
// 发布事件，在触发的页面传递值
emitter.emit(TOPIC, { a: 'b' })
// 取消订阅
emitter.off(TOPIC, onFoo)

以上方法就形成了点击事件传递给js文件

2.TWEEN.js

        TWEEN又叫补间动画，允许你以平滑的方式更改对象的属性。你只需告诉它哪些属性要更改，当补间结束运行时它们应该具有哪些最终值，以及这需要多长时间，补间引擎将负责计算从起始点到结束点的值。

在Three.js中其实已经引入了TWEEN，只需要引入它就可以了。

import { TWEEN } from 'three/examples/jsm/libs/tween.module.min'
/**
 * 移动视角
 */
var tween;
const moveCamera = (newT = { x: 0, y: 0, z: 0 }, newP = { x: 215, y: 251, z: 378 }) => {
  if (tween) {
    tween.stop()
  }
  let oldP = camera.position
  // return console.log(this.controls)
  let oldT = controls.target
  // let oldT = controls.object.position

  tween = new TWEEN.Tween({
    x1: oldP.x,
    y1: oldP.y,
    z1: oldP.z,
    x2: oldT.x,
    y2: oldT.y,
    z2: oldT.z
  })
  tween.to(
    {
      x1: newP.x,
      y1: newP.y,
      z1: newP.z,
      x2: newT.x,
      y2: newT.y,
      z2: newT.z
    },
    2000
  )
  tween.onUpdate((object) => {
    camera.position.set(object.x1, object.y1, object.z1)
    controls.target.x = object.x2
    controls.target.y = object.y2
    controls.target.z = object.z2
    controls.update()
  })
  tween.onComplete(() => {
    controls.enabled = true
  })
  tween.easing(TWEEN.Easing.Cubic.InOut)
  tween.start()
}

20230911_162304

        

本期的threejs的使用技巧和代码页面的组成就讲到这里，下期我会给大家将一些例如标签的创建，热力图的展示等效果，有没有很期待呢。