Three.js - Display a model with material that can be visible without the need for a light source

I am currently utilizing Three.js, specifically version 71. My workflow involves creating models in Blender, exporting them as JSON files, and then using THREE.JSONLoader to incorporate these models into my scene as shown below: 

this.jsonLoader.load(pathToModelFile, function(geometry, materials) {
  //...
});

When loading the models, I have noticed that the materials list only contains THREE.MeshPhongMaterial at index 0. It appears that this material type necessitates a light source (e.g., THREE.SpotLight) in the scene for the model to be visible. Without a light source, the model appears black.

My goal is to load models without the requirement of a light source. To achieve this, I have the following questions, any of which, if answered, would solve my issue:

  1. Is there a specific flag or property in THREE.MeshPhongMaterial that can be adjusted to display the model without a light source?
  2. If the first option is not feasible, is there a way to utilize THREE.JSONLoader to apply a different material type that does not rely on a light source, such as THREE.MeshBasicMaterial?
  3. Is there a method to export models from Blender with the necessary settings already configured (if possible)?

It seems I am encountering a similar difficulty to what was mentioned in the following link, where the question was left unanswered: Switch lighting of THREE.MeshPhongMaterial on / off dynamically

javascriptthree.jsblender3d-model

Answer №1

1 I'm not sure, but I don't think so

2 Affirmative

const loader = new THREE.JSONLoader();
loader.load(model, addToScene);

function addToScene(geometry, materials) {
  let material = new THREE.MeshBasicMaterial(properties);

  let object = new THREE.Mesh(geometry, material);
  scene.add(object);
  console.log(object);
}

3 Definitely, in Blender you have the option to set a material type on the mesh before exporting, or you can adjust material properties in the exported file

EDIT: Another option is to manually edit the material in the exported Json File, as mentioned in the discussion below this answer.

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

