Vanishing line element in Three.js



I seem to have encountered a peculiar issue that may either be a bug in three.js or a result of my own error with curve handling.

In the scene I've created, there are several meshes (such as transparent cubes and small spheres) along with a line object (whether it's Line or LineSegments doesn't make a difference) based on buffer geometry. However, when I rotate the camera, the line object sometimes disappears from view as if it's being covered by another object. It appears to vanish when the start point is out of sight - even without any additional meshes - despite the majority of the line object remaining visible.

The main question here: Why does the line disappear and what can be done to prevent this behavior?

Here's a visual representation on a screencast:

For reference, take a look at this example showcasing the issue:
http://jsfiddle.net/exiara/sa4bxhc3/
You can observe how the line disappears during camera rotation.

The code snippet from the jsfiddle example:

        var camera, controls, scene, renderer, dummy, projector,
            stats, fps = 30, fpsTimeout = 1000 / fps,
            linesGeometry,globalLine;

        // Remaining code omitted for brevity...

Answer №1

One issue arises when multiple levels of opacity are drawn on top of each other in WebGL, which requires sorting. To resolve this, simply include depthTest: false in your cube material.

var cubeMaterial = new THREE.MeshBasicMaterial({ color:0xFF0000, ambient: 0xCCCCCC, transparent: true, opacity: 0, depthTest: false });

It's worth noting that the method you're using is not efficient. Avoid drawing a grid this way and consider using lines instead.

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 Vue: Triggering .focus() on a button click

My journey with vue.js programming started just yesterday, and I'm facing a challenge in setting the focus on a textbox without using the conventional JavaScript method of document.getElementById('myTextBox').focus(). The scenario is that i ...

What is a more efficient way to avoid duplicating code in javascript?

Is there a way to avoid repeating the same code for different feeds? I have 8 feeds that I would like to use and currently, I am just incrementing variable names and feed URLs. <script type="text/javascript> function showFeed(data, content ...

invoking an API within a map function and utilizing the response

vm.owners = parents.children.map(function(e) { getparentById(e.Id) .then(function(getresponse) { var parentLink = '<a href="/#/parent/onboard/' + e.Id + '" target="_blank">' + e.Number + "-&qu ...

Utilizing slug URLs effectively in Next.js

In my current project with Next.js, I am working on implementing "dynamic routes". The goal is to update the URL structure such that upon clicking, the URL should look like "myurl.com/article/55". To achieve this, I have utilized the following "link tag": ...

Tips for concealing a dynamic DOM element using JQuery after it has been generated

My current project involves creating a form that allows users to dynamically add text fields by clicking on an "add option" button. Additionally, they should be able to remove added fields with a "remove option" link that is generated by JQuery along with ...

Timing issues with setInterval and setTimeout are causing them to execute at the incorrect moments

I am struggling with changing the background image using setInterval and setTimeout every x seconds. The issue I am facing is that the timer is not working as intended, causing images to change instantly instead. let images = ['background1.jpg&apo ...

Unable to display Apexcharts bar chart in Vue.js application

Struggling to incorporate Apexcharts into my Vue.js site, but unfortunately, the chart isn't appearing as expected. -For more guidance on Apexcharts, check out their documentation Here HTML <div class="section sec2"> <div id="chart" ...

What is the best location to place an HTML wrapper element within a React Project?

Just diving into the world of React, I've embarked on a simple project with bootstrap My goal is to reuse a specific HTML structure: <div className="container"> <div className="row"> <div className="col-lg-8 col-md-10 mx-auto"&g ...

ReactJS input range issue: Cannot preventDefault within a passive event listener invocation

I've been encountering some issues with the react-input-range component in my React App. It functions perfectly on larger viewports such as PCs and desktops, but on smaller devices like mobile phones and tablets, I'm seeing an error message "Unab ...

implement a click event handler for GLmol (webGL)

Check out GLmol, a Molecular Viewer built on WebGL and Javascript by visiting You can see a demo of GLmol in action at I am interested in adding a click function to GLmol. For example, when I click on a ball, I would like to retrieve information about it ...

Unable to activate the on('click') event when the button is loaded via AJAX

I am facing an issue with the on('click') event. I have a button that is loaded dynamically via ajax and has a click event attached to it. However, when I try clicking it, nothing happens even though the expected output should be showing an alert ...

How to troubleshoot passing json data from a controller to an AngularJS directive

I recently started learning AngularJS and I'm facing an issue with passing JSON data from the controller to a directive. When I try to display the data, nothing shows up and I encounter the following errors: 1. Uncaught SyntaxError: Unexpected token ...

Attempting to resolve an error message with the help of JQuery

I need help figuring out how to clear an error icon when a user presses a key. ** EDIT - including the HTML code ** <input class="validate" type="text" data-type="string" id="address" /> <input class=" ...

Utilizing the map function to modify the attributes of objects within an array

I have a data structure with unique IDs and corresponding status keys. My goal is to count how many times each status repeats itself. Here's an example of my data structure: const items = { id: 2, status_a: 1, status_b: 1, status_c: 3 }; Below is the ...

Using ng-bind-html does not offer protection against cross-site scripting vulnerabilities

I utilized ng-bind-html to safeguard against cross site scripting vulnerabilities. I came across information about sanitization and engaged in a discussion at one forum as well as another informative discussion. However, I encountered an issue where it di ...

Is there a way to alter the color of a single row within a column in a jtable based on a specific condition?

statusOfPayment: { title: 'Status of Payment', width: '8%', options: {'Paid': 'Paid', 'Due': 'Due'}, create: false, ...

Generate a key pair using the cryto library and then use it with the json

There's a new method called generateKeyPair in node 10, and I am utilizing it in the following way: const { publicKey, privateKey } = crypto.generateKeyPairSync("rsa", { modulusLength: 4096, publicKeyEncoding: { type: "spki", format: "pem ...

Encountering an issue with undefined property 'path' while attempting to upload an image on the frontend in React

I have encountered an issue while trying to upload an image on the frontend. The error message displayed is: message: "Cannot read property 'path' of undefined" status: "fail" When I log req.file on the backend and attempt to ...

What advantages does using immutablejs offer compared to using object.freeze?

I've scoured the internet trying to find convincing reasons for using immutablejs instead of Object.freeze(), but I still haven't found a satisfactory answer! What are the advantages of working with non-native data structures in this library ove ...

What is the significance of the expression $location.path() equal to '/a' in Angular?

I am currently delving into AngularJs for the first time and I have been studying the Angular documentation in order to grasp its concepts. While going through it, I came across this piece of code: $location.path() == '/a'. However, I am struggli ...