Exploring the World of 3D Curve Geometry with Three.js

I am working with an array of Vector3s that represents a curved shape in 3D space. While I have successfully rendered an outline of the curve in Three.js using THREE.Geometry and THREE.Line, I am now looking to fill it with color.

My attempts to use THREE.ShapeGeometry and THREE.Mesh were not successful, as it appears that THREE.ShapeGeometry is designed for 2D planes only (ignoring z-coordinates). Additionally, manually defining faces within THREE.Geometry did not yield the desired outcome.

I would appreciate advice on the correct approach to achieving this.

Code:

geom.vertices = curve.getPoints(100);

for (var i = 0; i < 97; i++) {
    geom.faces.push(new THREE.Face3(i, i + 1, i + 2));
}

var material = new THREE.MeshNormalMaterial();

obj = new THREE.Mesh(geom, material);
scene.add(obj);

Answer №1

After making some adjustments to the code snippet provided in the question, the issue was resolved successfully. The updated code is as follows:

geom.vertices = curve.getPoints(100);

for (var i = 0; i < 98; i++) {
    geom.faces.push(new THREE.Face3(0, i + 1, i + 2));
}

var materialObj = { color : 0xff0000, side: THREE.DoubleSide };
var material = new THREE.MeshBasicMaterial(materialObj);

obj = new THREE.Mesh(geom, material);
scene.add(obj);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am unable to append a new attribute to an object

I am currently working on a project using Node, Express, and Mongoose. In my controller, I'm trying to retrieve all orders for the logged-in client from the database. I want to display the status of each order and based on the state, add the available ...

Concealing specific outcome by implementing jQuery and AJAX with a database

I have an HTML list that appears as follows: <ul> <li>something</li> <li>something1</li> <li>something2</li> <ul> <div class="randomwrapper"> <img src="<?php echo $databaseresult[$i];?& ...

Nightwatch.js custom assertion for array comparison fails to function as expected

Utilizing the nightwatch-cucumber framework, which is built on top of Nightwatch.js, I am in the process of creating automated end-to-end tests. As a newcomer to 'JavaScript' and 'node.js', I encountered an error during the execution of ...

What is the best way to gather Data URI content through dropzone.js?

I am currently utilizing Dropzone for its thumbnail generation feature and user interface. However, I am only interested in using the thumbnail generation ability and UI and would prefer to collect all the data URIs myself and send them to the server via a ...

Obtaining outcomes from all redux-saga operations, regardless of any potential failures

I am currently facing a situation where I have to execute multiple api calls simultaneously. The current code utilizes redux-saga's all method for this purpose: try { const results = yield all( someIds.map(id => call(axios.delete, ...

Implementing Text Box Control Validation within a Gridview using UpdatePanel in c# ASP.Net

In my gridview, one of the columns contains a Text Box Control. I am looking to validate the text entered by users as alphanumeric characters and spaces only. Allowed characters are: a-z, A-Z, 0-9, and space. I want to perform this validation using Java ...

Using Vue.js: applying a CSS class to a child element within a component

Is it possible to insert a class into a component class tag from the HTML file? For instance, if we have a component like the one below and want to replace the icon field with whatever is used in the HTML file. Sample code from MyButton.vue file: <temp ...

Is there a way to obtain two different colors from a single color?

Is there a way to use a method that displays two different colored borders in a specific color? Is it possible to implement this using PHP or jQuery? Apologies for my poor English Thank you, Rory McCrossan ...

Gulp Watch fails to identify changes in the SASS SCSS directory

After setting up Gulp to compile SCSS into CSS using NanoCSS and gulp-css for the first time, I encountered an issue. While my do-sass command successfully compiles SCSS and minifies CSS files, it does not run when placed within a watch task. Any changes ...

Using Buttons to Filter Data in React

My goal is to implement button functionality that filters data from a JSON file. Upon clicking a button, the state should be updated with the filtered JSON data and display the list with the updated information. Currently, I have four buttons for filteri ...

Capture data from ajax effectively by extracting and executing manipulations seamlessly

I have a project where I need to retrieve images from a database using Ajax and display them using a carousel plugin. This is the process: An image URL is saved to the database by an admin The frontend script makes an Ajax call to a PHP file and retrieve ...

typescriptUsing redux: prevent parent component from accessing redux props

I'm currently using redux and typescript in my webapp project. What's the best approach for defining props in a component that receives redux-actions through @connect, as well as props from its parent? // mychild.tsx export namespace MyChildCom ...

JavaScript function implemented to add query parameters to HTTP requests

While reviewing my Google Analytics data, I noticed some recurring requests with a script in the query parameter. The format looks something like this: /about?RaNDMPRMz='-function(){debugger}()-">\"><scrIpt>debugger</scrIpt>< ...

Generate a graph showcasing the frequency of character occurrences within a specific column of a .csv file

I'm currently working on creating a graph using d3.js What I need to accomplish is reading the some_column column in a .csv file and counting the occurrences of | to plot them accordingly on the y-axis. The line should be plotted based on the number ...

Converting data from a JSON-like file format into valid JSON using JavaScript

I have a unique situation where I am dealing with numerous files that have an unusual file extension. My goal is to utilize JavaScript to read these files and then convert their contents into either JSON or regular JavaScript objects. Is this task even fe ...

Learn the process of covering the entire screen with a video

I'm attempting to achieve this: IMG Below is the code snippet I've been using: <div class="container" id="containervideo"> <div id="video"> <div class="box iframe-box"> <div class="container"> ...

What is the best way to expand the width of a table cell in a React + Material project?

Currently, I am utilizing material UI in conjunction with React to display my data in a table format. Within the table, there are specific titles such as "GENERAL_INFORMATION" and "INFORMATION" that I intend to center align. However, I have encountered an ...

Using Angular's Jasmine SpyOn function to handle errors in $resource calls

I need to write unit tests for an AngularJS service that utilizes $resource. I want to keep it isolated by using Jasmine's spyOn to spy on the query() method of $resource. In my controller, I prefer to use the shorter form of query() where you pass su ...

The instance is referencing a property or method (...) that has not been defined, resulting in an error during rendering

"Unrecognized property or method "show" is being referenced in the rendering stage. To resolve this, ensure that the property is reactive by including it in the data option for functional components or initializing it for class-based components." This blo ...

Setting the current time in an Animation using ThreeJS

I'm utilizing skinning and skeletal animation within ThreeJS. My goal is to navigate through an animation by moving backward and forward, as well as jumping to specific locations within the sequence instead of the usual looping behavior. The animatio ...