The issue of HTML buttons malfunctioning within a label renderer in three.js

I am facing an issue where the HTML button is not working in the label renderer when both WebGLRenderer and LabelRenderer are used simultaneously. This causes various problems such as orbit control not functioning properly, buttons being unclickable, and annotations created at runtime also not responding.

let div = document.createElement( 'div' );
div.className = 'label';
div.textContent = '+';
div.type='button';
div.id='label6';
div.style.marginTop = '-1em';
div.addEventListener("mousedown",scope_AC.uiHandler.addConnectionBtns,false);
let label = new CSS2DObject( div );
label.position.copy(pos);
childModel.add( label );

scope_AC.modeler.labelRenderer.setSize( innerWidth, innerHeight );
scope_AC.modeler.labelRenderer.domElement.style.position = 'absolute';
scope_AC.modeler.labelRenderer.domElement.style.top = '15px';
scope_AC.modeler.labelRenderer.domElement.style.pointerEvents = 'none'
document.body.appendChild(scope_AC.modeler.labelRenderer.domElement );

Whenever I try to mark an annotation, my scene freezes without any pointerEvent=none. However, if I apply this property then the annotation becomes unclickable.

javascriptthree.js

Answer №1

Prisoner849 raises an interesting point:

Consider using pointerdown instead of mousedown

Let's see how the code will look after this change:

let div = document.createElement( 'div' );
div.className = 'label';
div.textContent = '+';
div.type='button';
div.id='label6';
div.style.marginTop = '-1em';
    div.addEventListener("pointerdown",scope_AC.uiHandler.addConnectionBtns,false);
let label = new CSS2DObject( div );
label.position.copy(pos);
childModel.add( label );
    
scope_AC.modeler.labelRenderer.setSize( innerWidth, innerHeight );
scope_AC.modeler.labelRenderer.domElement.style.position = 'absolute'; scope_AC.modeler.labelRenderer.domElement.style.top = '15px';
scope_AC.modeler.labelRenderer.domElement.style.pointerEvents = 'none'
document.body.appendChild(scope_AC.modeler.labelRenderer.domElement );

That modification should solve the issue~

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

Error: The call stack has reached its maximum size while running an npm install

Attempting to execute npm install, encountered the following console output: npm ERR! Linux 4.8.0-27-generic npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" npm ERR! node v6.9.1 npm ERR! npm v3.10.8 npm ERR! Maximum call stack size exceeded npm ...

javascriptnode.jsnpm

Tips for verifying if the Selection object includes two adjacent elements that are both either 'Div' or 'P' nodes

I'm struggling to figure out how to determine if a user's selection contains two or more sibling divs or paragraphs. I'm new to working with the DOM and could use some guidance on this issue. Has anyone encountered this situation before, or ...

javascriptjquerydomselectionsiblings

Retrieve the index of a v-for loop and then send it as a parameter to a specific function

When working with a select element generated by a v-for loop in Vue, it is important to be able to retrieve the index of the selected option. This way, you can use that index in a function for further processing. However, I have been struggling to achieve ...

javascriptvue.js

Rendering external HTML content within a React component can be achieved by utilizing parsing techniques

In my React application, I have a component that receives HTML content as a string field in the props from an API call. My objectives are: To render this HTML content with styles applied. To parse the content and detect "accept-comments" tags within sec ...

javascriptreactjs

Error with JSON parsing in JavaScript when processing large numbers

After requesting a list of approved tweets from a webserver in JSON format, I visited the URL: http://localhost:8000/showtweets/?after_id=354210796420608003 and received the following JSON response: [{ "date": "2013-07-08T12:10:09", "text": "#R ...

javascriptjson

<div><!-- including: unknown --></div>

Need some assistance with this issue. The ng-include path I am using is "http://localhost:8080/coffeeprojects/calc.html". I tested the path and it seems to be working. However, despite organizing the files and improving the path as suggested in some resp ...

javascriptjqueryhtmlangularjscoffeescript

Encountering a syntax/parse error while utilizing jQuery within Velocity code

