WebGL：你怎么画一个五边形？答案

【问题标题】：WebGL: How can you draw a pentagon?WebGL：你怎么画一个五边形？
【发布时间】：2020-01-13 19:30:18
【问题描述】：

我正在练习 WebGL 并试图画一个五边形，但我不知道如何处理这个问题。任何帮助将不胜感激。

【问题讨论】：

你现在在画什么？你画过三角形吗？一个长方形？ Show some code please
这个问题太笼统了。在 WebGL 中有无数种方法可以绘制五边形，如果没有更多细节和一些代码，就无法知道你在问什么。如果您要求某人教您 webgl，那么这是一个非常大的话题，您应该去read some tutorials。现在投票结束。

【解决方案1】：

使用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 )

在一个工作示例中：

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>

【讨论】：

这不是关于如何在 webgl 中绘制五边形的答案，而是关于如何在 three.js 中绘制五边形的答案。 three.js 不是 webgl。以此类推，如果有人问“我如何在 C++ 中绘制五边形”，而你用一个使用 canvas2d 的 JavaScript 示例来回答，因为 JavaScript 和 Canvas2D 都是用 C++ 编写的
问题本身与堆栈溢出无关。回答离题问题被认为是不好的，因为它只会鼓励更多离题问题。我做了负责任的事情并投票决定关闭它。如果提问者解决了问题，使其成为主题，我将删除我的近距离投票并留下答案

【解决方案2】：

如果你只想使用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);
}

用你需要的半径代替半径，你会得到一组你的五边形的坐标，然后把它们放到你程序的缓冲区中并绘制，尽量简短地显示

【讨论】：

如果你愿意，我可以为你画出来