Deactivate lighting in Three.js

I am facing a challenge in three.js where I need to disable lighting completely to render a 3D object. Currently, the object appears black due to some form of active lighting even though I do not have any lighting calls in my program. Despite searching for a solution, I have been unable to find one.

Edit: Code

var white = 0xFFFFFF;

var facemat = new THREE.MeshBasicMaterial( { color: white, opacity: 1.0, shading: THREE.FlatShading } );

vrmlLoader.addEventListener('load', function ( event ) {
    var object = event.content;
    object.material = facemat;
    scene.add(object);
});

vrmlLoader.load("ship.wrl");

Most of my questions regarding this issue have been resolved through this post. Any further inquiries may veer off topic.

javascriptthree.jslighting

Answer №1

Creating depth and dimension in a drawing can be achieved through shading and lighting techniques. In the case of your example image, the lack of shading results in a flat appearance with no distinguishable parts.

It's important to understand that color plays a vital role in bringing a drawing to life, much like how pencils are essential for sketching on paper. The object you're currently seeing is rendered in black, but for more clarity, it should be presented in white. However, changing the object to white may make it invisible against a white background.

To address this issue, here is a step-by-step guide:

  1. Set the renderer background color to white:

    renderer.setClearColor(0, 1)

  2. Adjust the object's material to change its color: 

    object.material = new THREE.MeshBasicMaterial(0xFFFFFF)

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

Assigning values to props in a Vue component

I created a Vue component that is supposed to receive the "uploadedFile" prop, but it's not functioning properly. I am only getting the correct information in the $attrs: https://i.sstatic.net/crXmH.png Here is my component: Vue.component('t ...

javascriptvue.jsvue-component

What is the process for uploading files with just node.js?

My dilemma involves a webpage featuring a form with a file input field. Upon submitting the form, I wish for the server to write the file on the server side. Despite numerous attempts to upload various test images using this form, each results in a plain ...

javascriptnode.js

Rails: Utilizing AJAX to dynamically populate Bootstrap dropdown menus

In the setup I have, there is a dropdown responsible for displaying notifications. <li class="notifications dropdown"> <a class="dropdown-toggle" id="dLabel" role="button" data-remote="true" data-toggle="dropdown" data-target="#" href="/notifi ...

javascriptruby-on-railsajaxruby-on-rails-3twitter-bootstrap

Unable to input characters consecutively into the text field because it is being displayed as a distinct function within the component

When attempting to bind a text field using the approach below, I encounter an issue where entering characters in the text field causes the control/focus to shift out of the field after the first character is entered. I then have to click back into the text ...

javascriptreactjsmaterial-uitextfieldonchange

Tips for subscribing to an Angular Unit Test:

In the process of writing test cases for a component, I first tackled a basic test case to ensure smooth functionality. Initially, I faced Dependency Injection errors and managed to resolve them. The current challenge I am encountering involves mocking API ...

javascriptangularunit-testingjasminekarma-jasmine

CSS3 Perspective Issue: Solutions for Fixing

I'm currently working on creating a card flip animation that flips in the X axis direction. Right now, the div rotates using the rotateX() method. I attempted to add the perspective property to the upper div, but it ended up distorting my div structur ...

javascripthtmlangularjscss

Managing session variables in JavaScript, PHP, and Ajax for efficient data storage

Hello everyone, I have a question as a programming newbie. I am just getting started with programming so please bear with me. I am attempting to send multiple session variables using JavaScript in order to use them later in my PHP code at different points ...

phpjavascriptajaxsession-variables

MySQL field being updated upon page unload

I'm currently developing a Content Management System (CMS) that allows users to access and organize records within a MySQL database. One of the features I have implemented is a user login system for the CMS. As part of this project, I am working on in ...

javascriptphpmysqlajaxonbeforeunload

Using various iterations of the identical dependency in a React project

Let's say we have a react application called A, which renders a component called B. The two of them are using an npm dependency with version 1.0. Now, the need arises to upgrade the version of this dependency in B to 1.1. Since the updated version has ...

javascriptnode.jsreactjsnpmnpm-install

Retrieve the array element that contains a date range matching the current time using JavaScript

I've been searching on Stack for an answer to my question, but I haven't found a solution yet. My issue is that I need to display only the object in my array where the current time falls within the specified date range defined by timeStart and ti ...

javascriptarraysdate

Utilizing ng-if in AngularJS for displaying JSON data

After generating Json Data from a PHP API, I attempted to formulate a MYSQL Query and PHP Script to achieve my desired outcome. However, the process has become overly complex. $data1 = [ { "IDa": "6", "IDusr": "1", ...

javascriptjsonangularjs

Authenticate the refresh token and access token by utilizing JWT

I find myself in a unique situation where I do not currently possess any database. However, I have created a simple server.js file through which I send my requests (by running server.js using node server.js). My goal is to add user-login functionality to m ...

javascriptnode.jsjsonserverbackend

Using data variables as arguments in the style section of Vue2

Suppose we have a data variable and I want to utilize this data variable for styling purposes. data() { return{ selected:{ index: 2 } } } <style> .parent-table >>> .table-row:nth-child(/* here I intend to use ...

javascriptjquerycssvuejs2vuetify.js

Steps for triggering a function when the 'Enter' key is pressed in a TextInput in a React Native application

I'm currently working on creating a Search Bar feature. I would like the user to input text into the TextInput field, and when they press 'Enter', I want it to trigger my function. <TextInput //when the user presses Enter, call the functi ...

javascriptnode.jsreact-nativereact-native-ios

The PHP script is saving unpredictable data in the database

I've been struggling to figure out why my added fields aren't being stored properly in the database. After extensive investigation, I've determined that jQuery is not adding HTML fields correctly, which is preventing them from being submitte ...

javascriptphpjqueryhtmlforms

Utilize Vue to call a method by providing its name as a string

When designing a navbar, I encountered the need to include a list of buttons. Some of these buttons should act as links, while others should call specific methods. For example, clicking on "Home" should direct the user to /home and clicking on "Log out" sh ...

javascriptvue.js

Utilizing raycasting to target specific components within a glTF model and incorporate event listeners

I'm in the process of creating an interactive web application. Recently, I successfully imported a glb file into my scene. Now, I'm looking to incorporate two key functionalities: onMouseover: When hovering over one of the elements within the o ...

javascriptthree.js

Display a div in JQuery along with all of its associated label elements

Here is my HTML code: <div id="summarySpan" style="padding-left: 20px" hidden> <label id="currentStatusSummary" style="padding-left: 20px" /> <br /> <label id="currentMonitoringSummary" style="padding-left: 20px" /> < ...

javascriptjquery

Uncovering a hidden div tag in Listview ASP.NET with the power of Javascript

</p> <pre><code><ItemTemplate> <tr bgcolor="#efefef"> <td width="10%"> <asp:LinkButton ID="btnShowRoles" runat="server"> ...

javascriptasp.net

Can videos be loaded in the front end through JavaScript when dragged and dropped?

I'm working on a project to create a web application that allows users to drag and drop a video file into the browser for processing using TensorFlow.js to make predictions. So far, I've accomplished the following: Loading the video file and p ...

javascriptp5.jstensorflow.js