<script type="text/javascript> (function($, win) { function myCustomInit () { var self = this; var options = { 'params' : "userId=" + userId; }; self.init = function() { self.initButtonAction(); }; ...

javascriptjquery

javascript how to retrieve the custom attribute value of an HTML style

I am dealing with an HTML element that has some inline styles as well as a custom CSS property. I am able to access every style attribute except for my custom style property. Here is the code I am working with: <img id="myimg" class="ImgClass" style=" ...

javascripthtmlcss

Leverage the power of Angular and Node.js to dynamically generate and configure a new subdomain on an

Currently, I am tackling a project that involves generating sub domains dynamically based on the prefixes entered by users on my website. While everything is functioning properly on my localhost using diet.js and express-subdomain, errors are being encount ...

javascriptangularjsnode.jsamazon-web-servicessubdomain

Expanding the flexbox container to accommodate additional divs when they are added

I'm encountering an issue with a div not extending properly, causing two other divs to overlap. I've managed to position the divs correctly, but now I need the "100% all beef weenies" text to appear below the items. Any suggestions on how to achi ...

javascripthtmlcss

Creating a combination of associative keys and numbers within an array using JavaScript

To summarize, my question starts below: I have simply read a JSON file with the following contents: [{"FirstCategory":"Bath","SecondCategory":"Bath Accessories","ThirdCategory":""}, {"FirstCategory":"Bath","SecondCategory":"Faucets","ThirdCategory":""}, ...

javascriptjqueryarraysjsonmultidimensional-array

Jquery Query: Is it possible to incorporate variables into CSS properties?

I manage a website that supports multiple languages, and I want to adjust the position of my container based on the selected language. To achieve this, I attempted the following code: prop = lang == 'ar' ? 'right' : 'left'; $ ...

javascriptjquerycss

The JavaScript function String.split() is generating an array filled with 20 empty strings

Attempting to replicate the functionality of jQuery's string-based HTML element determination, I employed a split function. However, rather than returning a list of values as intended, it produced an array containing twenty empty strings. console.l ...

javascriptstringsplit

Express/axios fails to properly configure cookies and headers for response delivery

I am facing a complex issue with my project that involves two APIs. One API serves as the front-end of the application, while the other is for the back-end. The process simply entails sending requests from the front-end API to the back-end API. The front- ...

javascriptnode.jsjsonexpresscookies

php code to paginate mysql results

Imagine I have 50 rows in my database. How can I retrieve MySQL results in pages, displaying 5 results on each page and showcasing the pages as follows: [1], 2, 3, 4...10? For example, if it's on page 5, show 3, 4, [5], 6, 7...10 without refreshing al ...

phpjavascriptjquerymysqlajax

Customizing the Material UI theme colors using Typescript

I have created my own unique theme and now I am attempting to assign one of the custom colors I defined to a button. However, when I try to set it as: color={theme.pallete.lightGrey} I run into this error message: No overload matches this call Overload 1 ...

javascriptreactjsmaterial-ui

The Node function will yield a BluebirdJS Promise

I've encountered a minor issue with this script. While it functions properly, the "runTenant" method is not returning a promise that needs to be resolved with "all()". Here's the code snippet in question: Promise.resolve(runTenant(latest)).then ...

javascriptnode.jsbluebird

jQuery's callback handling often reverses the statement I just made

My current project involves using AJAX with jQuery to send a get request. Once the request is successful, I insert the response into a specific div: $.get("content.php", function(result) { $('#content').html(result); The content I'm fetc ...

javascriptjqueryajax

When new AJAX content is loaded, Isotope container fails to properly target the new objects and instead overlaps the existing ones

My webpage loads all content through an AJAX call. Initially, I tried placing my isotope initialization code inside a document ready function, but it didn't work as expected: $(function(){ container = $('#content'); contain ...

javascriptjqueryajaxjquery-isotope

There is no response provided by the function

Here is the code for inserting data into the database. However, it seems to be going into the else section as the response is empty. I have checked by alerting the response, but it remains empty. // Function to add donation via AJAX function ccjkfound ...

javascriptjqueryajaxresponse