淘宝网站建设情况,企业网站推广,郑州seo优化外包热狗网,wordpress 迁移 新目录点模型Points、线模型Line、网格网格模型Mesh等模型对象的父类都是Object3D (opens new window)#xff0c;如果想对这些模型进行旋转、缩放、平移等操作#xff0c;如何实现#xff0c;可以查询Threejs文档Object3D (opens new window)对相关属性和方法的介绍。 三维向量Ve…点模型Points、线模型Line、网格网格模型Mesh等模型对象的父类都是Object3D (opens new window)如果想对这些模型进行旋转、缩放、平移等操作如何实现可以查询Threejs文档Object3D (opens new window)对相关属性和方法的介绍。 三维向量Vector3
三维向量Vector3有xyz三个分量threejs中会用三维向量Vector3表示很多种数据本节课提到的比较简单就是位置.position和缩放.scale属性。
查看three.js文档你可以知道Vector3对象具有属性.x、.y、.zVector3对象还具有.set()等方法。
//new THREE.Vector3()实例化一个三维向量对象
const v3 new THREE.Vector3(0,0,0);
console.log(v3, v3);
v3.set(10,0,0);//set方法设置向量的值
v3.x 100;//访问x、y或z属性改变某个分量的值位置属性.position
// 位置属性.position使用threejs三维向量对象Vector3表示的
console.log(模型位置属性.position的值, mesh.position);模型位置.position属性用一个三维向量表示那意味着以后你想改变位置属性就应该查询文档Vector3。
这里之所以强调这一点课程目的不单单是给你介绍具体的知识点也是在引导你学会查文档降低记忆压力。
改变位置属性
通过模型位置属性.position可以设置模型在场景Scene中的位置。模型位置.position的默认值是THREE.Vector3(0.0,0.0,0.0)表示坐标原点。
设置网格模型y坐标
mesh.position.y 80;设置模型xyz坐标
mesh.position.set(80,2,10);平移
执行.translateX()、.translateY()等方法本质上改变的都是模型的位置属性.position。
网格模型沿着x轴正方向平移100可以多次执行该语句每次执行都是相对上一次的位置进行平移变换。
// 等价于mesh.position mesh.position 100;
mesh.translateX(100);//沿着x轴正方向平移距离100沿着Z轴负方向平移距离50。
mesh.translateZ(-50);沿着自定义的方向移动。
//向量Vector3对象表示方向
const axis new THREE.Vector3(1, 1, 1);
axis.normalize(); //向量归一化
//沿着axis轴表示方向平移100
mesh.translateOnAxis(axis, 100);缩放
属性.scale表示模型对象的xyz三个方向上的缩放比例.scale的属性值是一个三维向量对象Vector3,默认值是THREE.Vector3(1.0,1.0,1.0)。
x轴方向放大2倍
mesh.scale.x 2.0;网格模型xyz方向分别缩放0.5,1.5,2倍
mesh.scale.set(0.5, 1.5, 2)
