改变对象位置的几种方式

参考
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)
}

小结

第三种:

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