Creating unique geometric designs with three.js

Question

Creating unique geometric designs with three.js

Attempting to construct a polygon in three.js and here is the code used for it.

function DeployZone(coordinatesList) {
// Forming the polygon Shape
{


    var material = new THREE.MeshLambertMaterial({ color: 0x00ffcc });

    var faces = [0, 1, 2, 3, 4];

    var geometry = new THREE.Geometry();
    for (var i = 0; i < coordinatesList.length; i++) {
        geometry.vertices.push(new THREE.Vector3(
            coordinatesList[i].x,
            coordinatesList[i].z,
            coordinatesList[i].y
        ));
    }


    for (var i = 0; i<faces.length; i++) {
        for (var j = 1; j < faces.length - 1; j++) {
            geometry.faces.push(new THREE.Face3(faces[0], faces[j], faces[j + 1]));
        }
    }

    geometry.computeFaceNormals();
    var zone = new THREE.Mesh(geometry, material);
    scene.add(zone);

}
}

The following are the coordinates passed:

var coordinatesList = new List<Coordinates>() {
      new Coordinates(X:0,Y:0,Z:0),
       new Coordinates(X:0,Y:10,Z:0),
       new Coordinates(X:5,Y:10,Z:0),
       new Coordinates(X:2,Y:8,Z:0),
       new Coordinates(X:5,Y:5,Z:0)
    };

A polygon is created but it's not exactly as desired. The vertex at (x:2,y:8,z:0) seems to misplaced. The issue lies with defining the triangular faces properly. Seeking assistance to make the faces and vertices dynamic so that the generated geometry is correct.

Appreciate any help provided.

P.S. Attempted working with shape but no success there. Also included this reference in the code.

javascript three.js 3d geometry-surface

Answer 1

Answer №1

Using the method THREE.Shape() is suitable for your situation:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(0, 5, 10);
camera.lookAt(0, 5, 0);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var grid = new THREE.GridHelper(30, 30, 0xffffff, 0x404040);
grid.rotation.x = Math.PI * 0.5;
scene.add(grid);

var coordinatesList = [
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(0, 10, 0),
  new THREE.Vector3(5, 10, 0),
  new THREE.Vector3(2, 8, 0),
  new THREE.Vector3(5, 5, 0)
];


// Create shape
var geomShape = new THREE.ShapeBufferGeometry(new THREE.Shape(coordinatesList));
var matShape = new THREE.MeshBasicMaterial({color:"blue"});
var shape = new THREE.Mesh(geomShape, matShape);
scene.add(shape);

// Generate points
var geom = new THREE.BufferGeometry().setFromPoints(coordinatesList);
var matPoints = new THREE.PointsMaterial({size: 0.55, color: "pink"});
var points = new THREE.Points(geom, matPoints);
scene.add(points);


// Define lines
var matLines = new THREE.LineBasicMaterial({color: "magenta"});
var lines = new THREE.LineLoop(geom, matLines);
scene.add(lines);


renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>

Version used: Three.js r109

Answer 2

Using the method THREE.Shape() is suitable for your situation:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(0, 5, 10);
camera.lookAt(0, 5, 0);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var grid = new THREE.GridHelper(30, 30, 0xffffff, 0x404040);
grid.rotation.x = Math.PI * 0.5;
scene.add(grid);

var coordinatesList = [
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(0, 10, 0),
  new THREE.Vector3(5, 10, 0),
  new THREE.Vector3(2, 8, 0),
  new THREE.Vector3(5, 5, 0)
];


// Create shape
var geomShape = new THREE.ShapeBufferGeometry(new THREE.Shape(coordinatesList));
var matShape = new THREE.MeshBasicMaterial({color:"blue"});
var shape = new THREE.Mesh(geomShape, matShape);
scene.add(shape);

// Generate points
var geom = new THREE.BufferGeometry().setFromPoints(coordinatesList);
var matPoints = new THREE.PointsMaterial({size: 0.55, color: "pink"});
var points = new THREE.Points(geom, matPoints);
scene.add(points);


// Define lines
var matLines = new THREE.LineBasicMaterial({color: "magenta"});
var lines = new THREE.LineLoop(geom, matLines);
scene.add(lines);


renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>

Version used: Three.js r109

Creating unique geometric designs with three.js

Answer №1

Similar questions

Error in browser caused by JQuery JavaScript, not Dreamweaver

Troubleshooting issues with filtering two MongoDB arrays in ES6 and finding a solution

Guideline on extracting private keys from Windows Certificate Manager

The Ultimate Guide for Formatting JSON Data from Firebase

Is employing absolute paths in our confidential Node dependencies a good idea?

What are the steps to take in order to successfully deploy an Express server on GitHub Pages?

The GET request is returning a null array instead of the expected array contents

Strategies for handling axios responses within a useEffect hook in Reactjs

Angular $watch not working as expected

The post request is successful in Postman and cURL, however, it faces issues when executed in Angular

Using JavaScript's Regex to match sentences, while ensuring any full stops within quotes are ignored

When invoking a native prototype method, consider extending or inheriting object prototypes for added functionality

Is there a way to determine the size of an array following the use of innerHTML.split?

What is the best way to send information to a component using Props in Vue2?

What is the process for extracting content from CSS comments or annotations in a stylesheet?

Unable to update a property with a new value in Vue.js when using the keyup.enter event on an input element bound to that property

Error: The module you are trying to import from the package is not found. Please check the package path and make sure that

Utilizing nested routes in Node.js with express.js framework!

Troubleshooting AngularJS form submission with missing data

Apply a new class to all Radio buttons that were previously selected, as well as the currently