three.js使用（3）模型的相关操作及常用材质

这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战

模型旋转、缩放、平移变换

沿x轴方向缩放2倍

mesh.scale.x = 2.0;

沿x轴缩放0.5倍,y轴缩放1.5倍,z轴缩放2倍

mesh.scale.set(0.5, 1.5, 2)

设置y轴的位置为80

mesh.position.y = 80;

设置x，y，z轴位置为80，2，10

mesh.position.set(80,2,10);

沿x轴平移100距离

mesh.translateX(100);

可以自定义移动，旋转的轴

//向量Vector3对象表示方向
var axis = new THREE.Vector3(1, 1, 1);
axis.normalize(); //向量归一化
//沿着axis轴表示方向平移100
mesh.translateOnAxis(axis, 100);
//执行.translateX()、.translateY()、.translateOnAxis()等方法本质上改变的都是模型的位置属性.position。

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

注意

注意网格模型进行缩放旋转平移变换和几何体可以实现相同的渲染效果，但是网格模型进行这些变换不会影响几何体的顶点位置坐标，网格模型缩放旋转平移变换改变的是模型的本地矩阵、世界矩阵。

常用材质

用什么模型材质，生成模型对象时就用什么材质。例如点模型材质 => 点模型对象

var geometry = new THREE.SphereGeometry(100, 25, 25); //创建一个球体几何对象
// 创建一个点材质对象
var material = new THREE.PointsMaterial({
  color: 0x0000ff, //颜色
  size: 3, //点渲染尺寸
});
//点模型对象  参数：几何体  点材质
var point = new THREE.Points(geometry, material);
scene.add(point); //网格模型添加到场景中

模型复制和克隆

var box=new THREE.BoxGeometry(10,10,10);//创建一个立方体几何对象
var material=new THREE.MeshLambertMaterial({color:0x0000ff});//材质对象

var mesh=new THREE.Mesh(box,material);//网格模型对象
var mesh2 = mesh.clone();//克隆网格模型
mesh.translateX(20);//网格模型mesh平移

scene.add(mesh,mesh2);//网格模型添加到场景中

注意当操作box模型的时候，克隆的模型对象也会跟着变化

box.scale(1.5,1.5,1.5);//几何体缩放