Feeling perplexed about how to manipulate lighting in Three.js

Despite trying numerous methods, nothing seems to be working. Upon examining the lighting documentation, I am unable to get it to function properly. It's quite puzzling how my object is visible even without any lights being added. This might be the root cause of the issue, although I can't say for certain. At least I was able to establish a simple scene with basic geometry.

I am aiming for a dimly lit scene with a spotlight shining on the sphere.

http://jsfiddle.net/3dnx7L3m/4/

Even after adding a spotlight, there doesn't seem to be any actual light emitted. Perhaps I need to set up ambient lighting before introducing the spotlights.

var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add(light);

How do you darken the canvas and incorporate proper lighting as described in the documentation?

Answer №1

MeshBasicMaterial may not be the best option for your situation as it does not consider lighting effects. Consider switching to MeshLambertMaterial or MeshPhongMaterial:

http://jsfiddle.net/5gcj8mKu/9/

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

Can the PDF preview screen be bypassed when printing with window.print() in JavaScript or jQuery?

I have implemented an iframe that is loading a PDF file. <iframe src='some pdf url' id='print-pdf' style="border:0;display: none;"></iframe> To print the PDF directly, I am using the following code: let print ...

Error sound produced when detecting KeyCode on the keyboard

I'm currently working on a JavaScript project that involves capturing keyboard input. However, I'm encountering an issue where every time the user presses a key, it triggers an error sound. Is there a way to disable this sound? ...

JavaScript for Each Method Implementation

While reading a tutorial, I came across a code snippet for a forEach function that all made sense except for the part where it checks if i is in the array: if (i in this) { I'm confused as to why this check is necessary since we already have a s ...

Grails 3.1.9 does not support displaying JavaScript

Having trouble getting the datepicker to display using JavaScript <script> $( "#invoiceDate" ).datepicker({ inline: true, dateFormat: "yy-mm-dd", onSelect: function(datetext){ datetext = datetext+" 00:00:00.0" ...

The error "Unable to create an instance of mssql.Schema" indicates that the

Seeking assistance from experienced ReactJS developers to address the issue outlined below. The code provided is based on a tutorial I was following. Despite numerous attempts, I have been unable to resolve the issue. Here is the code snippet from User.js ...

Abbreviating AngularJS with JavaScript

While Angular offers the ng shortcut for directives in markup, I am curious about how to implement this in JavaScript code. For example, instead of writing angular.isArray, is it possible to use ng.isArray similar to jQuery ($) or Underscore (_)? ...

Is it not possible to unselect the radio button?

I've been trying to implement a jQuery solution that allows radio buttons to be deselected, but I'm encountering difficulties with the prop function. Every time this code is executed, my condition ($(e.currentTarget).prop('checked')) al ...

Retrieving text content from a file using React

I've been experiencing difficulties with my fetch function and its usage. Although I can retrieve data from the data state, it is returning a full string instead of an array that I can map. After spending a few hours tinkering with it, I just can&apos ...

Tips for avoiding the freezing of bootstrap-select scroll when a large number of options are present

I have integrated a bootstrap-select with a total of 1000 options. However, I am encountering an issue where when I attempt to scroll down the list of options, it only goes down approximately 60 options and then freezes in that position. Can anyone provi ...

Using the active class feature in React Router

Hey there! I've been working with react router v6 and using NavLink to move between components. I've been trying to figure out how to add a custom active class in NavLink, but the method I tried isn't working. Here is what I attempted: <N ...

The error message states: "An uncaught TypeError has occurred - the object does not possess the 'jqzoom' method."

I am encountering a browser console error while working on a project involving a magento website. Specifically, I need to implement the jqzoom feature on the product view page. Here's what I have done so far: Added jQuery Included the jqzoom librar ...

Receiving the term "extend" after triggering the button click event while iterating through a for-in loop

I'm facing a challenge with my JSON structure: people = [{"id":"0001","title":"Mr","name_first":"Bob","name_last":"Edwards","address1":"2 ford road","address2":null,"address3":null,"town":"Bedford","county":"Bedfordshire","postcode":"Mk16hd","telepho ...

To grab a specific CSS attribute from a stylesheet using JavaScript

I am looking for a way to extract the value from a CSS file using a JavaScript function. Take a look at my code snippet below: HTML file -> <link rel="stylesheet" type="text/css" href="test_css.css" /> <script type="text/javascript ...

ajax method to update mysql database without page refresh is not functioning

Trying to add data to a MySQL database table without refreshing the page. I have written a script to send the data to a PHP page that contains the query. However, upon clicking the submit button, the success function executes and clears the input fields bu ...

JavaScript function: Reduce array if total string length exceeds specified value using a loop

I am currently working on a function to shorten a text if it exceeds a certain length. For example, calling shorten_text_easy(text, 30) should output "We believe. In the future". The initial loop is functioning correctly and showing the total l ...

The rotation of the camera in three.js around the Y Axis appears to be improper

Our project involves developing a VR/Stereoscopic web application using three.js to showcase the camera's viewing angle. For instance, we have set up a "room" scenario with the camera positioned in the center. The camera's rotation is linked to ...

Guide on validating React input fields using custom validation methods

Currently, I am working with React and dynamically creating new input fields while utilizing React-hook-form for validation purposes. My approach involves: Having a dropdown with numbers as options, such as 1, 2, 3, 4 Generating input fields based on the ...

Enhancing User Experience with Load Indicator during State Changes in React Native

I'm facing an issue where the page for displaying a single item is loading slowly - I need to delay the page from loading until the object has changed. After checking the navigation params through console log, I can see that the id changes when each b ...

Serialization of forms consistently yields an empty string

In my view, I have a dropdown menu that triggers the insertion of a partial view into a designated div when an option is selected. The following code snippet demonstrates what the view looks like: <div class="container"> <div class="row"> ...

Is there a way to streamline a function that substitutes certain words?

Looking for ways to simplify my function that shortens words when the label wraps due to different screen resolutions. It seems like it could be more efficient to use arrays for long and short word pairs, but I'm not sure how to implement it. Check ou ...