Rendering with ShaderMaterial in three.js

Currently attempting to rewrite the example3-3 from the book WebGL: Up and running without utilizing sim.js. However, encountering difficulties with the textures.

Struggling to achieve normal and specular effects using ShaderMaterial, similar results are obtained with MeshPhongMaterial. The current render with ShaderMaterial can be viewed here: https://i.sstatic.net/IvHpJ.jpg

Below is the provided code:

// Code goes here...

Seems like the issue lies with the textures rather than the lights being used.

javascriptthree.jswebgl

Answer №1

After encountering the exact issue and delving into a resolution, I discovered a fix while working through a similar example outlined in the reference material.

There are a few issues at play:

  • The variable THREE.ShaderUtils.lib has been updated to THREE.ShaderLib
  • Make sure to use "normalmap" instead of "normal" for your shader designation
  • The properties .texture on tNormal, tDiffuse, and tSpecular uniforms have been removed. Instead, set the texture directly by modifying the .value property.

To rectify these issues, adjust the code as follows:

var shader = THREE.ShaderLib[ "normalmap" ];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

uniforms[ "tNormal" ].value = normalMap;
uniforms[ "tDiffuse" ].value = surfaceMap;
uniforms[ "tSpecular" ].value = specularMap;

uniforms[ "enableDiffuse" ].value = true;
uniforms[ "enableSpecular" ].value = true;

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

Tips on how to properly position the grandchild in world space by rotating and translating the grandparent

I am trying to figure out how to move a grandchild object to a specific position and orientation in world space. The task involves manipulating the grandparent's (root) position and rotation in order to move child 2. If I have the target's world ...

three.js

Tips for fixing the "Function.use error: Router.use() needs a middleware function, but received an Object" issue

I'm encountering an error when calling my router from the routes directory. I've made some code changes based on other posts addressing this issue, but nothing seems to be resolving it. I'm unsure of what exactly is causing the problem in th ...

javascriptnode.jsexpress

Enhance your Angularfire experience with $firebaseArray by enabling dynamic counting and summing

Is there a way to dynamically count certain nodes if they are defined? The current implementation requires explicitly calling sum(). app.factory("ArrayWithSum", function($firebaseArray) { return $firebaseArray.$extend({ sum: function() { var ...

javascriptangularjsarraysfirebaseangularfire

Managing various swipe interactions using HTML and JavaScript/jQuery

I'm in the process of creating a mobile multiplayer game using HTML5 and Javascript. The jQuery Plugin "touchwipe" is utilized to manage swipe events in various divs like this: $('#play1').touchwipe({ wipeLeft: function(){ if ...

javascriptandroidhtmliosswipe

Implement the color codes specified in the AngularJS file into the SASS file

Once the user logs in, I retrieve a color code that is stored in localstorage and use it throughout the application. However, the challenge lies in replacing this color code in the SASS file. $Primary-color:#491e6a; $Secondary-color:#e5673a; $button-color ...

javascriptcssangularjssass

Guide to showcasing firestore data on a react web application

Hello everyone, I'm new to this forum so please let me know if I have missed any important details. I am trying to figure out how to display data from my Firestore database on my React web application. Currently, I can see the data in the console of t ...

javascriptreactjsfirebasegoogle-cloud-firestore

Enhance hover effects with JQuery through dynamic mouse movements

$(document).ready(function() { $(".hoverimage").hover( function(e) { updateCoords(this,e); openQuicktip(this); }, function() { closeQuicktip(); } ); $("area").hover( function(e) { updateCoords(this,e); openQuicktip(this); }, function ...

javascriptjquery

Conceal an absolutely positioned element outside its relatively positioned parent

I have a relative position parent element, <div style="position:relative" id="a"> and within that div, I'm creating some absolute positioned elements using jQuery, <div style="position:absolute;right:0" id="b"> These elements are anima ...

javascriptjqueryhtmlcss

parsing a TypeScript query

Is there a simpler way to convert a query string into an object while preserving the respective data types? Let me provide some context: I utilize a table from an external service that generates filters as I add them. The challenge arises when I need to en ...

javascripttypescriptqs

Accessing a distinct element of e.parameter

I've implemented a Google App Script on my website that automatically writes form data to a spreadsheet upon submission. With multiple forms on the site, I want all their data to go to the same Spreadsheet but different 'Sheets' (tabs at th ...

javascripthtmljsongoogle-apps-scriptxmlhttprequest

Instructions on setting div opacity when Overflow is set to visibleExplanation on setting opacity for div with Overflow

In my HTML code, I have a div element and an image tag stacked one on top of the other. The div is smaller than the image. I have set the overflow property to visible for the div. My query is, when I add an image to the image tag, the content that overflow ...

javascriptjqueryhtmlcss

How can I set up an additional "alert" for each form when making an AJAX request?

let retrieveLoginPasswords = function (retrieveForgottenPasswords, checkLoginStatus) { $(document).ready(function () { $('#login,#lostpasswordform,#register').submit(function (e) { e.preventDefault(); $.ajax({ type: &quo ...

javascriptphpjqueryajax

Issues arising from the event target

What is the reason behind this code functioning successfully only when the alert function is called? The color changes after closing the alert box, but if the line with the alert command is commented out, nothing happens. function setLinkColor(el) ...

javascriptjquerycss

Trigger function in React after the page finishes loading

I have a scenario where I need to display images onDrop within one of my components. To ensure a smooth drop experience, I am considering preloading the images using the following approach: componentDidMount(){ this.props.photos.forEach(picture => ...

javascriptreactjs

React malfunction - Anticipated an assignment or function invocation but encountered an expression instead

Every time I run my code, I encounter the error message "Expected an assignment or function call and instead saw an expression." It seems like the issue lies in having an if statement inside my map function. Despite several attempts, I am unable to resolve ...

javascriptreactjsexpressionfunction-callarray.prototype.map

Instructions for accessing the contents of a file that has been uploaded via the "Input Type" field in an HTML form

I have a basic HTML form with an upload field that allows users to select and upload local files. After uploading a file, the path displayed is C:/fakepath/filename.xls. I understand that this is due to browser security measures preventing direct access t ...

javascripthtml

Using React to map through a nested array within an object

In an attempt to extract the nested array "records", my current approach shows the array in the react console, but with an error. I will try to be brief while still providing necessary details. Upon encountering an error, there are 3 lines specifically po ...

javascriptjsonreactjsecmascript-6

Phaser 3 game app on iOS generated with Capacitor lacks audio functionality

I have developed a basic test app using Phaser 3 (written in Typescript and transpiled with rollup) and am utilizing Capacitor to convert it into an iOS application on my Mac. This excerpt highlights the key functionality of the app: function preload () { ...

javascriptiostypescriptphaser-frameworkcapacitor

I am struggling to find the correct way to fetch images dynamically from Cloudinary and display them as backgrounds. How should I go about implementing this feature successfully

I have been trying to figure out why I am unable to retrieve the image from cloudinary. My goal is to use the image as a background when posting, but it seems like I am not fetching the image correctly. function Post({post}){ return( <div ...

javascriptreactjsbackgroundcloudinary

Do we need to employ strict mode when utilizing specific ES6 functions in Node.js?

There has been a debate circulating at my workplace regarding whether or not it is necessary to include 'use strict' when using ES6 in Node.js without Babel. Some argue that certain ES6 methods may not function correctly without it, but I haven&a ...

javascriptnode.jsuse-strict