Creating a Line in Three.js

I'm having trouble drawing a Line3 in Three.js using the following code:

start = new THREE.Vector3(20, 10, 0);

end = new THREE.Vector3(200, 100, 0);
var line  = new THREE.Line3(start, end);
   scene.add(line);

The code runs without any errors, but the line is not showing up on the screen. In the same program, I have also added a sphere:

   var initScene = function () {
   window.scene = new THREE.Scene();
    window.renderer = new THREE.WebGLRenderer({
      alpha: true
    });

    // remaining code for setting up the renderer and camera...

    var radius = 50,
    segments = 16,
    rings = 16;

    // creating a sphere
    var sphereMaterial =
    new THREE.MeshLambertMaterial(
    {
      color: 0xCC0000
    });
    var sphere = new THREE.Mesh(

    new THREE.SphereGeometry(
    radius,
    segments,
    rings),

     sphereMaterial);

    // adding the sphere to the scene
    scene.add(sphere);

    start = new THREE.Vector3(20, 10, 0);

    end = new THREE.Vector3(200, 100, 0);
    // attempting to draw a line
    var line  = new THREE.Line3(start, end);
       scene.add(line);
    renderer.render(scene, camera);
    };
  
    initScene();

Currently, only the sphere is visible on the screen. Can someone please point out where I might be making a mistake?

https://i.sstatic.net/yFpvN.png

Answer №1

ADLADS (A Day Late and A Dollar Short):
From

In the vast world of three.js, Line3 stands out as a powerful math object capable of handling geometric computations. Alongside Line3, there are numerous other tools like Box2, Color, Euler, Frustum, and more that contribute to creating intricate visualizations.

Imagine having a "line" represented by a Line3 object and a "plane" denoted by a Plane object. To determine if the line intersects the plane, you can simply execute plane.intersectsLine(line) to receive either true or false as output.

It's crucial to note that NONE OF THESE MATH OBJECTS, including Line3, serve as Object3D's responsible for rendering purposes.

To summarize:
1) Establish the scene, camera, and renderer.
2) Incorporate Object3D's into the scene.
2a) Object3D's vary from Points, Lines, to Meshes.
2b) These entities consist of Geometries and Materials.
2c1) For Points and Lines, Geometries encompass vertices (Vector3's) and faces (Face3's). Use "vertices.push" or "faces.push" accordingly.
2c2) Meshes utilize diverse Geometries such as Box, Sphere, Text, Torus, and more.
3) Conclude with "renderer.render(scene, camera)".

This exploration has shed light on a complex topic - many thanks for the enlightening question!

Answer №2

When working with spheres, you start by creating a geometry using SphereGeometry. This geometry is then passed as an argument to create a mesh called sphere, which includes a material for drawing purposes. As for lines, they are created using a 2-vertices geometry and require the creation of a corresponding mesh:

var lineMesh=new THREE.Line(
    line,//the line3 geometry you have yet
    new THREE.LineBasicMaterial({color:0x0000ff})//basic blue color as material
);
scene.add(lineMesh);

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

Guide to attaching a page content button to a fixed header

I am currently developing a webpage with a sticky header, and I want to include an animated button that moves onto the header when scrolled past. You can check out my code snippet here: https://jsfiddle.net/ykL50pjf/ The specific ID for the button is #t ...

What is the best method for accessing data from an Array of Objects in AngularJS?

I am trying to call a REST service and display data based on the regInventoryId. I have successfully displayed some objects, but I am having trouble populating the view for SubpartId. Any suggestions or feedback would be greatly appreciated. Here is the c ...

What is the best way to ensure that text only displays up to five lines and fully collapses using CSS or javascript/jquery?

Hello everyone, I have come across an issue. English is not my strong suit, but I will do my best to explain it thoroughly. The problem at hand is a design requirement in the draft that specifies showing up to five lines of text. If the text exceeds this ...

Deactivate tag Script using JQuery

Is there a way to dynamically remove two <script> tags from a page at the document ready event? Each tag is assigned its own unique id. I attempted to use the following code: $("#idPrimoScript").remove(); $("#idSecondoScript").remove(); However, t ...

