数学几何计算

三维向量 Vector3

向量加法运算.addVectors()

向量 A 和向量 walk 的 x、y、z 三个分量分别相加赋给 B

const A = new THREE.Vector3(30, 30, 0); //起点A
const walk = new THREE.Vector3(100, 50, 0);
const B = new THREE.Vector3(); // 运动结束点B
B.addVectors(A, walk); //(130,80,0)

向量复制方法.copy()

通过向量复制方法.copy()，把 A 点的坐标赋值给网格模型对象

const A = new THREE.Vector3(30, 30, 0);
mesh.position.copy(A);

向量加法运算.add()

如果不希望 A 被改变，借助克隆方法.clone()

const B = A.clone().add(walk);

Vector3表示速度(向量)

// 向量v表示速度，大小√2米每秒，方向是x、y正半轴的角平分线
const v = new THREE.Vector3(1, 1, 0);

向量方法.multiplyScalar()

表示向量 x、y、z 三个分量和参数分别相乘

const walk = v.clone().multiplyScalar(50);
// 运动50秒结束位置B
const B = A.clone().add(walk);

向量大小

向量减法运算.subVectors()

表示 B 的 xyz 三个分量，与 A 的 xyz 三个分量分别相减，然后赋值给向量 AB

const A = new THREE.Vector3(30, 30, 0);
const B = new THREE.Vector3(130, 80, 0);
const AB = new THREE.Vector3();
AB.subVectors(B, A);

向量减法运算.sub()

表示 B 的 xyz 三个属性分别减去 A 的 xyz 三个属性，然后结果赋值给 B

const AB = B.clone().sub(A);
console.log("AB", AB);

向量 AB 的物理含义

• 方向
• 长度(大小)

向量长度.length()

const AB = B.clone().sub(A);
const L = AB.length();

速度向量长度.length()含义

// v表示速度向量，v的长度.length()是就是速度的大小
const v = new THREE.Vector3(1, 1, 0);
const vL = v.length();
console.log("vL", vL);

向量归一化.normalize

• 向量归一化等比缩放向量的 xyz 三个分量, 使向量长度.length缩放到长度为 1
• 此时就得到一个有方向且长度为 1 的向量, 可以自定义任意长度位移量

网格模型沿着 AB 直线平移 100:

//直线上两点坐标A和B
const A = new THREE.Vector3(-50, 0, -50);
const B = new THREE.Vector3(100, 0, 100);
const AB = B.clone().sub(A); //AB向量
AB.normalize(); //AB归一化表示直线AB的方向
const T =  AB.clone().multiplyScalar(100);
mesh.position.add(T);

另一种平移方法.translateOnAxis()

//沿着AB方向平移100
mesh.translateOnAxis(AB, 100);

箭头 ArrowHelper

生成一个 A 指向 B 的箭头

const A = new THREE.Vector3(0, 30, 0); //A点
const B = new THREE.Vector3(80, 0, 0); //B点

//小球网格模型创建略...

// 绘制一个从A指向B的箭头
const AB = B.clone().sub(A);
const L = AB.length(); //AB长度, 长度随便定义
const dir = AB.clone().normalize(); //单位向量表示AB方向

// 生成箭头从A指向B
const arrowHelper = new THREE.ArrowHelper(dir, A, L);
group.add(arrowHelper);

匀速运动

1. 定义运动速度

   const v = new THREE.Vector3(10, 0, 10); //物体运动速度

2. 循环渲染

   const clock = new THREE.Clock(); //时钟对象
   // 渲染循环
   function render() {
     const spt = clock.getDelta(); //两帧渲染时间间隔(秒)
     // 在spt时间内，以速度v运动的位移量
     const dis = v.clone().multiplyScalar(spt);
     // 网格模型当前的位置加上spt时间段内运动的位移量
     mesh.position.add(dis);
     renderer.render(scene, camera);
     requestAnimationFrame(render);
   }
   render();

模拟抛物线运动(重力加速度)

1. 初始化

   // 物体初始位置
   mesh.position.set(0, 100, 0);
   //物体初始速度
   const v = new THREE.Vector3(30, 0, 0);
   //重力加速度
   const g = new THREE.Vector3(0, -9.8, 0);

2. 循环渲染

   const clock = new THREE.Clock(); //时钟对象
   // 渲染循环
   function render() {
     if (mesh.position.y > 0) {
       const spt = clock.getDelta(); //两帧渲染时间间隔(秒)
       //spV:重力加速度在时间 spt 内对速度的改变
       const spV = g.clone().multiplyScalar(spt);
       v.add(spV); //v = v + spV 更新当前速度
       // 在 spt 时间内，以速度 v 运动的位移量
       const dis = v.clone().multiplyScalar(spt);
       // 网格模型当前的位置加上 spt 时间段内运动的位移量
       mesh.position.add(dis);
     }
     renderer.render(scene, camera);
     requestAnimationFrame(render);
   }
   render();