Does Three.js lighting adjust according to the bundler used?

Today, I decided to streamline my portfolio project by transitioning it from standard HTML to the Vite bundler for easier dependency management. I simply copied and pasted the existing code, making adjustments to the imports since I had been using relative imports previously. Everything seemed to work smoothly except for a strange issue with the lighting effects.

The display on the right shows how the project appears with Vite bundler, while the left exhibits the expected outcome with relative imports. Can anyone spot where I may have gone wrong?

Vite Code: Previous Code:

javascriptthree.js

Answer №1

There are two additional lights in your Vite code

let ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
let pointLight = new THREE.PointLight( 0xffffff, 2.0, 200, 2 )
scene.add(ambientLight, pointLight);

Naturally, it will appear brighter compared to your previous code.

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

Is there a way to turn off the "swipe to navigate back" feature in Microsoft Edge using JavaScript or jQuery?

Working on a website that features horizontal object rotation. For instance, starting with the front view of an object followed by side, back, other side, and then back to the front. In this case, there are 24 images of an object, each taken at a 15 degre ...

javascriptjqueryioscssmicrosoft-edge

Disable the full screen camera mode on iOS browsers while live streaming camera video

I recently completed a tutorial on capturing video streams from the front or rear camera of an iPhone using JavaScript. The tutorial can be found at this link. While testing the functionality on my desktop browser, everything worked perfectly. However, wh ...

javascripthtmliosmediadevices

"Encountering problems with location search function on Instagram API for retrieving posts

I've been working on integrating two APIs – Instagram and Google Maps. While I've managed to get everything functioning smoothly, there's an issue with displaying "up to 20 pictures" around a specific location. I'm unsure why this in ...

javascriptajaxapigoogle-mapsinstagram

Altering the href text within a script causes the text to disappear instead of updating

Function Triggered by Button Click: function LoadEnglishText() { document.getElementById("txt_whatwedo_learnmore2").innerHTML = "here."; } HTML Link to be Updated: <a id="txt_whatwedo_learnmore2" href="./pdf/Pricing_App_Dev_2019_Ger.pdf">hier ...

javascripthtml

The art of breathing life into UpdatePanels

Although I have experimented with the UpdatePanelAnimationExtender from the Ajax Control Toolkit, my main issue with it is that it does not wait for the animation to finish before loading new content. What I aspire to achieve is: Commence asynchronous r ...

asp.netjavascriptajax

Is there a way to rearrange the selectpicker selection based on the user's choice?

I'm in the process of setting up a selectpicker that allows users to choose multiple options from a dropdown list. The challenge is that the values extracted by my backend need to be in the order of user selection, rather than the original order of th ...

javascriptjquerydataframeflaskbootstrap-selectpicker

Ways to extract single JSON entities from a consolidated JSON structure

I am facing a challenge with parsing multiple JSON objects within a single large JSON object. Currently, the entire JSON object is being stored as one entity, but I need to parse and store them separately in MongoDB. Below is the code snippet I am using. ...

javascriptjsonnode.jsmongodbmongoose

Generate a responsive list with a pop-up feature under each item (using Vue.js)

Currently, I believe that Vue may not be necessary since most tasks can be done using JavaScript and CSS. I am attempting to design a list layout as follows: [A] [B] [C] [D] When an item is clicked, the information about that specific item should ...

javascripthtmlcssvue.js

Tips for displaying a loading spinner each time the material table is loading

Hey there, I'm currently working on an Angular project where I need to display a table using Material Table. To indicate that the table is loading, I've defined a variable called isLoading. Here's how it works: In my TypeScript file: @Com ...

javascripthtmlangular

Having trouble with input event listeners in JavaScript?

I've been attempting to trigger the keyup event using EventListener for an input tag, but it doesn't seem to be working and I'm unsure why. Here is the code I have: document.getElementById("ajax").addEventListener("keyup", function() { ...

javascriptjqueryhtmlinput

How can I pass the dynamically generated ID from PHP to AJAX/jQuery using an anchor tag?

I'm seeking help with jQuery and Ajax as I am new to it. My issue is that I have multiple 'edit' buttons in a table, one for each row's data. When I click on an edit button to modify the data, they all open at once instead of just the s ...

javascriptphpjqueryajax

What is the best method for dividing strings in javascript?

After invoking a JavaScript function, I received the following results: (1, 00), (2, 10), (3, 01), (4, 11) I am looking to store this data in an array or JSON format like this: [{id:1, number: 00},{id:2, number: 10},{id:3, number: 01},{id:4, number: 11} ...

javascriptarraysjson

Guide to preserving canvas state in React?

I am currently working on a drawing application that allows users to draw lines on a canvas. The functionality is such that the line starts drawing on the first click, continues as the mouse moves, and stops on the second click. However, each time a user ...

javascriptreactjstypescriptcanvasdraw

AngularJS text area not displaying HTML content

In my Ionic's App, I have a textarea that is used for creating or editing messages. However, I am encountering an issue where the textarea does not render HTML tags when trying to edit a message. I attempted solutions such as setting ng-bind-html and ...

javascriptangularjsionic-framework

Looking for assistance with transferring a JavaScript array to my PHP script

Is there an easier way to transfer a JavaScript array to a PHP file? I've seen examples of using AJAX for this task, but I'm wondering if there's a simpler method. Below is a snippet of the code I'm working with: <html> <hea ...

javascriptphphtml

Contrasting the uses of element(...) versus element(...).getWebElement() in Protractor

What is the advantage of using element(...).getWebElement() instead of element(...) when they both perform similarly? Why are there two different APIs for the same purpose? ...

javascriptseleniumselenium-webdriverprotractor

Prevent the ability to drag and drop within specific div elements

Having trouble disabling the sortable function when the ui ID is set to "comp". Can't figure out what's going wrong, hoping for some assistance here. $(".sort").sortable({ // start sortable connectWith: ".sort", receive: function ...

javascriptjquery

Tips for integrating Grails ${createLink} into your javascript code

Below is a JavaScript function that I have: function GetSelectedItem() { var e = document.getElementById("country"); var strSel = e.options[e.selectedIndex].value; alert(strSel); var url = "${createLink(controller:'country', act ...

javascriptgrails

Logging entire line syntax along with string output for debugging purposes

In my Vue.js application, there is a method that I have implemented. It goes like this: methods: { searchFunction(helper) { //helper.addFacetRefinement('deal', 'deal').search(); helper.addFacetRefinement('pri ...

javascriptvue.jsdebugging

Tips for creating CSS styles for a selected input field

I seem to be stuck in a situation where my screen looks similar to the screenshot provided. There are four input elements that I would like to have bordered just like in the image, complete with a circled tick mark. I've managed to create these four i ...

javascripthtmlcssreactjsmaterial-ui