The variable 'firebase' is nowhere to be found

I am encountering an issue with the error message 'Can't find variable: firebase' and I am struggling to identify the cause of this error. I have installed firebase using 'yarn add firebase' and double-checked that it is properly i ...

Javascript Flickering Effect in HTML5

Currently, I am in the process of creating a simple game using javascript without jQuery. However, I am facing an issue with flickering on the canvas due to the clearing command. After researching solutions online, I came across suggestions for implementin ...

Modernize legacy Angular codebase to the most recent version (v15)

I'm trying to find the smoothest path to upgrading an angular application from v7 to v15. It's a big codebase with numerous deprecated packages and implementations. Is there a simpler approach to tackling this task? I appreciate any advice you ca ...

You are unable to choose more than one file at a time for

Currently, I am in the process of developing an application using HTML, CSS, and JS by following a tutorial. The main purpose of this app is to merge multiple PDF files together. However, I have encountered an issue where I am unable to select multiple fil ...

Icons not appearing in TinyMce

Currently, I am utilizing Laravel in combination with Blade and Vue.js, specifically the tinymce-wrapper @tinymce/tinymce-vue. The Issue: Following a transition from cloud to self-hosted, TinyMce (version 5.7.0) is not displaying icons as expected. <te ...

The issue with getting a token from Next-auth on the server side persists

Currently, I am working on an application using Next.js and implementing authentication with NextAuth. However, I am encountering an issue with the getToken function not working properly on the server-side. I have double-checked my callbacks configuration ...

Repeating every 3 to 6 months on later.js commencing from a specified date

Currently, I am working on setting up recurring events every 3 and 6 months using the later.js library which can be found at https://github.com/bunkat/later. The code implementation looks like this: // Assuming my value.scheduled_date is set to 2018-09-0 ...

The form submission button fails to function when the onsubmit function returns false

When submitting, I check two fields. If one of the two fields is checked, then I return true; otherwise, I return false. The issue I'm facing is that even when I check one of the checkboxes, the submit button does not seem to work (I use console.log() ...

I aim to decrease the number of decimal places in the code provided below

When working on an HTML page, I encountered a challenge with the decimal numbers displaying more positions than desired - for instance: 13.16 instead of 13.167. Despite my attempts to rectify this using the code snippet below, it is still not functioning ...

How can I change an icon and switch themes using onClick in react js?

I have successfully implemented an icon click feature to change the colorscheme of my website (in line 21 and changeTheme). However, I also want the icon to toggle between FaRegMoon and FaRegSun when clicked (switching from FaRegMoon to FaRegSun and vice v ...

Is it possible for the scroll event to be triggered while scrolling only when a div element is used?

While utilizing window.onscroll to track scroll events during scrolling, I noticed that in certain Android devices the scroll event is only triggered after the scroll has completed. However, when monitoring scroll events within a specific div element, it ...

Error message: "NAN encountered while attempting to extract a numerical value from

I've encountered a strange bug in my coding. I'm working on a weather forecasting website that uses geolocation to identify your city and then utilizes the wunderground API to provide the forecast. The issue arises when manually searching for a c ...

Activate the jQuery click event by specifying the URL

On my webpage, I have a jQuery click function that loads multiple HTML pages into a specified div. I am looking to set specific URLs that will trigger this event, like test.com#about <script type="text/javascript"> $(document). ...

Angular 4: Implementing Subscription with Behavior Subject

I am currently working with Angular 4 and utilizing observables. I have a requirement to share data between components as I am using BehaviorSubject along with observables. Below is the code snippet: import { Subject } from 'rxjs/Subject'; imp ...

Transforming an object containing methods into a string using Javascript specifically for Photoshop

I have a unique universal object that is essential for my Photoshop scripts. It contains various properties and methods like this: var Object = {}; Object.text = "this is some text"; Object.toolbox = new ToolBox(); // specialized object with its own funct ...

Ways to maintain a pointer to a RequireJS module?

Understanding the inner workings of RequireJS has been a bit challenging for me, as the official website doesn't provide clear explanations on fundamental concepts like how to utilize the 'require' and 'define' methods. Currently, ...