How to import a 3D model with Three.js as a demonstration

I am currently working on a project that involves displaying a button labeled "Import 3d model". I want the user to be able to choose a 3ds/max/gsm 3D model to load and view on the screen.

However, I am facing difficulty in implementing this functionality. Can someone provide me with a simple example or guide me on how to achieve this? I would greatly appreciate any help :)

<html>
<head>
    <script src="js/three.js"></script>
    <script src="js/jquery-2.0.3.min.js"></script>
    <link href="CSS/maincss.css" rel="stylesheet" />
    <title>PREZI</title>
</head;

<body>
    <center>
    <div id="share-bottom">
        <button type="button" class="photo-button"> Upload 3D Model</button>
        <div id="upload-wrap">
            <input id="upload-wrap-button" type="file" />
        </div>
    </div>
</center>
<script>

    $('#share-bottom button').click(function () {
        $('#upload-wrap-button').click();
    });

    // The rest of the JavaScript code for rendering the 3D model

</script>
</body>
</html>

Answer №1

According to Inateno, importing 3ds Max data directly may pose some challenges. However, if you are open to exploring alternative options, there is a new project in progress that could be of potential interest to you. The suggested export path would involve transferring the data from 3ds Max to OpenCOLLADA, then to glTF, and finally to Three.js.

If you're interested, here's the link to the glTF loader for Three.js: https://github.com/KhronosGroup/glTF/tree/master/loaders/threejs

Answer №2

If you want to use a 3DSMax model, you can't simply load it directly. The model needs to be converted to JSON format first, which cannot be done on the client side. One option is to send the model to a server that can handle the conversion process and then return the model in JSON format for the client to access (though this would require a converter tool on the server).

I've searched for ways to convert 3dsmax files to JSON directly but have not found any solutions. However, there are converters available that need to be installed within the software. By exporting the model to FBX format first, it can then be converted to JSON. https://github.com/mrdoob/three.js/tree/master/utils/converters

Another option is to use an online converter like the one found here:

There are also other converters available, though I'm not certain if they are compatible with ThreeJS as I haven't tested them myself. https://github.com/BabylonJS/Babylon.js/tree/master/Exporters

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

Guide on embedding PHP/MYSQL array into an independent JavaScript document

I'm looking for guidance on how to insert an array from a PHP MySQL page into a separate JavaScript file. Can someone please help me with indicating where to include the PHP URL and provide the correct format for the PHP array code in order to achieve ...

"Facing an issue with my handleChange function not getting triggered in MaterialUI. Can anyone

Why isn't my handleChange function being invoked with the TextField component from Material UI? Even though I can input values in the text fields, the component's state is not updating. Here is the Auth component: const Auth = () => { cons ...

"Troubleshooting why the jQuery Click Function is malfunctioning specifically in

Can someone help me troubleshoot this animate out script? It works fine on chrome, but not on Firefox and I can't seem to figure out why. Any suggestions? The script is designed to animate certain elements when a specific link is clicked. <scrip ...

Exploring Methods to Access External Iframes Using PHP or JavaScript

I need assistance tracking my package that was sent through the local post service. The tracking information can be found at this link: . Using the tracking number RF166699170SK, I should be able to locate the package. However, when I attempt to retrieve ...

What are the best techniques for showcasing rich text content in vue.js?

I'm working on a web application and attempting to showcase uploaded rich text content using vue.js. The content is generated by Action Text in the following format. <h1>text</h1><div>sample text<br><action-text-attachment ...

Executing a particular function on multiple buttons that have not been initialized yet

I am struggling to make this code work for every button and I haven't been able to find an explanation for the issue. I believe it may be a small detail that I am overlooking. $(document).ready(function() { // delete the selected row from the datab ...

Exploring the power of the spread operator in event listeners within VueJS 2 and JSX

Let me simplify my issue for you: render (h) { let events = {onClick: handleClick} return (<div {...events}></div>) } The onClick event did not get added to the div element. The spread operator works well with class and style attributes b ...

Incorporate a fontawesome icon into a dynamically created button using ajax

Is it possible to insert fontawesome icons into a button created using this code snippet? $.each(response, function (i, item) { trHTML += '<tr><td>' + item.name + '</td><td>' + "<input type='button&apo ...

JavaScript - Marking selected text: What are the options?

I am looking to implement a feature in JavaScript (without jQuery) that will allow me to highlight selected text with control points or markers (left and right). These markers should function similar to those on mobile phones, allowing me to extend the sel ...

Error: The function is not defined for OBJLoader/ThreeJS

I encountered an issue with the Three.OBJLoader where I am getting an Uncaught TypeError: undefined is not a function when trying to load a custom obj file. I referred to a similar problem discussed on Stack Overflow and attempted various solutions such as ...

Exploring Techniques for Adjusting Website to User's Screen Resolution

My website is currently designed for a screen resolution of 1024x768. However, I am aware that when viewed on computers with smaller or larger screen resolutions, the layout starts to distort. Is there a way to make the website adaptable to any user&apos ...

There seems to be an issue with the functionality of updating and creating in Kendo

While the grid is reading rows correctly, encountering issues with updating and creating data. The controller doesn't seem to be invoked at all. Kindly review the provided code to identify any errors. The JSON response from the read webservice is ...

Encountering an issue while trying to pass hidden value data in array format to the server side

I am currently learning how to use Handlebars as my templating engine and encountering an issue with passing over data from an API (specifically the Edamam recipe search API). I am trying to send back the array of ingredients attached to each recipe card u ...

Uncovering the Issue with Select All Functionality in <Table/> when using Material-UI and React

When using Material-UI's <Table/> with ReactJS, a table is set up with a select all checkbox. Each time an individual row checkbox is clicked, the row id is added to the state array clickedRowIds. This allows for logging of the ids of the clicke ...

The FBXLoader in three.js is failing to properly import a 3D model from a FBX file

Hey there! I've been trying to bring in an fbx model into my scene, but I'm struggling to find much information about it online. I came across a method that seems to use the official three.js package, but for some reason, the model isn't sho ...

Distributing the event object without the use of jQuery

Sorry for the basic question. It's been a challenge to find information on JS event handling without running into jQuery examples. I'm focused on DOM manipulation using pure Javascript to gain a deeper understanding of browser functionality. I w ...

Split an array of articles into subarrays according to their topics using the reduce method in Javascript

I am currently seeking a solution to divide an array of articles into subarrays based on the first key-value pair and its order. After researching several Stack Overflow posts, I have come across one that seems to align closely with my objective: break a ...

The method you are trying to access in Typescript is not present on the specified class

Here is a code snippet that showcases the use of state handling in TypeScript: type StateTypes = State1 | State2; class State1 { static handleA (): StateTypes { // Do Something return State2; } static handleB (): StateTy ...

Exploring the For Loop in Javascript Using Fiddle!

Using JQuery is also an option. I want to control the availability of the start, pause, stop, kill buttons based on certain array combinations. To summarize: If all elements in the array are "up" (started) -> I can pause, stop, kill If all elements i ...

Troubleshoot: Issues in Retrieving Query Parameter from URL within Next.js API Route

Currently, I am working on a project using Next.js (version 14) that involves implementing a product search feature. The search functionality is managed by a Search component, and the key code snippet is shown below: // Search component in Search.tsx "use ...