| threeJs进阶 让模型沿着指定轨迹移动与转向 | 您所在的位置：网站首页 › 沿着曲线移动是平移吗对吗 › threeJs进阶 让模型沿着指定轨迹移动与转向 |
threeJs进阶 让模型沿着指定轨迹移动与转向
|
效果图： 涉及相关知识点： 欧拉对象和四元数主要用来表达对象的旋转信息。 关键词：欧拉Euler、四元数Quaternion、矩阵Matrix4 欧拉对象Euler欧拉角描述一个旋转变换，通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。 对 Euler 实例进行遍历将按相应的顺序生成它的分量 (x, y, z, order)。 // 创建一个欧拉对象，表示绕着xyz轴分别旋转45度，0度，90度 var Euler = new THREE.Euler( Math.PI/4,0, Math.PI/2); 构造函数Euler( x : Float, y : Float, z : Float, order : String ) x - (optional) 用弧度表示x轴旋转量。 默认值是 0。 y - (optional) 用弧度表示y轴旋转量。 默认值是 0。 z - (optional) 用弧度表示z轴旋转量。 默认值是 0。 order - (optional) 表示旋转顺序的字符串，默认为’XYZ’（必须是大写）。 重要属性.order : String order值应用于旋转顺序。默认值为 ‘XYZ’，这意味着对象将首先是 绕X轴旋转，然后是Y轴，最后是Z轴。其他可能性包括: ‘YZX’， ‘ZXY’， ‘XZY’， ‘YXZ’和’ZYX’。这些必须是大写字母。 Three.js 使用intrinsic Tait-Bryan angles（Yaw、Pitch、Roll）。 这意味着旋转是在本地坐标系下进行的。也就是说，对于“XYZ”顺序，首先是围绕local-X轴旋转(与world- x轴相同)， 然后是local-Y(现在可能与world y轴不同)，然后是local-Z(可能与world z轴不同)。 重要方法.setFromRotationMatrix ( m : Matrix4, order : String) m - Matrix4 矩阵上面的3x3部分是一个纯旋转矩阵rotation matrix （也就是不发生缩放） order - (可选参数) 表示旋转顺序的字符串。 使用基于 order 顺序的纯旋转矩阵来设置当前欧拉角。 .setFromQuaternion ( q : Quaternion, order : String ) q - 归一化的四元数。 order - (可选参数) 表示旋转顺序的字符串。 根据 order 指定的方向，使用归一化四元数设置这个欧拉变换的角度。 .setFromVector3 ( vector : Vector3, order : String ) vector - Vector3. order - (可选参数) 表示旋转顺序的字符串。 设置 x, y and z 并且选择性更新 order。 四元数Quaternion四元数在three.js中用于表示 rotation （旋转）。 对 Quaternion 实例进行遍历将按相应的顺序生成它的分量 (x, y, z, w)。 var quaternion = new THREE.Quaternion(); console.log('查看四元数结构',quaternion); console.log('查看四元数w分量',quaternion.w); 构造函数Quaternion( x : Float, y : Float, z : Float, w : Float ) x - x 坐标 y - y 坐标 z - z 坐标 w - w 坐标 重要方法.angleTo ( q : Quaternion ) 以弧度返回该四元数与四元数 q 之间的夹角。 .clone () 创建一个与该四元数具有相同x、y、z和w 属性的四元数。 .conjugate () 返回该四元数的旋转共轭。 四元数的共轭表示的是，围绕旋转轴在相反方向上的相同旋转。 .copy ( q : Quaternion ) 复制四元数 q 的 x、y、z 和 w 属性到该四元数中。 .rotateTowards ( q : Quaternion, step : Float ) q - 目标四元数 step - 以弧度为单位的角度步长 将该四元数按照步长 step 向目标 q 进行旋转。该方法确保最终的四元数不会超过 q。 .slerp ( qb : Quaternion, t : Float ) qb - 另一个四元数旋转 t - 闭区间 [0, 1] 中的插值因子 处理四元数之间的球面线性插值。t 表示该四元数(其中 t 为 0) 和 qb (其中 t 为1) 之间的旋转量。 该四元数会被设置为上述计算的结果 .slerpQuaternions ( qa : Quaternion, qb : Quaternion, t : Float ) : this 在给定的四元数之间执行球面线性插值，并将结果存储在这个四元数中 .setFromEuler ( euler : Euler ) : this 从由 Euler 角所给定的旋转来设置该四元数。 .setFromRotationMatrix ( m : Matrix4 ) : this 从m的旋转分量中来设置该四元数。 .setFromAxisAngle() 四元数的方法.setFromAxisAngle(axis, angle)通过旋转轴axis和旋转角度angle设置四元数数据，也就是x、y、z和w四个分量。 绕单位向量Vector3(x,y,z)表示的轴旋转θ度 k = sinθ/2 q=( x*k , y*k , z*k, cosθ/2) var quaternion = new THREE.Quaternion(); // 旋转轴new THREE.Vector3(0,1,0) // 旋转角度Math.PI/2 quaternion.setFromAxisAngle(new THREE.Vector3(0,1,0),Math.PI/2) console.log('查看四元数结构',quaternion);.multiply() 对象的一个旋转可以用一个四元数表示，两次连续旋转可以理解为：两次旋转对应的四元数对象进行乘法运算。 // 四元数q1、q2分别表示一个旋转，两个四元数进行乘法运算，相乘结果保存在q2中 // 在q1表示的旋转基础在进行q2表示的旋转操作 q1.quaternion.multiply( q2 ); 四维矩阵（Matrix4 ）表示一个4x4的矩阵，在3D计算机图形学中，4x4矩阵最常用的用法是作为一个变换矩阵Transformation Matrix 这使得表示三维空间中的一个点的向量Vector3通过乘以矩阵来进行转换，如平移、旋转、剪切、缩放、反射、正交或透视投影等。这就是把矩阵应用到向量上。 任何3D物体Object3D都有三个关联的矩阵： Object3D.matrix: 存储物体的本地变换矩阵。 这是对象相对于其父对象的变换矩阵。 Object3D.matrixWorld: 对象的全局或世界变换矩阵。如果对象没有父对象，那么这与存储在矩阵matrix中的本地变换矩阵相同。 Object3D.modelViewMatrix: 表示对象相对于摄像机坐标系的变换矩阵， 一个对象的 modelViewMatrix 是物体世界变换矩阵乘以摄像机相对于世界空间变换矩阵的逆矩阵。 摄像机Cameras 有三个额外的四维矩阵: Camera.matrixWorldInverse: 视矩阵 - 摄像机世界坐标变换的逆矩阵。 Camera.projectionMatrix: 投影变换矩阵，表示将场景中的信息投影到裁剪空间。 Camera.projectionMatrixInverse: 投影变换矩阵的逆矩阵。 注意：物体的正规矩阵 Object3D.normalMatrix 并不是一个4维矩阵，而是一个三维矩阵Matrix3。 注意行优先列优先的顺序 设置set()方法参数采用行优先row-major， 而它们在内部是用列优先column-major顺序存储在数组当中。 提取位置(平移)、旋转和缩放 有多种选项可用于从 Matrix4 中提取位置、旋转和缩放。 Vector3.setFromMatrixPosition：可用于提取位置相关的分量。 Vector3.setFromMatrixScale：可用于提取缩放相关的分量。 Quaternion.setFromRotationMatrix, Euler.setFromRotationMatrix 或 extractRotation：可用于从纯(未缩放)矩阵中提取旋转相关分量。 decompose：可用于一次性提取位置、旋转和缩放 构造函数Matrix4() 创建并初始化一个4X4的单位矩阵identity matrix. 属性.elements : Array 矩阵列优先column-major列表。 主要方法.clone () : Matrix4 创建一个新的矩阵，元素elements与该矩阵相同。 .compose ( position : Vector3, quaternion : Quaternion, scale : Vector3 ) 设置将该对象位置 position，四元数quaternion 和 缩放scale 组合变换的矩阵。 .copy ( m : Matrix4 ) 将矩阵m的元素elements复制到当前矩阵中。 .lookAt ( eye : Vector3, target : Vector3, up : Vector3 ) 构造一个旋转矩阵，从eye 指向 target，由向量 up 定向。 .makeRotationFromEuler ( euler : Euler ) 将传入的欧拉角转换为该矩阵的旋转分量(左上角的3x3矩阵)。 矩阵的其余部分被设为单位矩阵。根据欧拉角euler的旋转顺序order，总共有六种可能的结果 .multiply ( m : Matrix4 ) 将当前矩阵乘以矩阵m。 创建运动轨迹 // 创建运动轨迹 makeCurve(){ this.curve = new THREE.CatmullRomCurve3([ new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 10), new THREE.Vector3(10, 0, 0), ]) this.curve.curveType = "catmullrom" this.curve.closed = true// 设置是否闭环 this.curve.tension = 1// 设置线的张力，0为无弧度折线 // 为曲线添加材质在场景中显示出来，不显示也不会影响运动轨迹，相当于一个helper const points = this.curve.getPoints(50)// 50等分获取曲线点数组 const geometry = new THREE.BufferGeometry().setFromPoints(points)//把顶点坐标赋值给几何体 const materail = new THREE.LineBasicMaterial({ color: 0x000000}) const curveObject = new THREE.Line(geometry, materail) this.scene.add(curveObject) }, 实现沿曲线运动的方法progress: 0 // 物体运动时在运动路径的初始位置，范围0~1 velocity: 0.001 // 影响运动速率的一个值，范围0~1，需要和渲染频率结合计算才能得到真正的速率 //让模型沿着运动轨迹移动 moveOnCurve(){ if(this.curve==null || this.model == null){ console.log('loading') }else{ if(this.progress { //循环调用函数 this.clearAnim = requestAnimationFrame(animate) this.controls.update(); this.moveOnCurve() //渲染界面 this.renderer.render(this.scene, this.camera) } animate() },参考文章：Threejs进阶之九 【threeJs笔记】2. Three.js欧拉对象Euler和四元数Quaternion |
【本文地址】