My current challenge involves setting up DragControls in my Three.js project. After researching online, I found that the process should be quite simple. The code I have written is as follows:
let dragObjects = [obj]
const dragControls = new DragControls(dragObjects, camera, renderer.domElement);
dragControls.addEventListener("hoveron", function (event) {
console.log(event.object)
})
dragControls.addEventListener("hoveroff", function (event) {
console.log(event.object)
})
In theory, this code should enable me to drag the obj and display it in the console when the hoveron and hoveroff events occur. However, I am experiencing an issue where nothing happens. The object cannot be dragged, and there are no messages printed to the console. No errors are being shown.
To investigate further, I copied all the library code into my own file. Upon closer examination, I noticed that the RayCaster never detects any intersections.
Here are some important details to consider:
- Currently, I only have one object in the array for testing purposes, but there will be multiple objects in the future.
- All objects are assigned specific layers. The object in the array is on an active layer.
- I have a domElement overlapping my canvas for use with
CSS2DRenderer(). Its position is set toabsolute, and pointer events are disabled (none). - I have a separate
RayCaster()setup for making objects clickable, which functions correctly. - If incorrect parameters are provided to the
DragControls(), error messages are generated in the console from the plugin during mouse events. This indicates that the plugin is loaded and performing some actions.
What could be causing this problem?