three.js 模型对象旋转平移缩放变换

three.js 模型对象旋转平移缩放变换_第1张图片

1,缩放:网格模型Mesh的属性 scale 表示模型对象的缩放比例,默认是THREE.Vector3(1.0,1.0,1.0); 设置缩放的方式:

mesh.scale.set(0.5,1.5,2); // 方式一:xyz方向分别缩放0.5,1.5,2倍 
mesh.scale.x = 2.0; // 方式二:x 方向分别缩放 2倍 

2,位置属性 position: 属性值也是三维向量对象,默认是 THREE.Vector3(0.0,0.0,0.0);

设置位置的方式:

mesh.position.set(80,20,100); // 方式一:设置模型x,y,z坐标分别是80,20,100
mesh.position.y = 100; // 方式二:设置模型y轴坐标100

3,平移:网格模型沿着x轴正方向移动100,可以多次执行该语句,每次执行都是相对于上一次位置的平移变换;

mesh.translateX(100); // 沿着x轴正向平移100

沿着自定义的方向移动:

var axis = new THREE.Vector3(1,1,1);
axis.normalize(); // 归一化该向量。将这个向量转换成一个单位向量,也就是除以它的长度。
mesh.translateOnAxis(axis,100);// 沿着axis轴表示的方向平移100

执行.translateX().translateY().translateOnAxis()等方法本质上改变的都是模型的位置属性.position

4,旋转:

mesh.roteteY(Math.PI / 4); // 绕Y轴旋转π/4
// 绕自定义轴旋转 π/8
var axis = new THREE.Vector3(0,1,0);
mesh.rotateOnAxis(axis,Math.PI/8);

你可能感兴趣的:(three.js,javascript,css,前端)