Exploring ThreeJs with HSL Color Palettes

Struggling with using HSL colors in ThreeJs. Check out my code:

var exampleColor = new THREE.Color( 0xffffff );
exampleColor.setHSL( getHSLColour(exampleObject) );
var exampleMaterial = new THREE.MeshLambertMaterial ( {color: exampleColor} );

The result of getHSLColour looks like this:

0.06721230158730158, 0.9913555194805196, 0.658271103896104

It appears to match the desired format for ThreeJs. However, when I log exampleColor to the console, it displays as an RGB color with NaN values:

T…E.Color {r: NaN, g: NaN, b: NaN}

What am I missing?

javascriptcolorsthree.jshsl

Answer №1

setHSL requires three separate inputs, not an array:

var hslValues = fetchHSL(exampleItem);
desiredColor.setHSL( hslValues[0], hslValues[1], hslValues[2] );

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

Ways to trigger the onclick event from different controls

I have a videojs player and a button on my html page. The videojs player supports the functionality to pause/play the video when clicked. I want to trigger this event by clicking on my button. How can I achieve this? Here is the code that I tried, but it ...

javascripthtml

Angular 6 - Using properties in classes

Considering a component structured as follows: import { Component, OnInit, ViewChild } from '@angular/core'; @Component({ selector: '...', templateUrl: './...html', styleUrls: ['./...scss'] }) export class Te ...

javascriptangulartypescriptscopethis

Styling of global checkbox focus in Material UI (applied globally, not locally)

Currently experimenting with customizing the styling of a checkbox when it is in focus globally using Material-UI (react). At present, only default and hover styles are taking effect: MuiCheckbox: { colorSecondary: { color: 'green', & ...

javascriptreactjsmaterial-ui

Traversing a JavaScript array with multiple dimensions containing markers created with Google Maps APIs

I have a single array where I store all of the Google Maps marker objects. Currently, I am working on creating a function to remove all markers from the map that are in the array, but I'm facing issues with the loop. First, I add each marker to the a ...

javascriptjqueryloopsgoogle-maps-api-3each

Tips for effectively utilizing the display: inline property in conjunction with ng-repeat

I am struggling to create a timeline with a broken structure on my website. I suspect that the issue lies in using display:inline. When attempting to apply this to my site: https://i.stack.imgur.com/4Ur7k.png the layout gets distorted: https://i.stack.i ...

javascriptcssangularjshtml

Modify the placeholder color for a disabled Input element to match the overall Mui theme design

I am struggling to change the color of the placeholder text in a disabled input field within my app's theme. Despite attempting to target the MuiFormControl, MuiInputBase, and MuiInput components in my theme.tsx file on CodeSandbox, I have not been su ...

javascripthtmlcssmaterial-uiplaceholder

Send an Ajax request to the controller and retrieve a file to display in an iframe

I need to display the contents of a byte[] array in an Iframe and provide the option for the user to download the file in PDF format. My view has a button connected to an ajax call that sends the byte[] to my actionresult, which returns a FileContentResul ...

javascriptc#jqueryajaxiframe

Using forEach Loop with Promise.all in Node.js

I am seeking a solution for a task where I need to read a directory, copy its contents, and create a new file within that same directory. function createFiles(countryCode) { fs.readdir('./app/data', (err, directories) => { if (err) { ...

javascriptnode.jspromisees6-promise

Transferring data from JavaScript to an HTML page

I'm currently developing a rock, paper, scissors game using HTML and JS. Here is the link to the complete code (CSS, JS, HTML): http://jsfiddle.net/fJw4R/. You can also view the game with images here: The functionality of the .math-module is working ...

javascripthtmlcss

Submitting form data via Ajax without refreshing the page

I am trying to submit my form using Ajax without refreshing the page. However, it seems that the $_POST values are not being picked up. I don't receive any errors, but I suspect that my form is not submitting correctly. HTML Form <form action="" ...

javascriptphpjqueryajaxforms

The Mongoose Error occurred due to a timeout in buffering that lasted for 10,000 milliseconds

I am attempting to establish a connection to Mongodb using the Thunder client extension in Vs code. Here is the code snippet I have implemented so far, but unfortunately, I am encountering an error that causes the application to crash. const mongoose = re ...

javascriptmongodbexpressmongoosenodemon

Can one button be clicked to trigger the activation of another button through a click?

Just as the title suggests, I am wondering how to make this happen? Any guidance would be greatly appreciated! $('.notVisible').click (function(){ alert("I'm the invisible button") }); $('.visible').click (function(){ al ...

javascriptjquery

The string that matches the duration of hour, minute, and second (HMS)

There is a need to extract the digits before h, m, and s into their own groups. The objective is to capture all three groups if possible, but if one or two groups are missing, then the last group(s) should be captured. Currently, the regex /(\d+)(?=h ...

javascriptregex

Tips for adding an array to an array of objects with AngularJs

I'm facing an issue with the array structure in my code. Here's what I currently have: $scope.arrayList=[{FirstName:"",LastName:""}]; $scope.Address=[{address:"",PhoneNumber:""}]; What I want to achieve is to push the $scope.Address array into ...

javascriptarraysangularjsarraylist

extracting URL parameters using AJAX

I have successfully created an AJAX request using the GET method, passing variables to the URL and receiving a response. Now, I need to retrieve the current URL variables by clicking on a newly created button in order to proceed with further processing. Th ...

javascriptajaxurlget

When useEffects are linked in such a way that the first one updates a dependency of the second, it can lead to

Modified code block with console logs integrated from approved solution. I have stripped down a search bar component to its simplest form: import React, { useEffect, useRef, useState } from "react"; import axios from "axios"; const re ...

javascriptreactjsdomasync-awaitreact-hooks

How can you set an input field to be initially read-only and then allow editing upon clicking a button using Vue.js?

//I have two divs that need to be set as readonly initially. When an edit button is clicked, I want to remove the readonly attribute and make them editable. <div> <input type="text" placeholder="<a href="/cdn-cgi/l/email-protection ...

javascripthtmlvue.jsreadonlyinput-field

"Troubleshooting Why AJAX Update for CGridView is Not Functioning

I've encountered an issue with my CGridView grid where I receive an error every time I try to update it. Despite spending a lot of time trying to resolve this, I still haven't been able to figure out what's missing. Here's the code sni ...

javascriptjqueryajaxyiicgridview

What could be causing the JSF ajax status success to fail in Chrome?

Whenever I trigger an action in my ManagedBean, I also initiate a JavaScript function via JSF ajax to display a loading popup while the action is being processed. This functionality works flawlessly in Firefox, however, it seems to encounter issues in Chro ...

javascriptjqueryajaxgoogle-chromejsf

Difficulties encountered when initiating CRA using npm start

Hi everyone! I'm dealing with a frustrating issue; every time I try to run npm start I keep encountering the error message below: events.js:288 throw er; // Unhandled 'error' event ^ Error: spawn cmd ENOENT To resolve this probl ...

javascriptreactjsnpmfrontend