Instructions for attaching an event listener to a Threejs Mesh Object with the help of threex dom events

var domEvents = new THREEx.DomEvents(camera, view.domElement);

var div = document.createElement( 'div' );
    div.setAttribute('data-remove','mesh1');
    div.className = 'close-me';

var label = new THREE.CSS2DObject( div );
    label.position.set( -(w / 2.1) , 0 , 0.1 );
    mesh1.add( label );

    domEvents.addEventListener(div, 'click', find, true);
    function find(event){
        alert('hey its me');
    }

While trying to add a click event to a mesh object using THREEx, I encountered some console errors:

  1. Uncaught ReferenceError: THREEx is not defined
  2. threex.domevents.js: Uncaught ReferenceError: module is not defined
  3. Cannot read property 'addEventListener' of undefined

The THREEx CDN used is:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa8e92889f9f82d79e95979f8c9f948e89bacbd4cad4ca">[email protected]</a>/threex.domevents.min.js"></script>

I would appreciate any help or guidance to resolve these issues.

Answer №1

I encountered a similar issue to yours. I found that using the CDN did not solve the problem for me. Instead, I recommend downloading the file directly from their GitHub repository. Simply copy the file named "threex.domevents.js" to your project directory and then include it in your HTML like so:

<script src="threex.domevents.js"></script>

This solution worked perfectly for me.

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

Experiencing difficulty in adding a sub-document to an array within a parent

I am currently working with a users model that incorporates a locationsSchema: const locationSchema = require('./location.js'); const userSchema = new mongoose.Schema({ email: { type: String, unique: true, required: true, }, t ...

Interactive Component overlying Layer - HTML/CSS

Currently, I am working on a web application that features a navigation bar at the bottom of the screen. To enhance visibility, I decided to apply a linear gradient overlay above the underlying elements. This screenshot illustrates what I mean. However, I ...

Modifying Div Size with Jquery

I am working on populating the div container with square boxes, but I'm having trouble adjusting the size of my #gridSquare div. Despite trying to change its height and width using jQuery, it doesn't seem to work as expected. $('#gridSquare ...

Tips for handling numerous observables in Angular 7

I am working on an Angular 7 application that deals with a total of 20 sensor data. My goal is to receive data from a selected sensor every 5 seconds using observables. For example: var sensorId = ""; // dynamically chosen from the web interface var senso ...

Is it possible to import multiple versions of a JavaScript file using HTML and JavaScript?

After extensive research, I am starting to think that using multiple versions of the same JavaScript library on a single page is not possible (without utilizing jquery Can I use multiple versions of jQuery on the same page?, which I am not). However, I wan ...

Editable content <div>: Cursor position begins prior to the placeholder

Having an issue with a contenteditable div where the placeholder text starts behind the cursor instead of at the cursor position. Any suggestions on how to correct this? <div id="input_box" contenteditable="true" autofocus="autofocus" autocomplete="o ...

Utilizing the Vuetify Dialog Component in a repetitive manner to confirm the deletion of an event

In a project I'm working on, there's a 'datatable.vue' file that loops through data and displays it in a table. Within this loop, I want to implement a reusable dialog component from Vuetify (v-dialog) that will load upon interaction wi ...

Manipulating CSS styles with jQuery

Trying to update the UL image in the CSS directory using jQuery for a Twitter stream: as tweets are displayed, want to change the avatar of the account associated with each post. Using .css is straightforward, but struggling to modify the URL for the new i ...

Top method for integrating configuration into a module

I'm trying to create a module called something.js that depends on a configuration, but I don't want the module itself to explicitly require the config. Additionally, I need my code editor to be able to analyze the module and provide autocomplete ...

Seamless flow from one image to the next

I'm working on a project with a slideshow, but I've noticed that when it transitions between images, it can be quite abrupt. I'd like to find a way for it to change smoothly from one image to the next. <div> <img class="mySli ...

Using xignite api to retrieve stock data

I've been encountering difficulties trying to make this JavaScript script function properly. Every time I attempt to run it, I receive an error message stating: "XMLHttpRequest cannot load" "No 'Access-Control-Allow-Origin' header is presen ...

Utilizing local storage functionality within AngularJS

I've been encountering challenges while trying to integrate local storage using ngStorage in my ongoing AngularJS project. Despite fixing what seems to be the root cause of data type problems and errors during debugging, issues persist. Here is the P ...

Performing an ASync call to the GetData routine in MongoClient using NodeJS

Combining code snippets from https://www.w3schools.com/nodejs/nodejs_mongodb_find.asp and https://stackoverflow.com/questions/49982058/how-to-call-an-async-function#:~:text=Putting%20the%20async%20keyword%20before,a%20promise%20to%20be%20resolved. Upon ob ...

Can JavaScript be utilized to dynamically adjust the size of all elements on the screen to a specified percentage of their initial height and width when a certain event occurs?

I'm fairly new to the world of JavaScript, but I have a basic understanding of it. I want to optimize my personal website for mobile devices. I've already taken care of screen orientation and element positioning, everything is centered nicely and ...

Unable to access the data once CORS is disabled

After enabling cors, I successfully loaded the data. However, when I disabled it, I encountered issues retrieving the data. Is there a way to bypass this without turning on cors? An error message I received is: createHttpLink.js:96 Refused to connect to & ...

Is there a way to automatically redirect the server URL when a file is modified?

I am currently experimenting with a function that is supposed to only display a message in the console without redirecting the actual URL of my server when a file is changed. watcher.add("/home/diegonode/Desktop/ExpressCart-master/routes/2.mk"); watche ...

Why won't Vanilla JavaScript work with my Rails application?

Having trouble implementing a full screen menu, no Rails errors but not working when project is run. Error received: Cannot read property 'addEventListener' of null JS code snippet: (function() { var Menu = (function() { var burger = d ...

The set interval function in JavaScript does not properly call PHP in Internet Explorer

I'm currently implementing code to display the updated message from the database. Here is what I have so far: var showtime = setInterval('redirect()',5000); ////Redirecting to DB Status ///// function redirect() { xmlhttp = GetXmlHttpOb ...

What could be causing my THREE.js Documentation Box to malfunction?

I am a newcomer trying to get the hang of THREE.js. I delved into the THREE.js Documentation and attempted to implement the code, but when I loaded my HTML page, it appeared blank. I am at a loss for what to do next. I utilized Visual Studio Code for codin ...

Ensure that the dropdown menu remains visible even after the mouse no longer hovers over it

Looking to create a main menu with dropdown items that appear when the user hovers over them? You may have noticed that typically, the dropdown disappears once the hover event is lost. But what if you want the menu to stay visible and only disappear upon c ...