Creating a Straight "Line" on a Canvas with Three.JS by Adjusting Properties

I have created a new visual representation demonstrating the guidelines for length and diameter of a cylinder.

Successfully positioning the line for the length, I now need to figure out how to adjust the properties of the line in order to draw a straight line representing the diameter as shown in the provided example:

// Creating a line to represent the diameter    
var diameterLineGeometry = new THREE.Geometry();
var diameterVertArray = diameterLineGeometry.vertices;
diameterVertArray.push(new THREE.Vector3(1, 0.5, 0), new THREE.Vector3(-0.3, 0.7, 1));
diameterLineGeometry.computeLineDistances();
var diameterLineMaterial = new THREE.LineBasicMaterial({
    color: 0xcc0000
});
var diameterLine = new THREE.Line(diameterLineGeometry, diameterLineMaterial);
cylinder.add(diameterLine);

An issue I am encountering with this code is that when I modify the size of the cylinder object, the position of the lines shifts. The line positions accurately reflect the dimensions when the object is small, e.g. 50 x 40. However, if I adjust the dimensions to something larger like "123x123," the line positions become inconsistent.

Here is the link to view the visual representation on JSFiddle: http://jsfiddle.net/b9ge6fr6/7/

If you require additional information or have any suggestions, please let me know.

Please provide your feedback and recommendations. Thank you.

Answer №1

The coordinates for the diameter are

diameterVertArray.push(new THREE.Vector3(-1, 0.5, 0), new THREE.Vector3(1, 0.5, 0));

One of the lengths is defined by

lengthVertArray.push(new THREE.Vector3(-1, 0.51, 0), new THREE.Vector3(-1, -0.51, 0));

while another length is represented as

alengthVertArray.push(new THREE.Vector3(0, 0.5, 1), new THREE.Vector3(0, -0.5, 1));

Check out this JSFiddle link for more details.

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 must generate numerous copies of my CSS class using JavaScript

My CSS includes a base class named "toast" that contains basic styling, along with a JavaScript function that generates different types of toasts based on user input. The function modifies the toast class by inserting icons and text as demonstrated below: ...

Navigate to a different directory within Cypress by utilizing the cy.exec() function

Dealing with cypress to execute a python script in another directory. However, it seems like the directory change is not functioning as expected. visitPythonProject() { cy.exec("cd /Users/**/Desktop/project/"); cy.exec("ls"); // thi ...

Tips for generating a dynamic Array name to be sorted with React JS

My lack of experience is causing some issues for me. I am currently working on a form in react where the user has to select two values first. Based on these two values, a third value will be available for selection. However, the options for this third val ...

Ensuring that the height of this specific div is set to 100% using

Is there a way to utilize the .height() method to fetch the height of each individual .post element and then assign it to the corresponding .left element? I have tried using this() but haven't been able to find a solution... Currently, my jQuery code ...

What is the best way to integrate PHP code into my countdown JavaScript code to automatically insert data into a MySQL column once the countdown has reached

I have created a countdown JavaScript code that resets every day at 23:00 of local time. I am wondering if it is possible to incorporate PHP code into this script so that after the countdown finishes each day, it automatically adds "5" to my "Credit" col ...

What steps should I take to activate JavaScript type checking in Vue files within Visual Studio Code?

After much exploration, I have successfully configured Visual Studio Code to perform type checking for JavaScript within JS files. This feature highlights any bad code and provides explanations for why it is considered as such here. However, this function ...

Modifying all occurrences of a specified string in an object (or array) - JavaScript

Is there a more efficient way to search through and replace all instances of a given string in a JavaScript object with unknown depth and properties? Check out this method, but is it the most optimal solution? var obj = { 'a' : 'The foo ...

Choose various columns and transfer them to jade

I am currently developing a web application using Node.js, where I am fetching data from my MySQL database using the following function: function getRobots(robotname, ownerid, callback) { connection.query('SELECT * FROM robots WHERE robot_owner_i ...

Is there a relay client available for an operational GraphQL server?

Hey everyone, I managed to get my tinySQL GraphQL server up and running at 127.0.0.1:3000. Now I'm looking to set up a Relay client for it. I need an example that can execute the following query: { groupBy (age: 20, job: "student") { id, na ...

Imitate network glitches

We have been utilizing the protractor tool for end-to-end testing for quite some time. Currently, we are exploring various corner cases that involve modifying the responses from API endpoint requests. To achieve this, we are utilizing protractor-http-mock ...

Is there an issue with using $_POST in an ajax form submission?

Whenever I attempt to verify if a user-inputted name already exists through an ajax form submission, all I receive is an error stating "Undefined index: username" in the sessions.php file. What could be causing this issue? <form action="" method="POST" ...

Chrome Web Store issues an overly stringent warning for accessing a public API

A new Chrome Extension called FrontPage was recently created, utilizing the New York Times API. The extension sends an AJAX request to the API and receives a JSON response. However, to make this possible, specific permissions need to be set in the manifes ...

Using Javascript to read a JSON string displayed in a URL

I'm working on developing a straightforward web application that extracts latitude and longitude data stored in a JSON format and places markers on a Google map based on this information. Currently, there is a program running on a server that generate ...

What is the reason behind having to restart the npm server each time?

When first learning Reactjs with VSCode, there was no need to restart the server after making modifications. However, now I find that I must restart the server every time I make a change in order for those changes to be applied. ...

Automated scrolling within a div when an li element overflows

Looking to implement automatic scrolling in a div. I have a list of elements within a fixed height div, and now I want the div to scroll automatically when I press the down key after highlighting the 3rd li element (i.e Compt0005). Can anyone help me solve ...

Slight Misalignment of Elements

I am attempting to align two corners of an element so that they perfectly match the corners of another element. In simpler terms, I am aiming to synchronize the corners of one element with those of another element. Below is the code snippet: ... When y ...

Retrieving outcomes from a sequence of callback functions in Node.Js

I've been struggling to get my exports function in Node.Js / Express app to return the desired value after going through a series of callback functions. I've spent hours trying to fix it with no success. Can someone provide some guidance? Here is ...

Leveraging jQuery to dynamically load an icon based on the content within a <label> tag

I manage a website that dynamically fetches content from a database, with varying contents for each label. For example, one label may be generated as General:, while another may be generated as TV:. My question is, can jQuery be used to replace the text NA ...

Setting the button value to a textbox and refreshing the status information (Codeigniter)

How do I pass the value of my "ACTIVE" status attribute to my textbox? I want to update the user's status by clicking the ACTIVE button. The user's status is currently pending. While I can easily pass the userID, I'm facing an issu ...

Utilizing an automated file retrieval system in the absence of database or website access

I'm faced with a challenge of having to download a file automatically when a user clicks the "ok" button on a website. Unfortunately, I only have access to view the site and do not have access to the database or source code. I'm unsure of how and ...