threejs 三维向量Vector3与模型位置、缩放属性 学习笔记

js yekong

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

三维向量 Vector3

三维向量 Vector3有xyz三个分量,threejs中会用三维向量 Vector3 表示很多种数据,position 和缩放.scale 属性。 Vector3对象具有属性.x、.y、.z,Vector3对象还具有.set() 等方法。

//创建三维向量对象
const v3 = new THREE.Vector3(0, 0, 0)
v3.set(50, 50, 50)

改变位置属性

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

设置网格模型y坐标

mesh.position.y = 80

设置模型xyz坐标

mesh.position.set(50, 50, 50)

平移

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

网格模型沿着x轴正方向平移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)
喜欢