Modifying the color of an SVG in real-time and using it as a texture in Three.js

I have been attempting to develop a configurator using three.js, but I am currently stuck at the stage where I need to dynamically change the color of the product. My initial idea was to use an SVG as a texture, modify the fill property of the SVG, and easily update the texture. However, I am not achieving satisfactory results.

My current setup includes:

- A 3D model with an SVG applied as a texture using a TextureLoader. The SVG is located in an external file ("images/texture.svg"). Additionally, I have noticed that three.js is reducing the size of the texture, which I believe could be a mapping issue.

- The SVG is divided into layers so that I can manually adjust the color and apply it.

However, my goal is to make this process dynamic - allowing users to choose a color and have it automatically update the SVG applied as a texture.

Any suggestions or ideas would be greatly appreciated!

Thank you!

javascriptsvgthree.js

Answer №1

I decided to showcase a solution by forking someone else's fiddle. With the addition of a click function, the SVG is modified and the material on the model is redrawn.

Check out the modified fiddle here: http://jsfiddle.net/L4pepnj7/

You can change the color of the circle in the SVG by clicking anywhere on the example.

The process of converting the SVG to an encodedURI is too resource-intensive to be in a constant loop. However, you can trigger the color change in a click event while the renderer continues its operations. I introduced a new function called "clickBody" to the existing fiddle that alters the color of one of the SVG elements.

/* The rest of the code remains unchanged from the original snippet */

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

Updating the value of the chosen drop down option upon selection

I currently have a Material UI dropdown menu implemented in my project. My goal is to use the selected option from the drop down menu for future search functionality. How can I utilize onChange() to store the selected option effectively? At the moment, I ...

javascriptreactjstypescriptdrop-down-menumaterial-ui

Why is it that one function does not hold off on execution until Promise.all() is resolved in another function?

I am currently working on a form that allows users to upload files seamlessly. <form @submit.prevent="sendForm" enctype="multipart/form-data"> <input multiple ref="PostFiles" name="PostFiles" type="file" @change="selectFile('add')"> ...

javascriptnode.jsvue.jspromiseasync-await

Troubleshooting a 404 error for an existing object: What to do?

I encounter a 404 'Not Found' error when attempting to edit a mark through my form. I am puzzled by the source of this error because in order to access this form, I require the brand ID (which can be found in the URL). Upon accessing my modifica ...

javascriptreactjsexpressaxios

Invoke a codebehind function using jQuery

I am encountering an issue while trying to complete a simple task. I am attempting to pass values to a code behind method, perform some calculations, and then return the result. Initially, I started with a test method but have not been successful in making ...

c#javascriptjqueryasp.netajax

jQuery and CSS3 for importing and customizing text files

I successfully customized the file input utilizing jQuery and CSS3. However, there is one aspect I couldn't quite figure out. After the user selects an image or file, I want to display the selected file's text at the very bottom of the text like ...

javascriptjqueryhtmlcss

Attempting to access an HTTP Node server from within an HTTPS environment resulted in an SSL error

I am faced with the challenge of connecting to a socket.io from a React client within a Node server. Both the React client and the location of the Node server (a microservice housed in a separate Docker container alongside a Java container) are operating o ...

javascriptnode.jsdockersslhttps

Switch Between More and Less Text - Implement Smooth Transition on Shopify Using Javascript

I recently implemented a More/Less toggle button using resources from this website. The functionality is there, but I now want to add a smooth transition effect. When the user clicks on "read more," I would like the hidden content to gradually appear, and ...

javascripthtmljqueryshopify

Issues with Ajax functionality in Rails

I believe my lack of knowledge in Ajax might be the reason for this issue. My goal is to continuously make ajax calls to my server as I am creating a demo app for learning purposes. Below is the code snippet: Code from job_status/index.html.erb file &l ...

javascriptjqueryruby-on-railsajax

Implement a cron job in Node.js to automatically trigger an Express route on a weekly basis

I need to run tests on a certain page every week by creating a cron job that will access my express route at regular intervals. Currently, I have set up a cron job to run every 2 minutes as a test: //schedule job every 2 minutes schedule.scheduleJob("* /2 ...

javascriptnode.jsexpresscron

load a particular section of another website into my own div

Similar Question: Ways to bypass the same-origin policy I've been looking for a way to load a specific div from another website using this code. Can anyone provide an example of how to do this on jsfiddle? $.ajax({ url: 'http://somethin ...

javascriptjqueryjsfiddle

CSS/JS Label Positioner using Mootools, perhaps?

I have been tasked with incorporating a form into our website. It seems simple at first, but this particular form has some interesting JavaScript code in place to ensure that the label for each input field sits inside it. This is a clever feature, but unfo ...

javascripthtmlcssmootools

Using Bootstrap's nav-pills inside a table

Is there a way to incorporate Bootstrap Nav Pills into a table, with the "tab buttons" located in the last row of the table? I've attempted it but it doesn't seem to be functioning correctly. Check out this link for reference <table clas ...

javascriptcsstwitter-bootstrapbootstrap-4

Bypass ajax request with the use of a returned promise

I've come across a scenario where I have a function within a class that is designed to return a promise for deleting an item. Here's what the function looks like: function Delete(){ // if(this.id == ""){ // return ?; // } ...

javascriptjquery

summoning the iframe from a separate window

In my current setup, I have a link that passes a source to an iframe: <a href='new.mp4' target='showVideo'></a> <iframe src='sample.jpg' name='showVideo' ></iframe> However, what I would lik ...

javascriptphphtmliframe

Determining if a user is already logged in from a different device using express-session

After a user logs in, I assign the username to their session with the code: req.session.username = "...."; This identifies the session with a username, but now I need to figure out how to detect if this same username is already logged in from another dev ...

javascriptnode.jsexpressexpress-session

How to read a text file in JavaScript line by line

Coding Challenge: <script src="../scripts/jquery-3.1.0.min.js"></script> <script> $(document).ready(function(){ $('#test').click(function(){ var txtFile = '../data/mail.txt'; var file ...

javascripthtmlfiletextline

What is an alternative way to replicate the functionality of jQuery's remove() method using only vanilla JavaScript?

Here is the line of code I have: $('.js-cover-menu-dropdown > li > ul').remove(); This code removes all ul elements from the lis within .js-cover-menu-dropdown. I am curious about how I could rewrite this using plain JavaScript. ...

javascriptjquery

What is the most efficient way to combine a parameter string within a JavaScript function and append it to an HTML string?

Welcome to my HTML code snippet! <div id="content"></div> Afterwards, I add an input to #content: $( document ).ready(function() { // Handler for .ready() called. var parameter = "<p>Hello</p>"; $("#content").appe ...

javascriptjqueryhtmlappendconcatenation

Selenium web driver showcases its capability by successfully launching the Firefox browser, yet encounters an issue with an invalid address

WebElement searchElement = driver.findElement(By.name("q")); searchElement.sendKeys("Selenium WebDriver"); searchElement.submit(); Displays "Search Results" public static void main(String[] args) { // TODO Auto-generated method st ...

javascriptjavaseleniumselenium-webdriverselenium-chromedriver

Error: Headers cannot be set once they have already been sent

My app.js file has the following code snippet: app.use(function(req, res, next){ if(!req.user){ return res.redirect('/login_'); } next(); }) Everything seems correct so far. In my route/index.js file, I have the following code: rout ...

javascriptnode.jsexpress