模型位置操作是改变相关属性  平移改变位置 缩放改变缩放值 旋转改变角度
     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的obj
 const v3 = new THREE.Vector3(0, 0, 0);

模型绕axis轴旋转 

const axis = new THREE.Vector3(0, 1, 0);//向量axis
 mesh.rotateOnAxis(axis, Math.PI / 8);//绕axis轴旋转π/8

axis轴就是中心轴

测试说明

 const axis = new THREE.Vector3(0, 1, 0);//向量axis
    const 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轴旋转π/8
    mesh24.rotateOnAxis(axis, Math.PI / 16);//绕axis轴旋转π/8
    mesh22.rotateOnAxis(axis, Math.PI / 8);//绕axis轴旋转π/8
     mesh23.rotateOnAxis(axis, Math.PI / 4);//绕axis轴旋转π/8

运行结果

Euler和Quaternion

Euler 参数为各坐标轴旋转角度 第四个参数为旋转顺序

const Euler = new THREE.Euler(Math.PI / 4, 0, Math.PI / 2,"XYZ");

后续扩展