Use three.js to drag and drop an obj file

I am currently experimenting with a Three.js example that involves draggable cubes. You can find the example here.

My goal is to replace the default internally created cubes with obj files. Here's what I've done so far.

I have included an obj model (a human face) in the objects array, thinking it would now be part of all the objects and thus should be intersected by a ray.

However, I'm encountering an issue where I can't drag the 3D obj model like I can with the other cubes. It seems like the Raycaster may not be intersecting with the 3D obj Model. How can I enable dragging for the obj model within this context?

javascriptthree.js

Answer №1

Check out this interactive example.

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

EventsControls = new EventsControls( camera, renderer.domElement );
EventsControls.projectionMap = checkerboard;
EventsControls.fixed.y = true;  

var loader = new THREE.OBJMTLLoader();

loader.load( 'models/objmtl/model.obj', 'models/objmtl/model.mtl',
    function ( GingerbreadMan ) {
        GingerbreadMan.position.set( 125, 35, 175 );
        GingerbreadMan.scale.set( 1/3, 1/3, 1/3 );
        scene.add( GingerbreadMan );

        EventsControls.attach( GingerbreadMan );
    }
);

//

function render() {
       EventsControls.update();
       controls.update();
       renderer.render(scene, camera);
}

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

Gatsby causing issues with Material UI v5 server side rendering CSS arrangement

I shared my problem on this GitHub issue too: https://github.com/mui-org/material-ui/issues/25312 Currently, I'm working with the Gatsby example provided in Material UI v5: https://github.com/mui-org/material-ui/tree/next/examples/gatsby After imple ...

javascriptcssreactjsmaterial-ui

Transfer JSON data from Python Requests to JavaScript within Django views.py

I have a Python script that retrieves JSON data and parses it: from django.http import HttpResponse import json, requests def fetch_data(request): context = {} platformUrl = 'https://www.igdb.com/api/v1/platforms' platformReq = requ ...

javascriptpythonjsondjangopython-requests

Resolve the Prototype_Pollution vulnerability detected by Checkmarx

When executing the code line window.location.search.substring(1) with the word 'substring(1)', an error related to Prototype_Pollution occurs. This error is caused by assigning external properties without proper validation, which can lead to obje ...

javascriptasp.netcheckmarx

Tips for simulating an axios request that returns an image buffer

I am attempting to simulate an axios api call that returns an image buffer as shown below: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff e1 00 de 45 78 69 66 00 00 49 49 2a 00 08 00 00 00 06 00 12 01 03 00 01 00 00 00 01 00 ... ...

javascriptunit-testingjestjs

Utilizing JavaScript regex to remove substrings that contain parentheses

I am working with a string variable named myString that includes some unwanted content towards the end: var myString = 'The sentence is good up to here foo (bar1 bar2)'; var toBeRemoved = 'foo (bar1 bar2)'; I am looking for the best w ...

javascriptregex

socket.io / settings when establishing a connection

I'm facing an issue in my node.js / Express.js app where I need to pass parameters with the socket.io connection (saw a solution in another post). On the client side, here is a snippet of my code: edit var socket = io.connect('/image/change&ap ...

javascriptnode.jsexpresssocket.io

Trouble with formatting credit card numbers in Vue.js

My payment gateway component includes a feature where selecting credit card triggers the _formatCreditCard method to format the credit card number like this: 4444 2442 4342 3434 This is the function in question: _formatCreditCard: function() { var n ...

javascriptjqueryvue.jsvuejs2

Tips for implementing multi-language URL routing in a Node.js application

I am seeking guidance on how to handle routing for multi-language URLs in Node.js, Currently, I have the following routes set up where each language generates specific routes as shown below. However, with more than 5 languages, efficiency is becoming a co ...

javascriptnode.jsexpressroutesmiddleware

Sending parameters from one Node.js function to another in separate JavaScript files

I am currently working on passing function responses between two Node.js scripts. Here is my approach. Index.js var express = require('express'); require('./meter'); var app = express(); app.get('/',function(req,res){ ...

javascriptjsonnode.jsfunctionexpress

Top technique for creating a unique cursor image for a website

I'm looking for the most efficient way to create a custom cursor image for my CSS/HTML5 website without using Flash. Ideally, I would like to implement this using CSS rather than resorting to Javascript. If Javascript is necessary, I want to know whic ...

javascriptcsscursor

Implementing mouse hover functionality for fieldset in EXTJS

I am looking to enhance the following code snippet by adding a mouse hover event that changes the background color of the fieldset item and displays an image next to it. Can someone assist me with this modification? var mainGroup = { ...

javascriptcssextjsmouseover

Tips on inserting an image within a div that is created dynamically

I'm currently working on creating dynamic div elements in my JavaScript using the code below: var div = $('<div id="a1"></div>').html("<font color=green>This is a demo</font>"); I am struggling to figure out how to ...

javascriptjquery

Ways to merge several getServerSideProps functions

Within my project, I have two important pages: index.js and other.js. In index.js, there exists a crucial method known as getServerSideProps: export async function getServerSideProps(context) { //code here } The challenge arises when I realize that I ...

javascriptreactjsnext.js

"Although Vuex data is present, an error is being logged in the JavaScript console

I'm utilizing Vuex to retrieve data from a URL and I need to use this data in computed properties in Vue.js. What could be causing the issue? <script> import {mapGetters, mapActions} from "vuex"; computed: { ...mapGetters(["ON ...

javascriptvue.jsvuex

Troubles with setting up node modules in a Windows 10 environment

I'm encountering difficulties when trying to install modules on my Windows 10 laptop after setting up Node.js from scratch. Since it's my personal computer, I have complete control over the system. Despite searching through various online forum ...

javascriptnode.jsnpmnpm-install

Refresh PHP Calculator Display Once Results are Shown

Currently working on a basic calculator project coded in HTML, CSS, JS, and PHP. Here is a glimpse of it: The user input retrieval is handled by JS, while the actual calculations and result display are taken care of by PHP. I am striving to clear out the ...

javascriptphpjqueryhtmlcss

Problem with roles assigned through reactions on Discord

I've been working on a discord bot reaction roles command and everything seems to be going smoothly, except for one issue that I'm facing. After booting up the bot and running the command to create the embed, everything works fine. However, when ...

javascriptnode.jsdiscorddiscord.js

Is there a way to verify the presence of a particular value in a list?

I need to validate the content of all li tags within a ul list. If any list item contains the text "None," then I want to append specific text to a div. If no li tag includes "None," then different text should be added to the div. Upon checking my code, I ...

javascript

Guide on executing a function exclusively when the state of a service variable changes within an Angular4 component

In my InfoFormService, I have a variable called isInValidating that is initially set to false. This variable becomes true when the component calls the validateEmail(email) function as shown below. @Injectable() export class InfoFormService { private ...

javascriptangularrxjs

Guide on transferring data from a JSON file to a JavaScript array

Currently, I am manually declaring the countries list for my typeahead search. To streamline this process, I want to retrieve the data from an external JSON file named countries.json. Here is a snippet of what the JSON file contains: [ { "id": ...

javascriptjqueryarraysjsontypeahead.js