The Three.JS Library Offers Dark and Mysterious Textures

I am facing an issue with a model that I created in Blender 2.76b and exported to json for use with three.js 71. When viewed in Blender, the model looks fine. However, when displayed in webGL, the model appears completely black. I suspect that it might have something to do with the textures, but I am not entirely sure. This particular model is complex, created in Maya and exported as an fbx file. I have tested simpler models with different textures and did not encounter any problems, but there seems to be an issue with this specific one.

Any suggestions or insights would be greatly appreciated.

Here is the link to the json file:

Below is the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>MultiLoader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #000;
            color: #000;
            margin: 0px;
            overflow: hidden;
        }
        
        #info {
            text-align: center;
            padding: 10px;
            z-index: 10;
            width: 100%;
            position: absolute;
        }
        
        a {
            text-decoration: underline;
            cursor: pointer;
        }
        
        #stats { position: absolute; top:0; left: 0 }
        #stats #fps { background: transparent !important }
        #stats #fps #fpsText { color: #aaa !important }
        #stats #fps #fpsGraph { display: none }
    </style>
</head>

<body>
    <div id="info">MultiLoader Testing</div>;
    
    <script src="build/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/Detector.js"></script>
    <script src="js/libs/stats.min.js"></script>
    <script src="js/ColladaLoader.js"></script>
    <script src="js/OBJLoader.js"></script>
    
    <script>
        // JavaScript code will go here
    </script>
</body>
</html>

Answer №1

There seems to be a few issues with the code and model that need addressing.

Regarding the model: The designation mapLight should have actually been labeled as mapDiffuse. Make sure to adjust this while exporting the model for accuracy.

Concerning the code:

  1. The ambient light setting appears to be too intense, resulting in a washed-out effect. Consider using a value of 0x222222 or removing it entirely from the scene.
  2. It is unnecessary to add the camera to the scene.
  3. Try omitting
    renderer.setClearColor( fog_color )
    temporarily to ensure the correct rendering of meshes and materials before implementing scene effects.
  4. The texture size seems excessively large for WebGL support. Try starting with a size of 1024 and adjusting as needed.
  5. Ensure that loader.onLoadComplete() is called within the loader.load() callback function for proper execution.

By addressing these issues, you should be able to successfully visualize your model.

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

What is the best way to inject child nodes into parent nodes without causing the view to shift to the location where the element is being

While I am rendering elements and appending them to a parent div, my screen keeps jumping to the bottom-most element as it loads instead of maintaining the current view. Ideally, it should start at the top of the screen and remain there without any sudden ...

What is the best way to encapsulate all request handlers within a wrapper function in an Express application?

While working on my express application, I came across the idea of creating a wrapper function to handle async request handler functions in a more efficient way. Instead of having a try-catch block for each handler, I wanted to streamline the process by cr ...

Is there a way to link a Twitter handle with Angular UI Router?

Can anyone help me with finding the correct regex to match a path like '/@someusername' with angular ui router? I've been struggling to figure it out. Currently, my routes look like this $stateProvider .state('home', {url:'/ ...

Using MongoDB Object as middleware in Express applications

I’m facing issues trying to access the "DB" database object that gets created when the MongoDB client module establishes a connection with my MongoDB database. Currently, I am encountering an error indicating that in data.js, 'db' is not defin ...

What is the best way to retrieve the response from a POST request in Angular JS?

I am currently utilizing node, express, mongoose for the backend and angular js for the front-end. I have a form through which I am sending a post request. <div class="alert alert-success" ng-show="success"> {{success}} </div> <div class ...

Is it necessary to include a request in the API route handler in Next.js when passing parameters?

In my API route handler, I have a function for handling GET requests: import { NextRequest, NextResponse } from "next/server"; export async function GET(req: NextRequest, { params }: { params: { id: string } }) { const { id } = params; try { ...

How to dynamically insert a key into an array by locating a specific value in AngularJS

I need help adding a new key to a JSON array by searching for a specific key value. For example JSON:- [ { "$id": "2025", "ID": 41, "Name": "APPLE" }, { "$id": "2026", "ID": 45, "Name": "MANGO" }, { "$id": "2027", ...

React JS issue with SVG linearGradient not displaying accurate values

Within my component, I am working with SVG paths and a linearGradient value passed down from the parent component through static data. The properties 'startColor' and 'stopColor' are used to define the gradient colors for each element. ...

When the page is scrolled, the div is fixed in place and a class is dynamically added. Some issues may

Greetings everyone, I have a webpage with two floating divs - one is about 360px wide and the other has an auto width. As the page scrolls, the left div is assigned a class that fixes it to the screen, allowing the other div to scroll. This functionality w ...

Utilizing Node.js to match arrays

let items = ["Product",["car","Bike"]]; let result = items[1].map((item) => [items[0], item]); console.log(result); My current output is: [["Product" , "car"], ["Product" , "bike"]], The above code works for this simple output, but I'm unsure ho ...

Once a WordPress user includes a php file

For the past three days, I've been grappling with this issue... calling on all experts for assistance! I manage four distinct Wordpress membership sites, each with its own branding. My goal is simple - to have a .wav file play the plan's name wh ...

jquery button returned to its default state

Jquery Form Field Generator |S.No|Name|Button1|Button2| When the first button is clicked, the S.No label and name label should become editable like a textbox. It works perfectly, but if I click the second button, the field becomes editable as expected, ...

The functionality of the tree-view feature in NodeJs is experiencing glitches

My attempt at creating a Tree-view has hit a snag. The collapse icon is not being displayed as expected. Here is the code snippet I tried: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootst ...

Error: Unable to extract tags from the JSON data as it may be null and cannot be mapped

Within my database, I have a collection of records where not all of them are tagged, some may be empty, and they are stored in CosmosDb and retrieved as a Json array. For displaying the data, I am utilizing antd table and tags: https://ant.design/componen ...

Having problems with jQuery's document.on hover toggle method?

Recently, I've been trying to implement a jQuery function that toggles an image when hovering over an element and toggles it back when exiting the element. However, I encountered a problem when using the $(document).on selector. I attempted to use $(d ...

Secure User Authentication using HTML and JavaScript Box

In the given code, I am attempting to implement a functionality where a message is displayed next to the select box if it does not have a value of male or female. This message should not be shown if one of these values is selected. However, this feature ...

Ways to prompt the user to upload a file and integrate it into my program

Hello everyone, I need some help figuring out how to replace a JSON file with another JSON file that a user uploads. Here is my JavaScript code: var app = angular.module('miApp', []); app.controller('mainController', function ($scope ...

Internal server error encountered while making an AJAX call using AngularJS routing

I'm currently diving into AngularJS with a basic application focused on customers and their orders. The issue I'm encountering involves a table that showcases the list of customers along with a link to access their respective orders. However, upo ...

When scrolling, the text or logo inside the navbar seems to dance with a slight wiggling or

I recently implemented a code to create a logo animation inside my navigation bar that expands and contracts as I scroll, inspired by the functionality of the Wall Street Journal website. However, this implementation has caused some unintended side effects ...

"Troubleshooting Nextjs in a Production Environment: Tips for Resolving Local Debugging Issues When

Everything is working flawlessly in my nextjs development setup. The build process goes smoothly without any issues. However, when attempting to serve the production locally, an error pops up saying: "Error: Element type is invalid: expected a string (for ...