选择对象

更新时间: 2021-04-26 16:32:46

尽管跟动画没有直接的联系，但是再这里讨论一下对象的选择也对学习动画有帮助，这里展示一下如何使用鼠标在场景中选择一个对象。

在看示例之前，先看一下代码：

# 光线投射`Raycaster`:

这个类用于进行光线投射。光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function onMouseMove(event) {
  //将鼠标位置归一化为设备坐标。x和y方向的取值范围是( -1 to +1)
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1
  mouse.y = - ( event.clientY / window.innerHeight) * 2 + 1
}

function render() {
  //通过摄像机和鼠标位置更新射线
  raycaster.setFormCamera(mouse,camera)

  //计算物体和射线的焦点
  const intersects = raycaster.intersectObjects(scene.children)
  for(let i = 0;i < intersects.length; i++){
    intersects[i].object.material.color.set(0xff0000)
  }

  renderer.render(scene,camera)
}

window.addEventListener('mousemove',onMouseMove,false)

window.requestAnimationFrame(render)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

因为本例的three.js渲染的容器不是整个屏幕，所以代码作了些许调整

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const domEl = document.getElementById('three')

function onMouseMove(event) {
  //将鼠标位置归一化为设备坐标。x和y方向的取值范围是( -1 to +1), domEl为渲染容器的dom
  mouse.x = ( event.offsetX / domEl.clientWidth ) * 2 - 1
  mouse.y = - ( event.offsetY / domEl.clientHeight) * 2 + 1
}

function render() {
  //通过摄像机和鼠标位置更新射线
  raycaster.setFormCamera(mouse,camera)

  //计算物体和射线的焦点
  const intersects = raycaster.intersectObjects(scene.children)
  for(let i = 0;i < intersects.length; i++){
    intersects[i].object.material.color.set(0xff0000)
  }

  renderer.render(scene,camera)
}

window.addEventListener('mousemove',onMouseMove,false)

window.requestAnimationFrame(render)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

← 基础动画用Tweenjs做动画 →

选择对象

# 光线投射Raycaster:

# 光线投射`Raycaster`: