Creating a line segment in three.js

I need to extrude a line made up of points. What is the easiest method to accomplish this?

Answer №1

After much exploration, I believe I have discovered a resolution. It is uncertain whether this method is optimal as three.js recommends using PlaneBufferGeometry instead.

function createExtrusionPath( points, depth ) {
  var shape = new THREE.PlaneGeometry(0, 0, points.length - 1, 1);
  var vertices = shape.vertices; 

  for (var i = 0, length = points.length, p; i < length; i++) {
    p = points[i];

    vertices[i].x = vertices[i + length].x = p[0];
    vertices[i].y = vertices[i + length].y = p[1];

    vertices[i].z = p[2];
    vertices[i + length].z = p[2] + depth;
  }

  shape.computeFaceNormals();

  return shape;
}

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

Using AJAX to update content based on selected value in a dropdown menu

My challenge lies in ensuring that a select box retains the selected value from a database entry and triggers an onchange event during form editing or updating. While I have successfully populated the data in the select box based on other selections, I a ...

What is the best way to import a TypeScript file in index.js?

I've recently developed an application using the react-express-starter template. I have a "server" directory where the backend is created by nodejs, containing an index.js file: const express = require('express'); const app = express(); c ...

Issue with Web API and AJAX: Unable to retrieve resource, server returned status code 400

[HttpPost("Login")] public async Task<IActionResult> Login([FromBody] SigninViewModel formData) { MemberCredential membercredential = await db.MemberCredential.FirstOrDefaultAsync(t => t.MemberAccount.Equals(f ...

Unable to populate an HTML table with JSON data

Can you assist me in populating a table using data from a JSON response? [ { "id": 1, "firstName": "James", "nickNames": [ {} ] }, { "id": 2, "firstName": "Linda", "nickNames": [ { "id": 2, "na ...

The attribute "at" is not a valid property for an Array

As per the documentation on MDN Web Docs Array.prototype#at method, it should be a valid function. However, when attempting to compile in TypeScript, an error occurs stating that the method does not exist. public at(index: number): V { index = Math.floor ...

express-session fails to remove sessions from mongodb

account.js (node.js part) const express = require("express"); const router = express.Router(); router.post("/logout", (req, res) => { console.log("session: ", req.session); req.session.destroy(); console.log("session: ", req.session); res.send ...

Creating a dynamic dropdown menu that displays options based on the selection made in a previous drop

Attempting to replicate this exact functionality on my own site has proven difficult. Despite success on jsfiddle, none of the browsers I've tested seem to cooperate. Any suggestions? Even when isolated as the sole element on a page, it simply refuses ...

Error: The property 'case sensitive routing' cannot be accessed because it is undefined

Task at hand: Running ExpressJS port using Node.js, nodemon, and lib. Operating System: Windows 10 Home x64 Node.JS Version: Lts The Challenge: Getting the ExpressJS port to run successfully. Current Issue: Encountering an internal file error, potentiall ...

Ensure Website Accessibility by Implementing Minimum Resolution Requirements

Is it possible to create a website that only opens on screens with a resolution of at least 1024 x 768, and displays an error message on unsupported resolutions? I've tried using JavaScript to achieve this, but haven't had any success. Any assis ...

Executing a Python script to run the main.js and require.js files

Looking for assistance on executing JS files with Python code. For instance, transforming this HTML snippet: <script data-main="main.js" src="require.js"></script> into Python. ...

What is the best way to populate nested elements with jQuery?

I am trying to showcase the latest NEWS headlines on my website by populating them using Jquery. Despite writing the necessary code, I am facing an issue where nothing appears on the webpage. Below is the HTML code snippet: <div class="col-md-4"> ...

Clear session data when logging out from a dropdown list

I have a header that appears on several of my web pages. It contains a dropdown menu that allows users to log out by selecting the "Logout" option. When a user clicks on "Logout", I want to destroy the session variables associated with their session. Is t ...

Add information to a table with JQuery

Is it possible to dynamically add JSON data to a table? The JSON data is in the format {"FirstName":"Cho" ,"LastName":"Chee","Company":"solution"}. Despite implementing the code, the data does not show up in the table as expected. Here is the jQuery Code: ...

Unable to cache new entry at the specified location (/Users/android/.gradle/7.5.1/checksums/sha1-checksums.bin) due to a java.io.IOException with the message "Bad file descriptor"

I encountered two errors when trying to run my React Native project. Issue 1: Failed to add entry '/Users/saadafridi/.gradle/.tmp/gradle_download14928641310389655157bin' to cache sha1-checksums.bin (/Users/saadafridi/Desktop/mobileapp/android/.g ...

Error 400 (Bad Request) is returned by the put method in Ionic/AngularJS with an object object shown in the response

I've created a basic Web API along with an ionic/angularJs Client to perform CRUD operations. However, I encountered an error when attempting to edit data on the server. Below is an image showcasing the data format being sent and the error received: ...

operations on list boxes

I have implemented an asp.net listbox in my project. The listbox includes two buttons, one for adding items and the other for removing them. I have used a JavaScript function to handle item removal from the listbox. However, when I add new items after remo ...

Is there a way for me to make my image source dynamically switch between 3-4 different images when hovered over?

I'm in the midst of a college project where I'm designing a clothing website. What I'm aiming for is to have the product image on the main feed change between 3-4 images of the same product with a quick transition when a user hovers over it. ...

Leverage Angular.js to retrieve information from current HTML documents

angular.js is a powerful tool for handling complex client-side JavaScript in web applications, but I'm also considering using it for simpler tasks. For instance, let's say I have a list with some items: <ul> <li data-id="1">Foo& ...

Tips for determining the time and space complexity of this JavaScript code

Here are two codes utilized by my platform to establish relationships between nodes. code1 : const getNodeRelationship = (node1, node2) => { // if node1 and node2 are the same node if (node1 === node2) return null; // check direct parent ...

A series of OR interfaces in TypeScript Interface

Imagine a scenario where there is a choice between multiple interfaces interface a {x:string} interface b {y:string} interface c {z:string} type all = a | b | c Now, consider an object fulfilling all by being of type c When you try to access the propert ...