Error encountered in Three JS Drag Controls: Unable to assign value to property 'x' as it is undefined

I've been trying to drag the spheres around the scene using drag controls that should be activated when the "m" key is pressed. However, I keep running into an issue where the objects don't move and I receive an error message saying "Uncaught TypeError: Cannot set property 'x' of undefined at HTMLCanvasElement.onDocumentMouseMove". Any thoughts on why this might be happening? Here's a shortened version of the code for clarity (apologies if it looks messy).

<template>
  <div class="flex fill-height wrap">
    <div id="map"  class="flex fill-height wrap "  v-on:dblclick="addNewPoi3d" ></div>
  </div>
</template>
<!-- Rest of the code goes here -->

EXPECTED: The objects should be draggable.

ACTUAL: Unfortunately, they are not moving as expected. Instead, I'm encountering the "Uncaught TypeError: Cannot set property 'x' of undefined at HTMLCanvasElement.onDocumentMouseMove" error.

Answer №1

Hooray! The problem has been successfully resolved by simply including

DragControls.install({THREE: THREE})
in the init() function.

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

Once the GeoJson data is loaded with map.data.loadGeoJson, the circle events are obscured by the polygons from the

When I use map.data.loadGeoJson() to load a Geo Json file, the markers and circles on my map are being covered by polygons and their events cannot be clicked. Below are some sample codes for reference. How can this issue be resolved? Is there another way ...

Can you provide guidance on utilizing the Login Event within the Electron Framework?

I need some assistance in understanding the functionality of the Event: 'login' feature within the Electron Framework. Is this similar to the Password Autofill/Remember Password feature typically found in web browsers? I'm interested in util ...

Breaking auto-update functionality when using the 'dd-slick' jQuery plugin to style chained drop-downs

Utilizing the jquery.ddslick.min.js plugin from jQuery for creating customized drop-down menus with image options. Additionally, incorporating the jquery.chained.min.js script to automatically update the content in the second select box based on the select ...

FingerprintJS is experiencing an issue with the navigator object not being defined, resulting in

I am currently working on extracting browser fingerprint using fingerprintjs2, an npm package in Javascript. However, I encountered the following error: ReferenceError: navigator is not defined Error Logs: Code Snippet: const Fingerprint = require(&apo ...

What could be the reason for the empty array returned by the combinationSum function in Javascript?

The combinationSum function is returning an empty resultArr. When checking the ds array with console.log, it shows the correct answer, but for some reason, the final output array ends up being [[],[]]. var combinationSum = function(candidates, target) { ...

The Discord.js bot is currently experiencing an UnhandledPromiseRejectionWarning: TypeError due to the inability to access the property 'user' which is showing as undefined

I'm currently navigating the complexities of altering my Discord bot's status. I find myself in a state of confusion as I attempt to grasp the concept of promises, which seems to be playing a role in my struggle. Additionally, Discord's read ...

Choose a subclass within a superclass by utilizing the "this" keyword

Whenever a user clicks on the class addMass, I want to add the attribute data-rate to the element with the class currentMass. Since there can be multiple elements with the class addToCart, I need to ensure that the changes are only applied to the one that ...

Implementing a hamburger menu and social media sharing buttons on websites

Currently working on my personal website and delving into the world of Web Development, I have some inquiries for seasoned developers. My first query revolves around incorporating a hamburger menu onto my site for easy navigation to other pages. After att ...

Guide on seamlessly adding NPM "dependencies" to index.html using <script> tags in a VUE JS WEBPACK project

Are there any tools available that automatically inject or include NPM dependencies into the index.html file, similar to the GRUNT-BOWER plugin for BOWER dependencies? The project in question is a VUE-CLI WEBPACK project. Can this functionality be achieve ...

Error: Angular JS Service is undefined

I'm currently working on creating an array in my application that is universally accessible through services. Additionally, I have implemented ui-router in my application. In the app.js file, I define the service like this: myFamilyApp.service(&apos ...

Uninterrupted text streaming with dynamic content that seamlessly transitions without any gaps

I'm currently facing a challenge with an outdated element like <marquee>. Here's a fiddle where you can check it out: https://jsfiddle.net/qbqz0kay/1/ This is just one of the many attempts I've made, and I'm struggling with two m ...

Transfer the moon's orbit from centering around the sun to revolving around

Yesterday, @prisoner849 provided me with great help on creating a planet orbit. Now I am facing an issue in modifying the script to create orbits for moons around planets. I have tried changing the start point, but the orbits are always created at (0, 0, ...

How can I achieve independent zooming effects on two PerspectiveCameras with their respective objects in a single scene?

On either side of the window, I have placed two objects. https://i.sstatic.net/CBLw6.png The goal is to enable individual zoom functionality for each object upon hovering over them. var itsLeftControls, itsRightControls; itsRightControls = new THREE.T ...

A guide on transferring JSON data from a Django view to Vue.js instance methods

Looking for assistance with Vue.js - I'm new to it. How can JSON data be passed from a Django view to a Vue instance (method)? Views.py def articles(request): model = News.objects.all() # getting News objects list random_generator = rando ...

What is the best way to simulate a CSS import for a jest/enzyme test?

I am facing an issue with mocking an imported CSS file in my jest/enzyme test: Header.test.js import React from 'react' import { shallow } from 'enzyme' import { Header } from './Header' jest.mock('semantic-ui-css/sema ...

Instructions on how to modify a document's content by its unique identifier using Firebase Modular SDK (V9)

I am trying to figure out how to update an existing document for the same user ID in V9 Firebase whenever they log in, rather than creating a new one each time. Any suggestions on how to achieve this? Current Code setDoc( query(collectionRef), // ...

The timestamp is currently displaying as 2014-11-02T05:00:00.000Z rather than the expected 2014-11-02 00:00:00

Issue: The SELECT * query is returning dates in the wrong format. I am using the mysql2 module to run connection.query() and pass data to a server-side variable, then accessing it on the client-side with AJAX. router.post('/applicants', functi ...

What is the best way to eliminate a particular element from an array produced using the .map() function in

I am experiencing an issue with my EventCell.tsx component. When a user clicks on the component, an event is created by adding an element to the components state. Subsequently, a list of Event.tsx components is rendered using the .map() method. The problem ...

AngularJS directive doesn't refresh template when scope values are fetched dynamically through ajax requests

Attempting to give this question a precise title as possible, I find myself struggling with an issue in AngularJS. While trying to showcase my problem through a jsfiddle, it turned out to be too reliant on multiple files and not yet accessible online. So p ...

Executing control with AngularJS when ng-change event occurs

When using AngularJS One interesting scenario I encountered is having a ng-change event on a text field and seeing the function being called correctly: <input type="text" ng-model="toggleState" ng-change="ToggleGroupVisiable()" data-rule"" /> The ...