Create a feature in three.js that allows users to click on an object to display information about the

After loading an object using the GLTF loader into my scene, I want to create a point on this object to display popup info.

Is there a way to add a point to a specific location on the object?

Answer №1

If you want to include an invisible cube or sphere in your project, you can utilize the online three.js editor available at . Simply position the object as desired, add custom data such as raycast: true, export to gltf format, and then include it in an array of objects that can be raycasted.

gltf.scene.traverse( function ( child ) {
    if(child.userData.raycast) raycastable.push(child);
})

Subsequently, you can detect intersections by incorporating the following logic into the render loop:

Answer №2

There are a couple of methods to achieve this task.
1. Firstly, you have the option to integrate a Button through a specific software that provides the respective object.
2. Alternatively, you can craft a distinct custom Button or Object directly within THREE.js and position it within the scene alongside the GLTF object.

Appreciate the help!

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

Node.js - Error: JSON.Parse and JSON.Stringify are not recognized as functions

Is it possible to convert a string to JSON and vice versa without any additional npm packages? I am currently using JSON.Stringfy in my router.js file. Are there any specific npm modules that need to be added to the project in order to use the JSON.Stringf ...

Multi-line input in ExtJs

Is there a way to create a multiline input with vertical scrollbars in EXTJS? I tried the following code: noteField = new Ext.form.TextField({ emptyText: 'note...', multiline: true, applyTo: &apos ...

Submitting Form data to MySQL database with Node.js using Express framework

Currently, I'm working on a server.js file in Node that is intended to send form data from an HTML file to MySQL. However, I seem to be encountering a syntax error with my code. Below, you'll find the code snippet along with the specific error me ...

Can the caller function's arguments be altered using Function.prototype.apply()?

function modifyValues(a,b){ console.log(arguments); //["oldValue","oldValue"] var newArguments = updateValues.apply(this,arguments); for (var i=0;i<arguments.length;i++){ arguments[i] = newArguments[i]; } console.log(arguments); // ...

Click on the button to retrieve the data from the table cell

I have a table created using JavaScript <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">City</th> <th scope="col">Region</th> </tr> < ...

Utilizing the request body value within the .withMessage() function of the Express validator chain

I am looking to showcase my express validator errors with the specific value entered by the user. For instance, if a user types in an invalid username like "$@#" (using a regex that I will provide), I want to return my error message as follows : { "er ...

How to add a new row to a Kendo grid with a unique custom styling

I am looking for a way to insert new data into a Kendo grid, but I want the added row to have a custom class so that I can style it with a different background color. How can I achieve this? I have searched through all the documentation but couldn't f ...

Having trouble setting up a successful connection with Socket.io client?

I'm struggling to integrate websockets into my website. Every attempt I make in the client results in errors. This is how I have Apache configured: <VirtualHost *:80> ServerName xxxxx.com DocumentRoot /var/www/html/RoW ErrorLog /var/www/html/Ro ...

Trouble sliding with Material UI Slider

I've encountered an issue with my Material UI slider - it doesn't slide when clicked and dragged. I followed one of the examples on the Material UI website (https://material-ui.com/components/slider/) and included an onChange function. The values ...

Highcharts JS encountered an error: x[(intermediate value)(intermediate value)(intermediate value)] is not a valid constructor

I'm in the process of creating a bar chart by fetching options from an ajax response. However, I encountered an error when passing the object to the highcharts constructor. Uncaught TypeError: x[(intermediate value)(intermediate value)(intermediate v ...

positioning the cursor at the end of a content-editable div

When working with a contenteditable div, I encountered several issues specific to FireFox. To address these problems, I found that appending a br tag to the end of the div was necessary. <div id="testDiv" contentEditable="true"> Hey, click the butt ...

In the process of making a request with axios in an express server

Struggling with a simple call to an API using Axios with Express, and I can't figure out why it's always pending in the browser. Here is my route: var express = require("express"); var router = express.Router(); const controller = require("../. ...

Issue: Module 'connect' is not found?

Hey there! I'm fairly new to the world of servers, and I've been learning by watching YouTube tutorials. Following one such tutorial, I installed 'connect' using npm in my project folder. Here's the structure of my project: serv ...

Discovering the flaw in my programming that pertains to JSON parsing

After countless hours of searching and reviewing documentation, I am still unable to identify the issue with my jQuery code. My goal is to practice reading a local JSON file and displaying its contents in the body of my HTML document. $(document).ready(fu ...

What is the process of importing a jQuery library into Vue.js?

Converting an HTML template to a Vue.js application with Laravel has been quite the task. One particular function that I am struggling with is the drag and drop table feature. src="assets/js/jquery.dataTables.min.js"> src="https://cdnjs.cloudflare.co ...

choosing a date from the UICalendar

Recently, I've started exploring Angular and I'm trying to incorporate a calendar feature using ui-calendar. So far, I've managed to display a basic calendar with some events on it. Now, my goal is to allow users to click on a specific day ...

Effective strategies for minimizing the bundle size of your NextJs application

Recently, I launched my first NextJS app and was surprised to see that the initial bundle size is around 1.5Mb, which seems quite large for me as a beginner in using Nextjs. I have shared an image of the yarn build and also my package.json. All the pages ...

Ways to prevent styles from being overridden by those specified in JavaScript

Some elements on my page have their style dynamically changed by JavaScript. However, I want one of them to maintain its static style without being overridden. Is there a way to specify that the style of this particular element should not be altered? Than ...

Using TypeScript to type styled-system props

Currently, I am utilizing styled-system and one of the main features of this library is its shorthand props that allow for simple and quick theming. Although I have streamlined my component, a significant aspect lies here: import React from 'react&a ...

Avoiding conflicts: Using Tabs with Revolution Slider without jQuery interference

I'm running into an issue with the tabs on my website. The revolution slider is working perfectly, but the tab widget seems to be displaying all the tab contents at once instead of each one separately. You can see the problem here: at the bottom of t ...