webgl three 模型操作
模型位置操作是改变相关属性 平移改变位置 缩放改变缩放值 旋转改变角度
webgl中是4x4矩阵 前三排是原始状态 第四排是改变值
.position 位置 .scale 缩放 .rotation 绕轴旋转 .quaternion 绕axis旋转
其实和svg差不多
缩放
缩放是操作对角线
// Matrix4x4 scale://[0] : ( sx, 0, 0, 0 )//[1] : ( 0, sy, 0, 0 )//[2] : ( 0, 0, sz, 0 )//[3] : ( 0, 0, 0, 1 )//Matrix4x4 scale://[0] : ( 1, 0, 0, 0 )//[1] : ( 0, 1, 0, 0 )//[2] : ( 0, 0, 1, 0 )//[3] : ( 0, 0, 0, 1 )three方法
geometry1.scale(0.5, 0.5, 0.5);参数为倍数 大于1放大 小于1缩小
平移
geometry1.translate(-100, -100, -100); position和translate的区别
position是直接相对于原来的点直接改变 不受其他影响直接改变到指定位置
translate是相对于上一次移动多少距离 受缩放旋转等影响
geometry1.center();center和平移对应 可以把平移后的模型回归原始坐标
但是position改变后的坐标无法通过center回到原来位置
旋转
模型分别沿xyz轴旋转
geometry1.rotateX(Math.PI / 4);
geometry1.rotateY(Math.PI / 4);
geometry1.rotateZ(Math.PI / 4);也可以通过属性直接修改
mesh.rotation.x = Math.PI / 4;
mesh.rotation.y = Math.PI / 4;
mesh.rotation.z = Math.PI / 4;vector3介绍
//三维向量 就是一个包含xyz的objconst v3 = new THREE.Vector3(0, 0, 0);模型绕axis轴旋转
const axis = new THREE.Vector3(0, 1, 0);//向量axismesh.rotateOnAxis(axis, Math.PI / 8);//绕axis轴旋转π/8axis轴就是中心轴
测试说明
const axis = new THREE.Vector3(0, 1, 0);//向量axisconst material21 = new THREE.MeshBasicMaterial({ color: 0xF79709, side: THREE.DoubleSide }); //0xff0000设置材质颜色为红色const material22 = new THREE.MeshBasicMaterial({ color: 0xFFFF00, side: THREE.DoubleSide }); //0xff0000设置材质颜色为红色const material23 = new THREE.MeshBasicMaterial({ color: 0x00FF00, side: THREE.DoubleSide }); //0xff0000设置材质颜色为红色const mesh20 = new THREE.Mesh(geometry1, material1);const mesh24 = new THREE.Mesh(geometry1, material21);const mesh22 = new THREE.Mesh(geometry1, material22);const mesh23 = new THREE.Mesh(geometry1, material23);mesh20.position.set(100, 100, 100);//设置组合对象的位置mesh24.position.set(100, 100, 100);mesh22.position.set(100, 100, 100);//设置组合对象的位置mesh23.position.set(100, 100, 100);//加到三维场景中//scene.add(mesh20);scene.add(mesh24);scene.add(mesh22);scene.add(mesh23);//rotateOnAxis沿着中心 指定轴逆时针旋转指定角度mesh20.rotateOnAxis(axis, Math.PI / 16);//绕axis轴旋转π/8mesh24.rotateOnAxis(axis, Math.PI / 16);//绕axis轴旋转π/8mesh22.rotateOnAxis(axis, Math.PI / 8);//绕axis轴旋转π/8mesh23.rotateOnAxis(axis, Math.PI / 4);//绕axis轴旋转π/8运行结果
Euler和Quaternion
Euler 参数为各坐标轴旋转角度 第四个参数为旋转顺序
const Euler = new THREE.Euler(Math.PI / 4, 0, Math.PI / 2,"XYZ");