Handle clicking on a mesh

I'm currently working on implementing a click event for a mesh (cube) in order to perform some processing tasks.

    var cubeFor3D = new THREE.Mesh(new THREE.CubeGeometry(40,80,40),img3D);

    scene.add(cubeFor3D);
    //
    renderer.render(scene,camera);
    //
    animate();
         //Track the click on cube3d
    cubeFor3D.on('click', function(){

          // response to click...
          console.log('you have clicked on cube 2D');

 });

Upon running the code, I encountered an error in the web console:

TypeError: cubeFor3D.on is not a function

The API documentation suggests using the following syntax:

mesh.on('click',..

However, it seems like I should replace mesh with the actual name of my mesh. I am probably making a mistake somewhere. Any help would be appreciated.

I have included the API JS file in my document: 

<script src='threex.domevent.js'></script>

javascriptthree.js

Answer №1

Although this answer is coming in late, adding the following line to the beginning of the init function is likely to resolve the issue:

THREE.Object3D._threexDomEvent.camera(camera);

Typically, I tend to include it right after creating a new THREE.Scene(); object.

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

When the click event occurs, add a class. After a delay using a timeout function, remove the added

I am currently using Jimdo and I have a section where I can edit all the codes, which is working fine except for one feature. Any assistance would be greatly appreciated! Here is the code that adds a class to an animated SVG image with its status set as d ...

javascriptjqueryhtmlcss

"Exploring MongoDB: Harnessing the power of multiple queries yielding a single document

I'm in the process of creating a comprehensive insights dashboard, and while I have a wealth of data and counts stored, I need to consolidate everything into a single document. It's a bit challenging to explain in words, but here's an exampl ...

javascriptnode.jsmongodbmongoosequery-optimization

Unable to transform Symbol data into a string - Error when making a React AJAX delete call

I'm encountering an issue where I am getting a Cannot convert a Symbol value to a string error in the console. My tech stack includes React v15 and jQuery v3. https://i.stack.imgur.com/qMOQ8.png This is my React code snippet: var CommentList = Reac ...

javascriptjqueryajaxreactjs

What is the best way to eliminate the "onclick" attribute from an HTML element using JavaScript?

Is there a way to make my code only execute the onlick function after a button is pressed? I want to prevent any action from happening before that. <!-- deactivate onclick function --> <div class="boardsection2" id="2_8_7" oncl ...

javascripthtml

Maintaining a consistent distance from the baseline while adjusting the font size dynamically in an HTML text element

Looking to lock a text element to the baseline while also resizing its font dynamically when the window is resized. I created a demonstration on jsfiddle. However, the issue arises when the window size changes; the distance from the bottom of the window i ...

javascripthtmlcss

Generate a configuration file that allows for the reading and storage of modifications

Is there a way to create a configuration file (JSON) on the local file system using JavaScript where I can write and modify data without losing it when the application is restarted? Any suggestions or solutions for this problem? Thank you for your assista ...

javascriptjsonangular

Can an unresolved promise lead to memory leaks?

I have a Promise. Initially, I created it to potentially cancel an AJAX request. However, as it turns out, the cancellation was not needed and the AJAX request completed successfully without resolving the Promise. A simplified code snippet: var defer = $ ...

javascriptangularjsmemory-leakspromiseangular-promise

All the details from this run are available in the npm run dev log on Ubuntu

Good day! I've been working on deploying a page built in vue.js, and after uploading all the files successfully, I encountered an issue when trying to run "npm run dev." No matter what I try, including re-installing npm dependencies and starting from ...

javascriptvue.jsubuntunpmdeployment

"Utilizing JQuery's addClass, removeClass, and appendTo functions to

Having a bit of an issue trying to implement a functionality where options inside a div can be clicked and moved to another div, and if they are clicked again in the other div, they will return back. Here is the code snippet: $(".selectable").bind(&ap ...

javascriptjquery

Upgrading to Bootstrap 5 and customizing the collapse button text upon click

I've spent a lot of time searching for a solution to my problem, but all the advice I found is for bootstrap 3 and 4, not version 5. Below is the code I am currently using: <div class="p-3">9 Members Online <a class="p-1 btn ...

javascripttwitter-bootstrapbootstrap-5

How can you use jQuery to activate a specific tab?

I have 3 tabs with 3 different ids. $(document).ready(function() { $(function() { $( "#tabs" ).tabs(); }); $("#links > a").click(function() { var link = $(this).attr('href').substr(-1,1); console.log(link); $('#t ...

javascriptjqueryhtml

A jQuery component with built-in event triggers

Here's an example that illustrates the concept: a widget needs to utilize its own method as a callback: $.widget("custom.mywidget", { _create: function() { this.invoke("mymodule", "myaction", {arg: this.options.value}, this.parseData); ...

javascriptjquery

Displaying Images in VUE JS from an Array

I'm currently working on linking images to an img element from an array of objects. While I've successfully managed to transfer the strings to the HTML elements, I'm facing challenges with displaying the pictures. Any assistance would be gre ...

javascripthtmlvue.js

Dim the brightness of an image on Internet Explorer

I discovered this code on another site and it functions flawlessly in Chrome and FF, however, IE (version 11.0.9) doesn't seem to like it. -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); fil ...

javascripthtmlcss

iOS device encounters failure with Ajax CORS request and redirect

I am experiencing an issue where a URL is being redirected to another domain by the server. My test code is very simple: $.ajax({ type:"GET", url:"{MYURL}", success:function(d){alert('response');} }) You can che ...

javascriptiosajaxcors

Showing Data from JSON on an HTML Page

My project in play framework requires displaying Strings from a Json (containing a list of Strings) in a table on an html page. I attempted to use ajax and jquery for this purpose, but the implementation is not functioning correctly. Here is my javascript ...

javascriptjqueryjsonajaxplayframework

What is the most effective method for incorporating CSS using Javascript to target a specific aria-label attribute?

Is there a way to add a CSS property to a specific tag with a particular aria-label on document load? My goal is to change the flex order of a section to 2. I need help using JavaScript to target the aria-label 'block 1' so I can set the order t ...

javascriptcsstwittertampermonkey

Avoid clicking on the HTML element based on the variable's current value

Within my component, I have a clickable div that triggers a function called todo when the div is clicked: <div @click="todo()"></div> In addition, there is a global variable in this component named price. I am looking to make the af ...

javascriptvue.jsecmascript-6onclick

How can I pass a value to a javascript function when a button in asp.net is clicked?

For the client side code, I have written the following: <script> function initialize(x, y) { alert(x); alert(y); var mapProp = { center: new google.maps.LatLng(x, y), zoom: 7, mapTy ...

javascriptasp.net

The Battle of node.js Modules: Comparing socket.io and express.static

The server.js file I am currently running is set up as follows: module.exports = server; var express = require('express'); var fs = require('fs'); var server = express.createServer(); var port = 58000; server.listen(port); var ...

javascriptnode.jsexpresssocket.io