How can I make a polygon or polyhedron using Three.js?

Question

How can I make a polygon or polyhedron using Three.js?

Is it possible to generate polygon or polyhedron shapes in three.js using alternative methods?

var customShapePts = [];
customShapePts.push( new THREE.Vector2 ( -50, 200 ) );
customShapePts.push( new THREE.Vector2 ( 100, 200 ) );
customShapePts.push( new THREE.Vector2 ( 300, -50 ) );

customShape = new THREE.Shape( customShapePts );

var extrudeSettings = {amount: 30}; // can adjust bevelSegments, steps, bevelSize, bevelThickness here

var geometry = new THREE.ExtrudeGeometry( customShape, extrudeSettings );

mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshBasicMaterial( { color: 0x00cc00 } ), new THREE.MeshBasicMaterial( { color: 0xff3333, wireframe: true, transparent: true } ) ] );
scene.add( mesh );

javascript three.js polyhedra

Answer 1

Answer №1

Have you considered utilizing the for this task?

var cubeVertices = [
    -1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,
    -1,-1, 1,    1,-1, 1,    1, 1, 1,    -1, 1, 1,
];

var faceIndices = [
    2,1,0,    0,3,2,
    0,4,7,    7,3,0,
    0,1,5,    5,4,0,
    1,2,6,    6,5,1,
    2,3,7,    7,6,2,
    4,5,6,    6,7,4
];

var geometry = new THREE.PolyhedronGeometry( cubeVertices, faceIndices, 6, 2 );

Answer 2

Have you considered utilizing the for this task?

var cubeVertices = [
    -1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,
    -1,-1, 1,    1,-1, 1,    1, 1, 1,    -1, 1, 1,
];

var faceIndices = [
    2,1,0,    0,3,2,
    0,4,7,    7,3,0,
    0,1,5,    5,4,0,
    1,2,6,    6,5,1,
    2,3,7,    7,6,2,
    4,5,6,    6,7,4
];

var geometry = new THREE.PolyhedronGeometry( cubeVertices, faceIndices, 6, 2 );

How can I make a polygon or polyhedron using Three.js?

Answer №1

Similar questions

"Sending an array in a POST request using Javascript and processing it on the server

Showcase your skills in CSS, HTML, and Javascript

Ways to implement CSS with javascript

Check if the element is located on the active tab using jQuery

Show a dynamic modal with a widget displayed inside

Exploring the Variance between 'npm run serve' and 'npm run dev' Commands in Vue.js Development

Having trouble getting my Sequelize model to export properly

Issue with integrating the jquery tokeniput plugin in asp.net mvc 3

Using a <button> tag instead of a <div> inside of a <button> is not allowed, as clickable divs are typically frowned upon. What

What's going on with the background color? It doesn't seem

Troubleshooting: Jquery Toggle Issue When Used with Adjacent Div Element

"Learn how to clear an input field using jQuery with this simple guide

Incorporating additional text following the creation of an image composite using HTML5

Ways to modify babel output file extensions

Methods for applying responsive design to react modals in React.js

What methods can I use to locate the circular dependency within my program?

Consolidate multiple generic items into a single entry

What is the best way to send the input text to the filter component in my React application?

Looking to set up an event listener for a customized checkbox in a Kendo UI Grid column with Vue Js?

MongoDB: Issue updating the 'role' field of a document