Exploring the possibilities of applying a fragmentShader texture to repeat a ThreeJS Matcap

Here are the vertex and fragment shader materials:

material = new THREE.ShaderMaterial( {

uniforms: {
    textureMap: { type: 't', value: THREE.ImageUtils.loadTexture( 'img/matcap/green.jpg' ) },
    normalMap: { type: 't', value: THREE.ImageUtils.loadTexture( 'img/normalmap/stamp.jpg' ) },
    normalScale: { type: 'f', value: 0.5 },
    texScale: { type: 'f', value: 5 },
    useSSS: { type: 'f', value: 10 },
    useScreen: { type: 'f', value: 0 },
    color: { type: 'c', value: new THREE.Color( 0, 0, 0 ) }
},
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
side: THREE.DoubleSide

} );

I am attempting to repeat the texture using the following code:

material.uniforms.textureMap.value.wrapS = material.uniforms.textureMap.value.wrapT = 
THREE.ClampToEdgeWrapping;

material.uniforms.normalMap.value.wrapS = material.uniforms.normalMap.value.wrapT = 
THREE.RepeatWrapping;
material.uniforms.normalMap.value.repeat.set( 20, 20 );

However, this does not work in three.js. Any suggestions on how to fix it? Thanks to all my friends for your help!

javascriptthree.js

Answer №1

The default setting for textures is Clamp To Edge, which means they do not wrap around to zero. If your main texture uses Clamp To Edge while the normal texture uses Repeat Wrapping, it could be that the quality of your normal map texture is not high enough to make a noticeable difference. Consider trying to adjust the brightness of the normal map texture or using a different texture altogether.

Your current approach appears to be correct. Another way to improve readability is by:

var textureMap = THREE.ImageUtils.loadTexture( 'img/matcap/blue.jpg' );
var normalMap = THREE.ImageUtils.loadTexture( 'img/normalmap/sphere.jpg' )
textureMap.repeat.set(20,20);
normalMap.repeat.set(10,10);
//add shader code here

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

What is the most effective approach to handling dependencies for an AngularJs 1.x web application?

Right now, I have a bunch of script elements pointing to cdn/local files, which isn't ideal. I'm considering declaring all necessary packages using npm/yarn and serving cdn files with self-hosted fallback. Is this a good idea? Would it be bette ...

javascriptangularjsnpmwebpackdependencies

How can I include an HTML tag within a select input value in a React.js project?

I am facing an issue while trying to map values from the input field of a select tag. It seems to be returning [Object object] for some reason. When I do not include another tag in the return statement of the map function, the output works fine. However, I ...

javascripthtmlreactjs

Can Chrome Support Bookmarklets?

While attempting to craft a bookmarklet in Chrome using the console, I encountered the following error: Refused to load the script 'https://code.jquery.com/jquery-1.6.1.min.js' because it violates the following Content Security Policy directive: ...

javascriptjquerygoogle-chrome

Is there a simple way to delete an element from a multidimensional array object in React JS?

In my current project using React Js, I'm facing an issue with removing an item that corresponds to the "product_option_value_id". The task at hand is to remove an item from the product_option_value (a child array object) if the given itemId matches t ...

javascriptarraysjsonreactjsarrayobject

Getting the value of an HTML tag returned from an Ajax request

After making an AJAX call in VBScript, I am receiving the following HTML: <html> <body> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td width="100%" ...

javascriptjqueryhtmlajax

"Troubleshooting issue: Module fails to reload following JSON.parse error

For QA testing purposes, we have a test page that allows our QA team to replicate server behavior by passing JSON to a mock service. Everything functions correctly when valid JSON is used, but if invalid JSON is provided, an error is returned - which is ex ...

javascriptangularjsjsonangularecmascript-6

The Vue JS application is experiencing an issue with the Node JS (Express) server as it lacks the necessary 'Access-Control-Allow-Origin' header on the requested resource

I've been using Vue.js for the frontend and Node.js (Express) for the backend. Despite trying numerous solutions found online, I'm still unsure about what's causing the issue. Note: I am using the build or production version (dist) of Vue.j ...

