Importing three textures using JavaScript

I'm currently utilizing three.js and have successfully created a scene with a floor and a car loaded as a json file. However, I am facing an issue where the car appears only in black color instead of displaying the textures from blender. Is there a way to directly export the model with textures from blender or add the textures afterwards?

Below is the code snippet I am using:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>three.js - pointerlock controls</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        // Remaining CSS styling properties...

    </style>
</head>
<body>
    <script src="../build/three.min.js"></script>
    <script src="js/controls/PointerLockControls.js"></script>

    <!-- JavaScript code block -->

</body>
</html>

In the section marked as //objects, I am attempting to load the car model. I have also tried adding example textures to it without success. It would be ideal if I could import the textures directly into blender along with the model.

Answer №1

Learn how to export files from blender: here

Import object with texture:

var loader = new THREE.JSONLoader();          

loader.load( "obj.js", function(geometry, materials) {
     var material = new THREE.MeshFaceMaterial(materials);
     mesh = new THREE.Mesh(geometry, materials);
     scene.add(mesh)
});

Apply texture separately:

var loader = new THREE.JSONLoader();          

loader.load( "obj.js", function(geometry) {

     var texture = THREE.ImageUtils.loadTexture(textureUrl);
     var material = new THREE.MeshLambertMaterial({map: texture});
     mesh = new THREE.Mesh(geometry, material);
     scene.add(mesh)
});

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

Showing information in Angular without using $scope

When working with Angular and angular UI-Router, my goal is to display content without relying on $scope. In my mainController, using directives like ng-repeat is no problem. However, I am struggling to access information from my postsController. Despite ...

Unable to access API due to CORS Policy issues in a Node.js application

I encountered a CORS policy error while attempting to link my React web application to my Node.js server due to different endpoints. To address this issue, I attempted to utilize CORS, a Node.js package that provides a Connect/Express middleware for enabl ...

AngularJS: Hide Row in NG-Grid Based on Condition

I am a beginner in angularJS and I have a requirement to hide a row in my ng-grid table if the value of a column is '0'. The grid consists of 4 columns: User Today This Week This Month I need to hide an entire row if the value in the 'Th ...

Maintaining the footer and bottom section of the webpage

I am facing an issue with the footer on my website . I want the footer to always stay at the bottom of the page, even when I dynamically inject HTML code using JavaScript. The footer displays correctly on the main page , but it does not work as intended on ...

Implementing dual language codes for a single locale in internationalization (i18n) efforts

I am currently using i18n to display translations in English and Japanese. The default language is set to English with the code en, but I have recently discovered that my website is not utilizing the correct ISO language code for Japanese, which should be ...

CustomTooltips in ChartJS allowing for an enhanced visual presentation of data

I am encountering an issue with my code where I am trying to incorporate images into custom tooltips. The goal is to dynamically generate PNG filenames based on the tooltip name or ID, but I am struggling to find unique values to assign as filenames for ea ...

Issue with Missing Faces in Exported Maya Model in THREE.js

After exporting some basic models as obj and converting them using the convert_obj_three.py script, I've noticed that some of the models have missing faces. Even though I've centered my objects, zeroed out transform data, and deleted all history ...

javascript containing the response message

I've created an Ajax function that retrieves a script from the server containing RSS feed information. I'm currently placing this response within a div using: $("#divId").html(responsetext); My goal is to execute the script included in the resp ...

How to use AJAX and jQuery .get() to fetch a particular element from an external document

Seeking a method using ajax and jQuery to load specific content from an external document based on a user's action of toggling a switch. The content to be loaded is determined by the name attribute of the toggle switch element. The process begins wit ...

Is there a way to automatically remove files from the "dist" directory when deleting the prototype from the "src" folder?

I am new to build systems and seeking assistance with the following question. Here is the structure of my boilerplate: /src (working folder) ___/templates(jade files) ___/scss ___/scripts /dist (compiled files) ___/css ___/js ___.html files In the te ...

Running a JavaScript animation within an Electron environment

My curiosity lies in developing man-machine interfaces using Electron. Currently, I am experimenting with a Star Trek life signs monitor demo. I came across this code that can be easily customized to create vertical and horizontal movements: http://jsfiddl ...

Dealing with side effects in react/redux: Best practices and tips

Trying to find the best way to integrate an async side-effects handler into my react/redux setup has been quite a challenge. In my react-router-driven application, all the main containers at root level are smoothly dispatching actions and receiving update ...

Open Zurb Foundation Reveal Modal from the bottom of the screen

Struggling to make the reveal modal open from the bottom of the window. Any assistance would be highly appreciated. I've been attempting to tweak the open function with the reveal js, as seen in the original code below. Thank you, P open : function ...

Utilizing Jquery Validation to Remove a Class Upon Form Validation Success

In my current registration process, I have a multipart form where each subsequent form is displayed when the next button is pressed without fading effects. Initially, the button appears faded. Here's a simplified version of how I handle the first form ...

There was a failure to establish a Redis connection to the server with the address 127.0.0.1 on port 6379

Currently, I am working with node.js using expressjs. My goal is to store an account in the session. To test this out, I decided to experiment with sessions by following the code provided on expressjs var RedisStore = require('connect-redis')(ex ...

What is the best way to retrieve the current page name in DNN and store it in a JavaScript

Having trouble capturing the current DNN page name and assigning it to a variable in javascript. Despite searching online, I haven't been able to find the right code for it. <script type="text/javascript"> var tabName = <% =TabName %>; &l ...

What is the best way to customize the style using a CSS class?

Is it possible to alter a specific style with a CSS class using jQuery or JavaScript? For example, if the HTML looks like this: <tab> <a class="anchor">a</a> </tab> And the CSS looks like this: a {border:1px} .anchor {color: ...

Retrieve the response text using native JavaScript

Dealing with the nature of asynchronous XMLHTTPRequest in JavaScript can be tricky. I faced a challenge where I needed to return the responseText value but found it impossible due to this nature. To overcome this, I came up with a workaround by calling a f ...

Determine the SVG arc connecting two given points

My situation involves having coordinates for points X and A, A',... as follows: X [x,y] (starting point) A [a,b], A'[a',b'], etc. (ending points) I also have information about angles XCA, XCA', etc. However, I am struggling t ...

Using jQuery, for every button click within a specific class, the content of a div stored in variables should be replaced based on the attribute value

I have a few buttons inside a div. The challenge is to display different content depending on the value attached to the "link" attribute after clicking. When a button is clicked, a function retrieves the value inside the "link" attribute and if it matches ...