Modify the value of a variable inside another {{variable}} (not sure what it's called)

I am looking to update the variable "prefs" to reflect either "easy, medium, or hard" options based on user interaction. For instance: THIS {{choice.prefs.title}} NEEDS TO BE UPDATED TO {{choice.easy.price}} or {{choice.medium.price}} or {{choice.hard. ...

javascriptjqueryangularjsionic-framework

Error: Attempting to access a property of an undefined object using method chaining

I encountered an error of property undefined with the code below. I'm not sure what's causing it. I checked by doing a console.log(navList) in the render and it does have a value. Even after adding if(!navList) return null, I still get the same e ...

javascriptreactjsecmascript-6

Error message: "Module not found" encountered while executing test case

I am a beginner in node and nightwatch and I have followed all the initial instructions from setting up node, npm, selenium standalone, starting the selenium driver. I also downloaded the chrome driver and placed it in the same directory. I created the con ...

javascriptnode.jsseleniumtestingnightwatch.js

Error message: The function r is not defined - Issue with Google Sign in on React app

I have successfully implemented Google Sign In for my react app during development, but I am facing an issue with it in the production environment. The npm module that I am using for Google authentication is available at https://www.npmjs.com/package/reac ...

javascriptreactjsgoogle-signin

Error: React unable to locate module './WebpackMissingModule'

Recently I started diving into React, and I'm encountering some difficulties trying to export components. Here is my current index.js file setup: import React from 'react'; import ReactDOM from 'react-dom'; import SearchBar from ...

javascriptreactjsreact-redux

Managing data in a database on Discord using JavaScript to automatically delete information once it has expired

Recently, I implemented a premium membership feature for my discord bot. However, I encountered an issue where the membership time starts counting down before the intended start time. To resolve this, I am looking to automatically delete the data from the ...

javascriptdiscord

Whenever I click on a button, I want to modify the background color of my react-modal

Having an array of images with clickable overlays and a modal that changes the background color based on the overlay name when clicked is the goal. However, passing this value as a prop proves challenging since the images are generated through a function a ...

javascriptreactjsaxiosstyled-componentsreact-modal

How to showcase a list from intricate JSON data using Angular

I recently came across this pre-existing JSON data that I am unable to change: {"tags": [ { "title": "news", "options": [ { "title": "important", }, { "title": "less important", ...

javascriptangularjsjsonhtml-listsangularjs-ng-repeat

Show concealed elements above everything else

I've encountered an issue with my custom dropdown list as it displaces other elements when it appears. I want it to overlay on top of everything else, similar to the default select behavior. Despite trying to set position: relative; and z-index:100;, ...

javascriptjqueryhtmlcss

Creating a paragraph from text inputs using React

I'm currently working on code that retrieves input from two textboxes - one for a string value and one for a number value. I want this data to be displayed in real-time within a paragraph without the need for a submit button. I've been struggling ...

javascriptreactjsreact-native

Nextjs google places autocomplete not providing accurate suggestions

I'm attempting to utilize Google autocomplete to retrieve the names of mosques specifically in the United Kingdom. However, the data I am receiving is global and not limited to mosques. Here is my code: import axios from "axios"; export def ...

javascriptgoogle-mapsnext.jsaxioscors

Substitute regular expressions with several occurrences by their respective capture groups

I am attempting to use JavaScript to extract only the link text from a string and remove the href tags. The expected behavior is as shown below: <a href='www.google.com'>google</a>, <a href='www.bing.com'>bing</a> ...

javascriptregex

What is the best way to obtain the texture coordinates for a fullscreen texture that was rendered in a previous pass?

In my webgl application using three.js, I perform two rendering passes (see contrived example here): renderer.render(depthScene, camera, depthTarget); renderer.render(scene, camera); The first pass renders to the target depthTarget, which I then want to ...

three.jswebgl

Retrieve the current URL upon page load

I'm currently attempting to parse the URL in document.ready() so I can retrieve the id of the current page and dynamically populate it with content from an AJAX call. However, I've encountered an issue where 'document.URL' seems to refe ...

javascriptjqueryajax

Visual Studio cannot find the reference for require, resulting in an error in Node.js

I'm currently working on developing a web application using Visual Studio, Node.js, and React.js var fs = require('fs'); var path = require('path'); var express = require('express'); Unfortunately, I encountered an erro ...

javascriptnode.jsvisual-studio

Incorrectly aligned highlighted labels are appearing on the Kendo chart category axis item labels

My current project involves using the kendo chart to generate charts, and I need specific labels to show up as bold text. To achieve this, I am utilizing the visual method which allows me to customize labels and render them with createVisual(). However, w ...

javascriptangularkendo-uikendo-chart

Discovering repeated arrays within an array

Given a nested array, what is the best approach to finding duplicates efficiently? var array = [ [ 11.31866455078125, 44.53836644772605 ], [ // <-- Here's the duplicate 11.31866455078125, 44.53836644772605 ...

javascriptarraysunderscore.jslodash

Typescript's forEach method allows for iterating through each element in

I am currently handling graphql data that is structured like this: "userRelations": [ { "relatedUser": { "id": 4, "firstName": "Jack", "lastName": "Miller" }, "type": "FRIEND" }, { "relatedUser": ...

javascriptreactjstypescriptreact-nativeforeach

What methods can I use to prevent caching of XMLHttpRequest requests without relying on jQuery?

I am currently working on a web application that refreshes a table every minute from an XML file. However, I have noticed that when I make edits to the content of the XML file, I see a "304 Not Modified" message in the script log when trying to retrieve th ...

phpjavascriptajaxcachingxmlhttprequest

How to switch the code from using $.ajax() to employing $.getJSON in your script

How can I convert this code from using AJAX to JSON for better efficiency? AJAX $('#movie-list').on('click', '.see-detail', function() { $.ajax({ url: 'http://omdbapi.com', dataType: 'json', d ...

javascriptjqueryjsonajax