Можно использовать THREE.CircleGeometry()
:
var decagonGeom = new THREE.CircleGeometry(5, 10); // первый аргумент - радиус, второй - количество радиальных сегментов.
var mesh = new THREE.Mesh(decagonGeom, new THREE.MeshBasicMaterial({color: "blue"}));
Если вдруг возникнет надобность сделать просто контур, то для обычной геометрии подходит вызов .shift()
на массиве вершин:
var decagonGeom = new THREE.CircleGeometry(5, 10);
decagonGeom.vertices.shift();
var contour = new THREE.LineLoop(decagonGeom, new THREE.LineBasicMaterial({color: "yellow"}));
При необходимости поставить объекты в формацию "десятиугольник" можно использовать метод .applyAxisAngle()
:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var radius = 5;
var rotVector = new THREE.Vector3(0, radius, 0);
var axis = new THREE.Vector3(0, 0, 1);
var angleStep = THREE.Math.degToRad(36); // 1/10 of 360
for (let i = 0; i < 10; i++) {
var mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(1, 1), new THREE.MeshBasicMaterial({
color: Math.random() * 0x777777 + 0x777777
}));
mesh.position.copy(rotVector).applyAxisAngle(axis, angleStep * i);
scene.add(mesh);
}
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>