Starting out with THREE.js: encountering challenges when attempting to incorporate a Blender model into the scene

Just starting out with THREE.js and encountering a small roadblock.

Currently, I've been experimenting with modifying a sample file that I came across here:

The sample file sets up a THREE scene, adds a sphere, and a point light.

However, I'm struggling to figure out how to replace the default sphere with a model I created in Blender 2.63 and exported using the corresponding exporter.

I suspect it might be an issue with my syntax.

Below is the code snippet. Any advice on what needs to be changed to display my Blender model on the stage would be greatly appreciated.

<head>
        <meta charset="utf-8" />
        <title>Sample Three.js</title>
        <link rel="stylesheet" href="js/Styles.css" />
    </head>
    <body>

        <div id="container"></div>

    </body>
    <script src="js/Stats.js"></script>
    <script src="js/Three.js"></script>
    <script>

    var WIDTH = 700,
        HEIGHT = 600;

    var VIEW_ANGLE = 45,
        ASPECT = WIDTH / HEIGHT,
        NEAR = 0.1,
        FAR = 10000;

    // Remaining code omitted for brevity

    </script>
    

Answer №1

Facing a similar issue, I managed to find a solution by adjusting the object's scale. In your callback function, consider adding this line after mesh.position.z=0:

mesh.scale.x = mesh.scale.y = mesh.scale.z = 200;

This approach worked for me personally.

Hoping this information proves helpful.

Answer №2

It can be challenging to understand without a real-time demonstration...

The loading process is happening in an asynchronous manner. In order to address this, relocate the render() function call to the final line of the loader callback function (replacing the alert call).

Ensure that the camera is positioned closely enough to the model for optimal visibility.

By utilizing camera.lookAt( scene.position ), you can guarantee that the camera remains focused on the origin subsequent to any adjustments made.

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

Is the VueJs and ChartJs combination causing the chart to be width-responsive, but not height-responsive?

I've exhausted all options, but I can't seem to make the height of my chart respond effectively. The width is behaving as expected, adjusting responsively, but the height stubbornly remains fixed at 400px. Within my primary Vue application, I i ...

Trouble with Installing Express

I have encountered an issue while trying to install express, despite following various solutions without success. Upon installation, I receive the message: npm WARN <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb8c9e9988928f9 ...

Undefined values in Javascript arrays

Currently, I am sending a JSON object back to a JavaScript array. The data in the array is correct (I verified this using Firebug's console.debug() feature), but when I try to access the data within the array, it shows as undefined. Below is the func ...

"Encountering a strange issue where submitting a form with Jquery and AJAX in Rails does not work as expected, causing the index

Currently facing a unique issue with a jQuery/Ajax HTML update form. The application in question is a single-page TODO App that utilizes a Rails controller, where all changes to the DOM are made through jQuery/Ajax. After rendering the TODOs on the page v ...

Adding a dynamic row to ag-grid with customizable columns on the fly

My goal is to dynamically add a new row when a button is clicked in the ag-grid on my ReactJS page. The code below works for me when I know the fixed number of columns at design-time. let row ={ products1: "a", products2: "b", products ...

Ajax transmits an array of data to the server

My table contains dynamic data with input fields for each item. I need to send the input field values along with the item's ID to the backend. Encountered Issue When making an AJAX request, the data sent as an array is not coming out as expected. Cod ...

relocate items originally placed at the starting point to move in the direction specified by a vector

Explore the code snippet on this JSFiddle link Is there a way to reposition objects that originate at the center point and make them align with a specific vector direction? In my demonstration, I have a sphere containing evenly spaced sprites. Additional ...

The function window.close() does not close the pop-up window when called within the pop-up

I am facing an issue with a Customer Info form that contains an anchor tag "close" meant to close the current window. This customer form is displayed as a pop-up. Within this form, there is also a search button that triggers a pop-up for the search form co ...

When using jQuery with checkboxes, I'm unable to detect any changes being made

I am currently working with an ASP item repeater that contains several checkboxes: <asp:Repeater ID="rpPostes" runat="server" DataSource="<%# this.ItemsPostesBudgetaires %>"> Inside the repeater, there is a checkBox defined as follows: <a ...

Retrieve information from the MySQL database and display it in the second textbox as you type in the first

This is the interface we are working on. https://i.sstatic.net/Hkr9b.png The PHP file is named "fetching_book_title_for_barcode.php". <?php require_once('db.php'); $response=array(); $sql="select book_title from book where barcode_id LIKE ...

Issue with (click) event not being detected on most elements throughout Ionic 4 webpage

BACKGROUND: After working perfectly for some time, all the click events in my Ionic app suddenly stopped functioning. I have two floating action buttons that used to trigger a JS alert popup and open a modal window, but now they are unresponsive. The onl ...

What is the proper way to implement v-model with Vuex in <select> elements?

I included a <select> element in my design: <select v-model="amount" required> <option value="10">10</option> <option value="20">20</option> <option value="25">25</o ...

Double your audio experience with Webaudio by playing the sound twice

While working on WebAudio experimentation, I encountered an issue with loading a sound using the JavaScript code below. function playAudio(){ var audio = document.getElementById('music'); var audioContext = new webkitAudioContext(); ...

Error: The function authClient.request is not recognized in Node.js with googleapis

I am currently utilizing googleapis and google auth for managing events on Google Calendar. While I was able to successfully fetch the calendar event list, encountering an error when attempting to insert a new event. The error message being thrown is: Type ...

Attempting to retrieve dynamically generated input fields and cross-reference them with structured length .json data

In the process of developing code, I've implemented a for loop to dynamically generate HTML input fields based on the length of some data in a .json file. My goal is to use jQuery to compare the text entered in each input field with the corresponding ...

"Maximizing the slider with jCarousel: A guide to enhancing your carousel experience

I recently added jcarousel to my website and things are looking good so far. Take a peek at how my site is currently set up: check it out! What I'm aiming for now is a feature where if a user clicks on an image to enlarge, it will open in a new tab ...

Implementing an input field using JavaScript

I have multiple search forms, each containing an input field with the class "search_input". My goal is to add the following code on button click: <input type="submit" class="searchbtn" value="Search" /> next to each input <input type="text" cl ...

Implementing modifications to all HTML elements simultaneously

In my HTML document, there are around 80 small boxes arranged in a grid layout. Each box contains unique text but follows the same structure with three values: name, email, and mobile number. I need to switch the positions of the email and mobile number v ...

Using PHP, HTML, and JavaScript to generate a dropdown list from a database

I am looking to create a dynamic dropdown list populated from a database using JavaScript. My goal is to design a form where users can add multiple rows by clicking the "add more" button. The form will include both a text input field and a dropdown list. ...

What is the reason for sending a single file to the server?

A function called "import File" was developed to send multiple files to the server, but only one file is being received. Input: <input type="files" id="files" name="files" multiple onChange={ (e) => this.importFile(e.target.files) } ...