参考
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)
}
直接放到(0,5,0)。
way1(cube) {
cube.position.set(0,5,0)
}
这种方式的信息会被存储到mesh.matrix
矩阵中。但是前提是mesh.maxtrixAutoUpdate = true
,直接修改position
,scale
,rotation
才可以。
先放到(0,0,0)处,然后沿着y轴向上平移5单位。与第一种效果一样,都是改变模型的矩阵mesh.matrix
。
way2(cube) {
const mat = new THREE.Matrix4().makeTranslation(0,5,0)
cube.applyMatrix4(mat)
}
改变顶点属性,然后直接送入GPU。cube.geometry.attributes.position.array
way3(cube) {
const mat = new THREE.Matrix4().makeTranslation(0,5,0)
cube.geometry.applyMatrix4(mat)
}
第三种: