Three.js系列：坐标信息

1. 层级结构

Three.js描述的场景Sence，是一个以Sence为根节点的层级结构，如下图所示。其中Group不是必须的，并且可嵌套的。

遍历方法：traverse()

scene.traverse(function(obj) {
  if (obj.type === "Group") {
    console.log(obj.name);
  }
  if (obj.type === "Mesh") {
    console.log(obj.name);
  }
  // 打印id属性
  console.log(obj.id);
  // 打印该对象的父对象
  console.log(obj.parent);
  // 打印该对象的子对象
  console.log(obj.children);
})

2. 坐标差异

2.1.概念

2.1.1 世界坐标和局部坐标

根据参照物的不同，Three.js将坐标分为世界坐标和本地坐标。

世界坐标

是以Sence为参照进行描述的坐标信息。是由局部坐标加上父级的变化场景：平移（position）、旋转（rotation）、缩放（scale）计算后得出。Three.js中常见的世界坐标有mesh.getWorldPosition()、THREE.Box3()、THREE.Box2()等。

局部坐标

是以父层级为参照进行描述的坐标信息。可以理解成在建模时，基于建模原点生成的一个坐标数据。一般，不明确指明是世界坐标，大多说的是本地坐标信息。Three.js中常见的局部坐标有：mesh。position，geometry.vertices等。

2.1.2 屏幕坐标和世界坐标

在屏幕上，对于用户的操作我们能获取的只能是屏幕坐标。在处理其与Three.js场景进行交互时，我们需要进行屏幕坐标和世界坐标的相互转化。

3. 实战篇

3.1 浏览器屏幕坐标转化成世界坐标

screenToWorld(){
//浏览器屏幕坐标转换成标准屏幕坐标
let pX = (screenPoint.x / this.scene.renderer.domElement.clientWidth) * 2 - 1;
let pY = - (screenPoint.y / this.scene.renderer.domElement.clientHeight) * 2 + 1;

let p = new THREE.Vector3(pX, pY, -1).unproject(this.scene.camera)
return  new THREE.Vector2(p.x,p.y);
}

3.2 本地坐标转换成世界坐标

例如，对于mesh几何体的顶点坐标就是基于mesh的本地坐标，只需要加上mesh的世界坐标即可。

// 顶点坐标加上mesh的世界矩阵
var vector = mesh.geometry.vertices[i].clone();
vector.applyMatrix4( mesh.matrixWorld );

// 利用mesh的localToWorld方法
var vector = mesh.position.clone();
mesh.localToWorld( vector );

3.3 获取object的坐标位置

// 获取本地坐标
mesh.position

// 获取世界坐标
worldPosition= new Vector3();
mesh.getWorldPosition(worldPosition);