WebGL: How can you draw a pentagon?

140
January 10, 2020, at 2:00 PM

I am practicing WebGL and attempting to draw a pentagon, but I am not sure how to approach this. Any help would be much appreciated.

Answer 1

It's easy to do this with three.js. You can use CircleGeometry and reduce the number of segments to five to give you a pentagon.

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

More information here: https://threejs.org/docs/#api/en/geometries/CircleGeometry

Within a working example:

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>

READ ALSO
How do I do this if statement?

How do I do this if statement?

I am attempting to learn code from scratch and am doing the pre course work for lambda and I have hit a hard brick wall lolI'm a bit older (36) and have no college education and wanted to pursue this for a while but always figured I wasn't smart enough...

119
how to save url created from canvas.toBlob() inside PDFJS.getDocument to array?

how to save url created from canvas.toBlob() inside PDFJS.getDocument to array?

I render the pdf page on canvasThen, I want to save url created from canvas blob to array so that I can access outside of this method

104
Enable Button on DropDown Select in Vue?

Enable Button on DropDown Select in Vue?

I am using the vuetify material library and i have a v-select with items assigned to itHow can i make so that only when an item in selected that the button will get enabled?

97