"Error: The userData variable has not been defined

Hey there!

I'm currently working on labeling my 3DObject so that I can easily print their names later on. The click functionality and outline feature are all functioning properly, but for some reason, the userData field remains empty.

Below is the snippet of code I am using:

function checkIfClicked(event) {
        mouse.x = (event.offsetX / renderer.domElement.clientWidth) * 2 - 1;
        mouse.y = - (event.offsetY / renderer.domElement.clientHeight) * 2 + 1;
        raycaster.setFromCamera(mouse, camera);
        var intersects = raycaster.intersectObjects([model], true);
        if (intersects.length > 0) {
            click_level += 1;

            selectedObject = intersects[0].object;
            console.log(selectedObject.userData.name); //Issue arises here
            outlinePass.selectedObjects = [selectedObject];
            if (click_level > 1) {
                if (confirm("You are going to be redirected to Zalando.be")) {
                    document.location.href = "http://www.zalando.be";
                }
            }
        }
        else {
            click_level = 0;
            outlinePass.selectedObjects = [];
        }
}

Moreover, in my main code after loading the 3DObject:

object.userData = { name: "homme" };
model = object;
console.log(model.userData); //This one works just fine

Can anyone point out where I might be going wrong?

Answer №1

Instead of treating it as an object:

let item = new THREE.Object3D();
item.userData.label = "label1";
document.body.innerHTML = item.userData.label;
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>

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

Generate a random number not found within the given array

Hopefully, I can explain this clearly. Imagine I have 8 boxes with the class .boxA, each containing a numeric value generated from JavaScript: <div class="tfooter"> <div class="boxA" id="bx3" value="3">3</div> <div class="box ...

I am experiencing an issue where Discord.js is unable to assign a role to a new member upon joining my server

I'm trying to set up my bot to automatically assign a specific role to new members when they join the server. However, I keep encountering a strange error that I can't seem to figure out. Here is the code snippet in question: const { GuildMember ...

When using Ajax in Jquery and expecting data of type JSON, the response always seems

Looking to create a basic jQuery Ajax script that checks a user's discount code when the "Check Discount Code" button is clicked? Check out this prototype: <script> jQuery(function($) { $("#btn-check-discount").click(function() { c ...

Jquery is unable to showcase search results based on the 'data-name' attribute

Building a search feature below that filters results based on the data-name attribute. For instance, if the user types "XL," all div elements with data-name as "XL" will be displayed. I am able to see all results but the other buttons aren’t showing any ...

Ensure that all of the text boxes are aligned perfectly in the same vertical position

Is there a way to align all the textboxes in the same vertical position without using tables, only using HTML and CSS? The textboxes should start just after the label and follow the width of the label. Also, all labels are left-justified. Code :: <d ...

Is there a way to retrieve all results from a ReactiveList?

My attempt to retrieve all data has been unsuccessful as I am only able to obtain the number of results specified in the 'size' parameter. Below is a snippet of my code. <ReactiveList componentId="results" dataField="original_title" siz ...

Develop a responsive shopping cart using PHP and JavaScript

I am in the process of developing an ePos system that allows users to add items to their basket by simply clicking on them, and then calculates the total price without needing to refresh the entire page. I initially attempted to use $_SESSION and store th ...

Puppeteer: Easily choosing a dropdown selection by its displayed text

When using Puppeteer, you have the ability to choose an option from a dropdown by specifying the value as a parameter: page.select('select#idOfSelect', 'optionValue'); I'm wondering if there is a way to select an option by its te ...

Displaying list values as titles in a slider

Currently, I am utilizing the bjqs slider plugin to slide some content. Apart from the next and previous buttons, there is a navigation feature that allows users to choose their desired slide using numbers. However, I want to display the slide's title ...

Guide on mocking a function inside another function imported from a module with TypeScript and Jest

I have a function inside the action directory that I want to test: import { Action, ActionProgress, ActionStatus, MagicLinkProgress } from '../../interfaces' import { areSameActions } from '../actionsProgress' export const findActionPr ...

Position the colored div on the left side of the page

Here is the CSS I am currently using... <style type="text/css"> .widediv{width:1366px;margin-left:auto;margin-right:auto} </style> This CSS code helps me create my webpage : <body><div class="widedivv"> <!-- Content go ...

Mysterious failure of JavaScript regular expression when encountering the term "tennis"

We developed a JavaScript script to detect duplicates or potential duplicates, but it seems to have some issues with certain words like "tennis." The script functions correctly in most cases, but fails when analyzing phrases related to the word "tennis" fo ...

The root element is being rendered as null in a scope without the DOM

My goal is to render null at the root in order to create a full tree that renders null, while still taking advantage of React's component structure and lifecycle methods. If you're interested in learning more about the "returning null concept," ...

What is the method for launching a new tab within an incognito window that is already open?

In the process of developing a Chrome extension, I am focusing on the functionality of creating a new tab from context menus within an incognito window. My current approach involves using the following script: chrome.windows.create({url: "https://google.c ...

How to Manage Specific Types of Promise Rejections in Node.js?

I am exploring Node.JS and I have discovered the usefulness of the unhandledRejection event in capturing unhandled errors. Yet, I am specifically interested in catching a particular type of error. What is the best approach to achieve this selective handl ...

Why isn't my onClick event functioning as expected?

I used the handleClick function in an onClick event, but it's showing an error (this is not defined). var Buttons = React.createClass({ getInitialState() { return { field: ':P ' } }, handleClick(field ...

Troubleshooting Navigation Bar Toggle Button Issue in Bootstrap 5

Currently, I am in the process of working on a web project that requires the implementation of a responsive sidebar. This sidebar should be toggleable using a button located in the navigation bar. My choice for the layout is Bootstrap, and I have come acr ...

The initial state in NextJS fails to update when routing to the same page with different parameters

This particular project utilizes NextJS The structure of my page's URL is as follows: localhost:3000/first/second When I invoke getInitialProps on this page, the data retrieved from it is passed to the component and used to set the initial state li ...

An issue encountered in the axios package of vue.js, specifically with the error message "id=[object%20Object]"

I am facing an issue where I have an id called "test" as a parameter and I pass it to the index.js store. The error I see in the console is users?id=[object%20Object]. I tried converting the id with this.id.toString(), but unfortunately, it did not resolve ...

Ensuring strictNullChecks in Typescript is crucial when passing values between functions

When using the --strictNullChecks flag in TypeScript, there seems to be an issue with inferring that an optional property is not undefined when the check occurs in a separate function. (Please refer to the example provided, as articulating this clearly is ...