携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第3天,点击查看活动详情 >>
物体通过改变它在各轴的position属性,来实现它在各轴的位置;改变scale属性,来实现缩放的大小;改变rotaiton属性,来实现物体的转动。通过这几个属性,可以实现物体的简单运动
注:cube为创建好的立方体
position 位置
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// position 位置
// 写法一(单独写):
cube.position.x = 0.7;
cube.position.y = -0.6;
cube.position.z = 1;
// 写法二(合并写):
cube.position.set(0.7, -0.6, 1)
scale 缩放
// scale 缩放
// 写法一(单独写):
cube.scale.x = 1.6;
cube.scale.y = 0.6;
cube.scale.z = 0.6;
// 写法二(合并写):
cube.scale.set(1.6, 0.6, 0.6);
rotation 旋转
// rotation 旋转
// 旋转的顺序,先y轴后x轴后z轴,先设置顺序,再设置各轴旋转角度
cube.rotation.reorder('YXZ');
cube.rotation.x = Math.PI * 0.5;
cube.rotation.y = Math.PI * 0.5;
cube.rotation.z = Math.PI * 0.5;
Group 组
Group是指由多个物体共同组成的一组物体,不同物体可以设置不同的属性,分别添加到group组中。
下面代码创建了三个网格模型cube1、cube2、cube3,通过THREE.Group类创建一个组对象group,然后通过add方法把网格模型cube1、cube2、cube3作为设置为组对象group的子对象,然后在通过执行scene.add(group)把组对象group作为场景对象的scene的子对象。也就是说场景对象是scene是group的父对象,group是cube1、cube2、cube3的父对象。这样就构成了一个三层的层级结构,当然了你也可以通过Group自己创建新模型节点作为层级结构中的一层。
// 创建一个Group
var group = new THREE.Group()
group.position.y = 0.8;
// 将组添加到场景中
scene.add(group)
const cube1 = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({ color: 'pink' })
)
// 将各立方体添加到group组中
group.add(cube1);
const cube2 = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({ color: 'cyan' })
)
cube2.position.x = -2;
group.add(cube2);
const cube3 = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({ color: 'hotpink' })
)
cube3.position.x = 2;
group.add(cube3);
三维向量 Vector3
Vector3表示一个有顺序的、单个为一组的数字组合(标记为x、y和z),可以表示一个位于三维空间中的点等。
例如,创建一个新的Vector3,即创建一个三维向量,x、y、z分量分别为1,2,3:
new THREE.Vector3(1, 2, 3)