三、Three.js模型对象、材质

 备注：“本文中部分核心知识点整理自老师的授课网站”

网站地址：http://www.webgl3d.cn/pages/aac9ab/

一、三维向量Vector3与模型位置

点模型Points、线模型Line、网格网格模型Mesh等模型对象的父类都是Object3D，如果想对这些模型进行旋转、缩放、平移等操作，如何实现，可以查询Threejs文档Object3D对相关属性和方法的介绍

1、三维向量Vector3

三维向量Vector3有xyz三个分量，threejs中会用三维向量Vector3表示很多种数据，本节课提到的比较简单，就是位置.position和缩放.scale属性。

查看three.js文档你可以知道Vector3对象具有属性.x、.y、.z，Vector3对象还具有.set()等方法。

const v3 = new THREE.Vector3(100,100,100);
v3.set(50,50,50)
console.log('sad',v3);

2、位置属性.position

// 位置属性.position使用threejs三维向量对象Vector3表示的
console.log('模型位置属性.position的值', mesh.position);

模型位置.position属性用一个三维向量表示，那意味着，以后你想改变位置属性，就应该查询文档Vector3。

这里之所以强调这一点，课程目的不单单是给你介绍具体的知识点，也是在引导你学会查文档，降低记忆压力。

3、改变位置属性

通过模型位置属性.position可以设置模型在场景Scene中的位置。模型位置.position的默认值是THREE.Vector3(0.0,0.0,0.0)，表示坐标原点。

设置网格模型y坐标

mesh.position.y = 80;

设置模型xyz坐标

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

 4、缩放

属性.scale表示模型对象的xyz三个方向上的缩放比例，.scale的属性值是一个三维向量对象Vector3,默认值是THREE.Vector3(1.0,1.0,1.0)。

轴方向放大2倍

mesh.scale.x = 2.0;

网格模型xyz方向分别缩放0.5,1.5,2倍

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

 

5、平移

执行.translateX()、.tran