javascriptnode.jsvue.jsexpresscors

Arranging Functions in JavaScript

I am encountering an issue regarding the execution of JavaScript functions within HTML. Specifically, I am using dimple.js to create a graph and need to select an svg element once the graph is created via JavaScript. Despite placing my jQuery selector as t ...

javascriptjqueryhtmlsvgdimple.js

In JavaScript, the href action is triggered when navigating to a linked page

We have developed a unique eCommerce CMS that utilizes: <a href="javascript:AddToBasket(3471412104801);">Add to Cart</a> ...to enable adding a product to the cart (referred to as Site A). As we are in the process of creating a separate site ( ...

javascriptphphref

What is the best way to extract data from the ajax.done() function?

My question revolves around the function shown below: $.ajax({ url: "../../getposts.php" }).done(function(posts) { var postsjson = $.parseJSON(posts); }); I am wondering how I can access the variable postsjson outside of the .done() function sco ...

phpjavascriptjqueryhtmlajax

Preloading error alert message displayed during AJAX request

When I send an ajax request with a dropdown change, the loader div is shown using "before send". However, the issue is that the loader only displays for the first time, even though the ajax functionality works all the time. If you want to check this issue ...

javascriptjqueryajax

Extract information from a JSON string and present it on the screen

I am a complete novice when it comes to D3 (with very little experience in JS). Here are the lines of code I am working with: <script type='text/javascript'> data ='{"mpg":21,"cyl":6,"disp":160,"hp":110,"drat":3.9,"wt":2.62,"qsec":16. ...

javascriptjsonrd3.js

ng-grid cell onclick callback

Currently, I am working with ng-grid and am attempting to define a callback function for when a cell is clicked. During this callback, it is crucial for me to identify the specific row and column of the cell that was clicked. Upon exploring various options ...

javascriptangularjsng-grid

Using ES6 to create a callback function that stores values in a Map

I've been trying to find an answer to this question by searching extensively, but haven't had any luck. Currently, I am developing a React app and faced with the task of storing the state, which happens to be a map, in a local variable. Here is ...

javascriptreactjsecmascript-6maps

Has Chrome's console disappeared?

After reinstalling Chrome and opening the dev tools with F12, I encountered an error with the following code: console.debug('test'); The error message displayed was Uncaught ReferenceError: console is not defined(…) This issue persisted acro ...

javascriptgoogle-chrome

"An issue with preventing default behavior when clicking on a jQuery element

I need some assistance preventing a JQuery onclick function from scrolling the page to the top. I have tried using preventDefault() without success. You can find the code on this website: Below is the code snippet that I am currently using: $( document ...

javascriptjqueryhtml

I need to display 5 columns in a parent component, each with its own unique icon. How can I conditionally render them in a React component?

Creating a parent component to reuse multiple times can be very useful. In my case, I have included 5 different icons in each instance of the component, all taken from hero icons. I have set up an object with unique ids for each child component, but I am ...

javascriptcssreactjs

Is there a way to halt the compiler until an Ajax request is fully processed?

Within my form, there is a field labeled parent keywords as a secret key. The validation of this form using JavaScript functions smoothly. It is designed to check if the secret key is associated with any parent or not. If not, the value is set to 0 by defa ...

javascriptphpjqueryajaxcompiler-construction

Is there a way to create a PHP function that can process an AJAX request and return a boolean value?

After some testing, I discovered that when the code snippet below is executed within my PHP function to manage an AJAX call: session_start(); if ( $_POST['animal'] != $_SESSION['animal'] ) die(json_encode(false)); Upon returning to th ...

javascriptphpjqueryajax

AngularJS combined with MVC is causing an issue where the table fails to refresh following an HTTP post request

When working with an $http.post() call and trying to update an HTML table in the success() callback, I encountered an issue: .success(function (data) { $scope.categories.push(data); }); Here is the HTML code for the table: <tbody> ...

javascriptangularjsasp.net-mvcangularjs-ng-repeat