Как сделать десятиугольник в three.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

// Импортируем необходимые классы three.js
import * as THREE from 'three';

// Создаем сцену, камеру и рендерер
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Определяем вершины и индексы для создания десятиугольника
const vertices = [
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(1, 0, 0),
  new THREE.Vector3(0.809017, 0.587785, 0),
  new THREE.Vector3(0.309017, 0.951057, 0),
  new THREE.Vector3(-0.309017, 0.951057, 0),
  new THREE.Vector3(-0.809017, 0.587785, 0),
  new THREE.Vector3(-1, 0, 0),
  new THREE.Vector3(-0.809017, -0.587785, 0),
  new THREE.Vector3(-0.309017, -0.951057, 0),
  new THREE.Vector3(0.309017, -0.951057, 0),
  new THREE.Vector3(0.809017, -0.587785, 0),
];

const indices = [
  0, 1, 2,
  0, 2, 3,
  0, 3, 4,
  0, 4, 5,
  0, 5, 6,
  0, 6, 7,
  0, 7, 8,
  0, 8, 9,
  0, 9, 10,
  0, 10, 1,
];

// Создаем геометрию десятиугольника
const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(vertices);
geometry.setIndex(indices);

// Создаем материал для десятиугольника
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// Создаем меш, используя геометрию и материал
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// Устанавливаем позицию камеры
camera.position.z = 5;

// Функция для обновления сцены
function animate() {
  requestAnimationFrame(animate);
  
  // Поворачиваем меш
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;
  
  renderer.render(scene, camera);
}

animate();