35three.js鼠标控制物体旋转缩放

JavaScript023

35three.js鼠标控制物体旋转缩放,第1张

three.js包含了很多相机控制器，通过旋转相机可以达到同样的旋转效果。

但是当我们需要固定场景背景，固定固定摄像机的时候。我们只能去移动物体了。Three.js提供了

TransformControls.js控件，它可以控制物体的旋转、缩放、平移，但是使用起来并不方便。

这个时候就需要自己动手写控制器了。

原理很简单：获取鼠标（手势）点击的位置，以及鼠标拖动的距离。

把移动的方向和距离作为参数传递给物体。然后在循环中改变物体的属性来控制物体。

将要转动的物体放在一个组中，改变该组就可以。

这里获取的是X轴方向的鼠标移动的值。然后绕Y轴旋转。也可以添加其他的方向的旋转事件。

也可以添加一个功能，点击立方体之上才有效果。再说吧。

可能很多同学会发现，学习Three.js的API非常容易，但是真正理解API的作用却非常难。其实让大家感到难的并不是Three.js本身，而是Three.js背后所隐藏的3D图形学知识。本系列Three.js源码解读文章，会帮你一边补齐3D图形学的基础知识，一边真正理解到Three.js的实现原理，知其然，知其所以然。

Object3D是ThreeJS中大部分物体的基类，它包含了物体的位移，旋转，缩放，以及各个物体父子关系的js实现。选取Object3D几个重要的属性做解释：

一个3D对象往往由多个父子对象组成，父对象的位移, 旋转, 缩放会传递给所有的子对象。

this.parent指向父对象，this.children包含了所有的子对象。

通过 add 为物体添加子对象。需要注意的是，如果该子对象有其他的父对象，会先解除子对象和旧的父对象的父子关系，然后将子对象添加到新的父对象中。

this.matrix表示物体自身的本地形变，this.matrixWorld表示物体的全局形变。当物体没有父对象时，全局形变就是本地形变。

为什么对象组合这么重要呢？看下面的例子：

这两个立方体共同组成了一个3D对象，下面的立方体为底座，上面的立方体为操作臂。当底座转动的时候，操作臂会同样转动，所以操作臂的形变会传递给底座。当操作臂旋转时，底座不会被影响。

这里，底座就是操作臂的父对象。只要简单的将底座的全局形变(this.parent.matrixWorld)和操作臂的本地形变(this.matrix)相乘，就能得到操作臂的最终形变。是不是很方便？

3D物体的位移，旋转，缩放都可以通过矩阵表示。其中，旋转除了通过矩阵，还可以通过欧拉角和四元数表示。

Object3D的rotation代表物体旋转的欧拉角表示，quaternion代表了四元数表示，他们是3D物体统一旋转的不同数学表达方式。(矩阵，欧拉角，四元数表示旋转

onRotationChange , onQuaternionChange 这两个回调用于同步欧拉角和四元数，保证他们代表着相同的旋转角度。

3D交互一个很大一部分工作量是需要在物体的本地空间( this.matrix )和世界空间( this.matrixWorld )进行坐标转换。

在窗口变化时，如果不做自适应，立方体的边界会出现锯齿，这就是位图被css拉伸后失真导致的，默认canvas 画布的尺寸只有300*150。

因此，我们需要用canvas 画布的像素尺寸自适应窗口。

canvas 的行内属性width、height与css的width、height属性差别

我们可以使用css设置设置canvas元素的像素的宽度和高度，但是我们在使用坐标系进行绘图时，使用的坐标系是通过canvs行内属性设置的width和height，默认为300x150；也就是如果没有设置行内的width 和 height属性，使用canvasAPI进行绘图时整个canvs的坐标系在可见范围内是300x150，并不是css设置的像素尺寸。

Three加载模型常用的方法-判断窗口是否变化，更新canvas尺寸，解决模型锯齿的问题。

当canvas 画布的尺寸变化了，相机视口的宽高比也需要同步调整。

当相机视口的宽高比变了，相机的透视投影矩阵也会随之改变，因此我们需要使用camera.updateProjectionMatrix() 方法更新透视投影矩阵。

这样我们拖拽浏览器的边界，缩放浏览器的时候，就可以看到canvas 画布自适应浏览器的尺寸了。

渲染尺寸改变时 重置相机视口的宽高比，更新透视头一个矩阵。解决模型变形的问题。