Using Three.js to Drag and Drop Collada Models

My objects are currently moving on the XZ axis using drag and drop functionality.

However, I am facing issues with the collada files not behaving in the same manner...

Below is my code snippet:

var container;
var camera, controls, scene, renderer;
var objects = [], plane;

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2(),
offset = new THREE.Vector3(),
INTERSECTED, SELECTED;

// Function to initialize the scene
function init() {
    // Code logic for initialization goes here
}

// Function to handle window resize event
function onWindowResize() {
    // Code logic for resizing the window goes here
}

// Function to handle mouse movement within the renderer
function onDocumentMouseMove( event ) {
    // Code logic for handling mouse movements goes here
}

// Other functions like onDocumentMouseDown, onDocumentMouseUp, animate, render go here

I am experiencing difficulty in selecting the colladas and moving them around. Can anyone identify the root cause of this issue?

Your insights and suggestions would be greatly appreciated! :)

Answer №1

Here is a solution utilizing the eventcontrols (view example ):

<script src="js/controls/EventsControls.js"></script>

EventsControls2 = new EventsControls(camera, renderer.domElement);
EventsControls2.map = checkerboard;

EventsControls2.attachEvent('mouseOver', function() {

    this.container.style.cursor = 'pointer';

});

EventsControls2.attachEvent('mouseOut', function() {

    this.container.style.cursor = 'auto';

});

EventsControls2.attachEvent('dragAndDrop', function() {

    this.container.style.cursor = 'move';
    this.focused.position.y = this.previous.y;

});



var loader = new THREE.ColladaLoader();
var Scale = new THREE.Vector3(20, 20, 20);
EventsControls2.scale.copy(Scale);
EventsControls2.offsetUse = true;

loader.options.convertUpAxis = true;
loader.load('models/monster/monster.dae', function(collada) {
    var dae = collada.scene;
    dae.position.set(0, 0, 0);
    dae.scale.set(1 / Scale.x, 1 / Scale.y, 1 / Scale.z);

    dae.updateMatrix();

    scene.add(dae);
    EventsControls2.attach(dae);
});

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

Learn how to cycle through three different texts that appear in the same spot using smooth transitions

I am working with three different rows that contain the Typography component. My goal is to display the first row, followed by the second, then the third, and back to the first one in a continuous loop. All three rows should be shown in the same location, ...

Tips for updating multiple bundled javascript files with webpack

I am working on a straightforward app that requires users to provide specific pieces of information in the following format. Kindly input your domain. User: www.google.com Please provide your vast URL. User: www.vast.xx.com Select a position: a) Bottom ...

The window event listener is failing to trigger

Initially, my window listener was working perfectly fine. However, at some point in time, it suddenly stopped functioning properly. The resize event also ceased to work. I am completely clueless as to why it is no longer operational. mounted () { win ...

What do the letters enclosed in brackets signify?

I am currently working with a library known as Monet.js, and within the documentation, there are descriptions that look like this: Maybe[A].map(fn: A => B) : Maybe[B] I am unsure of what the letters inside the brackets stand for. Is there anyone who c ...

attempting to transform promise-queue demo for use in a nodejs environment

Looking to adapt the promise-queue from a sample JQuery fiddle to Nodejs due to it meeting my needs. However, I'm running into some issues where my code is throwing an error: "TypeError: dfd.promise is not a function" return dfd.promise(); The g ...

Ways to calculate the memory utilization of a JavaScript object

Suppose I want to compare the efficiency of storing bits of a static canvas/image with Alpha more or less than 0.5 using an "array of array of number" versus an "array of string," which would be better in terms of memory usage and speed? var c = $('m ...

Retrieving current element in AngularJS using jQuery

I have 4 templates, each with mouse actions that trigger functions: ng-mouseover="enableDragging()" ng-mouseleave="disableDragging()" Within these functions, I update scope variables and would like to add a class using jQuery without passing any paramete ...

Ensure that an object is within the frustum by utilizing THREE.js

I've been experimenting with Three.js and have a canvas that I want to use as a GUI. To achieve this, I need to check if an object is within the camera's frustum. Here is my current code snippet: camera.updateMatrix(); camera.updateMatrixWorld() ...

Elements of Data Pagination in Vuetify Data Tables

My data-table is filled with thousands of data inputs, so I am using the default Vuetify pagination to display only 5, 10, or 25 items at a time on the table. However, I am in need of a way to determine which data is currently visible on the table. For ex ...

parsing a TypeScript query

Is there a simpler way to convert a query string into an object while preserving the respective data types? Let me provide some context: I utilize a table from an external service that generates filters as I add them. The challenge arises when I need to en ...

All pixels have a value of 1 for gl_FragCoord.x, y, and z, while the depth value is represented by

I'm currently utilizing THREE.js in combination with a shader. My goal is to access the zbuffer information. For the vertex shader: // enabling high precision floats #ifdef GL_ES precision highp float; #endif void main() { gl_Position = project ...

Easily Implement Geocoding Functionality with jQuery

Can anyone provide guidance on creating a simple map using Jquery that plots only one location defined by longitude and latitude? The current code I have is set up to plot an array of locations, but I specifically need assistance with plotting a single poi ...

Sending data from middleware to a function in Node.js is a crucial step in the communication

While working with express, I have a requirement to develop a middleware for validation purposes. The code snippet I have looks like this: Code: app.use('/upload', formData) app.use('/upload', function firstUpload(req, res, next) { ...

What is the proper way to access object properties in EJS?

My server has an express API to retrieve food items and I want to display their names on my ejs index file. In order to fetch the data, I have the following code in my server.js file: app.get('/', async (req, res) => { try { fetch ...

What could be the reason behind the error encountered while attempting to parse this particular JSON object?

I am encountering an issue with my PHP (Codeigniter Framework) code: $webpages = $this->webpageModel->select('webpageID,webpageTitle')->where('webpagecategoryID', $webpagecategoryID)->findAll(); header('Content-Type: ap ...

Dygraphs: Utilizing two y-axes in a single series

I'm interested in plotting a single series with two synchronized y-axes that display different units, such as °F and °C temperatures. I want the data to be readable from both axes, but only one set of points should be plotted. Here are some approac ...

What is the best approach to promptly retrieve the initial M outcomes of a collection of N concurrent invocations in node.js?

I am trying out a slow asynchronous predicate function (which communicates with an external HTTP API) on a list of N inputs. I am looking for any M (where M is less than or equal to N) inputs where the function returns true. This is my initial approach: v ...

Go to a different webpage containing HTML and update the image source on that particular page

I am facing an issue with my html page which contains multiple links to another page. I need to dynamically change the image references on the landing page based on the link the user clicks. The challenge here is that the link is inside an iframe and trigg ...

AngularJS - Increase the input date by 6 hours before converting it to JSON

Is there a way to add 6 hours to an input date in AngularJS? I attempted the following code: var eventStart = new Date ($scope.event.startdateid); var startDate = new Date ( eventStart ); startDate.setHours ( eventStart.getHours() + 6 ); event.startdate ...

javascript get data from php using fetch

I am currently in the process of implementing PayPal Express Checkout. I have successfully added the button and stored the result in my database using the provided script. <script> paypal.Buttons({ createOrder: function(data, actions) { re ...