改变对象位置的几种方式

参考 Three.js中矩阵和向量的使用教程(附例子)

改变对象位置的几种方式

改变对象的位置、缩放、角度有多种方式。 这里以位置为例。让其在出现y轴正方向5处。

addBox(size) { var geometry = new THREE.BoxBufferGeometry(size, size, size); var material = new THREE.MeshPhongMaterial({ color: 0x63e42a, emissive: 0x072534, side: THREE.DoubleSide, shading: THREE.FlatShading }) var cube = new THREE.Mesh(geometry, material); cube.name = "test_cube" this.stage.scene.add(cube) this.way1(cube) }

1、第一种

直接放到(0,5,0)。

way1(cube) { cube.position.set(0,5,0) }

这种方式的信息会被存储到mesh.matrix矩阵中。但是前提是mesh.maxtrixAutoUpdate = true,直接修改position,scale,rotation才可以。

2、第二种

先放到(0,0,0)处,然后沿着y轴向上平移5单位。与第一种效果一样,都是改变模型的矩阵mesh.matrix。

way2(cube) { const mat = new THREE.Matrix4().makeTranslation(0,5,0) cube.applyMatrix4(mat) }

3、第三种

改变顶点属性,然后直接送入GPU。cube.geometry.attributes.position.array

way3(cube) { const mat = new THREE.Matrix4().makeTranslation(0,5,0) cube.geometry.applyMatrix4(mat) }

小结

第三种:

是会改变对象的旋转中心效果是累加的,每次都会作用在上面。