Точки и грани
Создадим плоский треугольник в 3D пространстве
// точки треугольника
let points = [
new THREE.Vector3(2, 4, 2),
new THREE.Vector3(8, 6, 2),
new THREE.Vector3(2, 8, 8)
];
// передняя и задняя грани треугольника
let faces = [
new THREE.Face3(2, 1, 0),
new THREE.Face3(0, 1, 2)
];
let geometry = new THREE.Geometry();
geometry.vertices = points;
geometry.faces = faces;
geometry.mergeVertices();
// массив материалов
let materials = [
// описание цвета граней треугольника
new THREE.MeshBasicMaterial({ color: "#5882ff" }),
// описание цвета рёбер треугольника
new THREE.MeshBasicMaterial({ color: "#87ff09", wireframe: true })
];
let mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
scene.add(mesh);
renderer.render(scene, camera);
Создадим анимацию вращения треугольника
let myInterval = setInterval(function () {
mesh.rotation.y += 0.05;
renderer.render(scene, camera);
}, 50);
Группировка объектов
Создание группы из двух плоских треугольников
// создадим функцию, которая возвращает треугольник
function getMyMesh(x0, y0, z0, x1, y1, z1, x2, y2, z2) {
let points = [
new THREE.Vector3(x0, y0, z0),
new THREE.Vector3(x1, y1, z1),
new THREE.Vector3(x2, y2, z2)
];
let faces = [
new THREE.Face3(2, 1, 0),
new THREE.Face3(0, 1, 2)
];
let geometry = new THREE.Geometry();
geometry.vertices = points;
geometry.faces = faces;
geometry.mergeVertices();
let materials = [
new THREE.MeshBasicMaterial({color: "#5882ff"}),
new THREE.MeshBasicMaterial({color: "#87ff09", wireframe: true})
];
return THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
}
// получим с помощью функции два треугольника
let mesh1 = getMyMesh(0,0,0,0,0,8,8,0,0);
let mesh2 = getMyMesh(0,0,0,0,0,8,8,12,0);
// создадим пустую группу
let myGroup = new THREE.Group();
// добавим в группу два треугольника
myGroup.add(mesh1);
myGroup.add(mesh2);
// добавим группу на сцену
scene.add(myGroup);
// выводим на экран то, что видит камера
renderer.render(scene, camera);
// интервал для создания анимации вращения группы
let groupInterval = setInterval(function(){
myGroup.rotation.y += 0.05;
renderer.render(scene, camera);
}, 50);
Last updated
Was this helpful?