WebGL: Как вы можете нарисовать пятиугольник? - PullRequest
Новая
       10

WebGL: Как вы можете нарисовать пятиугольник?

1 голос
/ 10 января 2020

Я практикую WebGL и пытаюсь нарисовать пятиугольник, но я не уверен, как подойти к этому. Любая помощь будет высоко ценится.

Ответы [ 2 ]

0 голосов
/ 13 января 2020

Если вы хотите использовать только webgl, прежде всего вам нужно создать вершины, для этого вы можете использовать круг, выбрать пять точек на круге на равных расстояниях друг от друга и лежать на круге, вот формула для каждой координаты 

let vertices =[];
for(let i=0; i<5; i++){
  let x = radius * Math.cos(360/5 * i);
  let y = radius * Math.sin(360/5 * i);
  vertices.push(x);vertices.push(y);
}

, заменяющей требуемый радиус вместо радиуса, вы получите набор координат своего пятиугольника, а затем перетащите их в буфер вашей программы и начертите, пытаясь показать как кратко по возможности

0 голосов
/ 10 января 2020

Это легко сделать с помощью three.js. Вы можете использовать CircleGeometry и уменьшить количество сегментов до пяти, чтобы получить пятиугольник. 

var geometry = new THREE.CircleGeometry( 10, 5 )
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } )
var circle = new THREE.Mesh( geometry, material )
scene.add( circle )

Более подробная информация здесь: https://threejs.org/docs/#api / ru / geometryries / CircleGeometry

В рабочем примере: 

var width = window.innerWidth
var height = window.innerHeight

var renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setClearColor(0x8e8ed7)
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(width, height)
document.body.appendChild(renderer.domElement)

var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(35, width / height, 0.1, 3000)
camera.position.set(0, 0, 100)
var controls = new THREE.OrbitControls(camera, renderer.domElement)
controls.minDistance = 40
controls.maxDistance = 1300
var material = new THREE.MeshPhongMaterial({color: 0xFF0000, specular: 0x111111, shininess: 75})

scene.add(camera, new THREE.AmbientLight(0xffffff, 0.4))
var light = new THREE.PointLight(0xffffff, 0.8)

camera.add(light)
light.position.y += 60
light.position.x += 70

requestAnimationFrame(function animate(){
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
})

var geometry = new THREE.CircleGeometry( 10, 5 )
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } )
var circle = new THREE.Mesh( geometry, material )
scene.add( circle )
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
...