Error in THREE.js: Unable to access property 'lib' from an undefined source (THREE.ShaderUtils.lib["normal"])

I have been working on the challenges provided in the WebGL introductory book by Oreilly.

Encountered a runtime error with the following code snippet. After searching online, it seems like I am the only one facing this issue. Could you please assist me in finding out what's wrong?

var specularMap= THREE.ImageUtils.loadTexture("WebGLBook/images/earth_specular_2048.jpg");

var shader   = THREE.ShaderUtils.lib[ "normal" ]; <-- encountering error
var uniforms = THREE.UniformsUtils.clone(shader.uniforms);

uniforms['tNormal'].texture   = normalMap; 
uniforms['tDiffuse'].texture  = surfaceMap;

The mentioned lines are resulting in the following error message:

Uncaught TypeError: Cannot read property 'lib' of undefined solar-system-spec-map.html:60
Earth.createGlobe solar-system-spec-map.html:60
Earth.init solar-system-spec-map.html:51
EarthApp.init solar-system-spec-map.html:33
(anonymous function) solar-system-spec-map.html:93
deferred.resolveWith jquery-1.6.4.js:1016
jQuery.extend.ready jquery-1.6.4.js:437
DOMContentLoaded

This situation is peculiar as there is no mention of "ShaderUtils" in the official THREE.js documentation...

Please advise on what might be causing this confusion!

javascriptthree.jswebgl

Answer №1

A tweak has been made to the naming convention, so this code should be functioning properly now

var shader = THREE.ShaderLib[ "normalmap" ];

Answer №2

The information from the repository on Github states:

"To successfully run the code for the book, it is necessary to use the older version of Three.js found in the libs folder. However, with versions r50 and above, the process is much simpler. You can now directly set the maps as properties of MeshPhongMaterial, like so:

var material = new THREE.MeshPhongMaterial({
    map: earthSurfaceMap,
    normalMap: earthNormalMap,
    specularMap: earthSpecularMap});

This approach eliminates the need for uniforms or computeTangents()."

Implementing this method yielded successful results!

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

Creating a User Registration and Authentication System with JavaScript for a Database

I'm new to the world of web development and I've encountered a bit of a challenge. I'm looking for a Javascript framework that can handle user registration and authentication with a database, similar to what I would do with PHP and MySql. I ...

javascriptpythonruby-on-railsangularjsnode.js

Getting the URL path within getStaticPaths in Next.js

Is there a way to retrieve the last number from the current URL pathnames in getStaticPaths? http://localhost:3000/category/food/2 -> 2, http://localhost:3000/category/food/3 -> 3, ... I have attempted: export const getStaticPaths: GetStaticPaths = ...

javascriptnext.js

Creating an HTML table from an array in an email using PHP

How can I use data collected by Javascript to generate an email in PHP? The array structure in JavaScript is like this: Menu[ item(name,price,multiplier[],ingred), item(name,price,multiplier[],ingred) ] The array Menu[] is dynamically cr ...

javascriptphparraysajax

Implementing Materialize CSS functionality for deleting chips

I've been attempting to extract the tag of a deleted chip from the div within the Materialize chips class, but I'm hitting roadblocks. My failed attempts so far: $('.chips').on('chip.delete', function(e, chip){ console.lo ...

javascriptjqueryhtmlcssmaterialize

What is the method for obtaining the entire object as a response following a click?

I am working on a basic JavaScript snippet: var image = [{name: "Breakfast", age: 100, author: "Alice"},{name: "Dinner", age: 10, author: "Teddy"}]; function gallery(name, content) { this.name = name; this.c ...

javascriptjqueryjquery-events

Modify the button's text with jQuery after it has been clicked

I've been struggling to update the text of a button after it's clicked, and I'm encountering an issue where it works in one part of my code but not in another. Could someone please guide me on what might be missing in my code? The first bl ...

javascriptjqueryhtmlcss

modify the name attribute of a select dropdown using jQuery dynamically

In my current project, I am working on dynamically changing the "name" attribute for each select box based on user interactions. The scenario is as follows: When a user clicks on an option in the first select box, a new select box appears with the remainin ...

javascriptphpjqueryhtmlcss

Visible center of the HighMaps display

I want to display a map of the USA with only certain states visible, such as those on the east coast. Is there a way to resize the map area dynamically to show only the selected states? For example, when I try to display just the east coast states, the fu ...

javascriptgeohighmaps

Can someone clarify the distinction between returning a value directly or using Promise.resolve within the then() function?

What is the distinction between: new Promise(function(res, rej) { res("first example"); }) .then(function(result) { return "bbb"; // directly returning string }) .then(function(result) { console.log(result); }); and this: n ...

javascriptangularjspromiseq

Having difficulty assigning a selected value in select2 using JavaScript with Ajax mode

I am trying to use a select2 element that loads data from a database using ajax. My goal is to load the value from the database and have it selected as the default value in edit mode. However, I am encountering issues with using the trigger function to ach ...

javascriptphpajax

What are Fabric.js tools for "Drop Zones"?

Has anyone successfully created a "drop zone" similar to interact.js using fabric.js? I haven't had the chance to experiment with it myself. I have some ideas on how I could potentially implement it, but before diving in, I wanted to see if anyone el ...

javascriptfabricjs

What could be causing the onClick event handler to trigger twice in my create-react-app?

Does anyone know why the "upvote" onClick handler is triggering twice? Even though the logs show it's only running once, the score increases by 2 export default class Container extends Component { constructor(props) { super(props); this.sta ...

javascriptreactjscreate-react-app

Wordpress is having issues running jQuery

I've developed a function inside js/custom.js. The purpose of this function is to arrange posts in my Wordpress site by applying a class called articleAlign. This class will enhance the spacing between the article title and its excerpt, but only when ...

javascriptphpjquerycsswordpress

NextJS: Retrieve the information in its initial state

Is there a way to retrieve the original format of a value? For example: The values in my textarea are: Name: Your Name Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f980968c8b9c94989095b994989095d79a9694">[email ...

javascriptmongodbnext.js

The Thinkster.io MEAN Stack guide: A blank "post" appears on the homepage. What is causing this and how can I remove it?

Currently, I am immersed in the MEAN Stack tutorial provided by Thinkster.io. At this stage, I am integrating the node.js backend with the Angularjs frontend. The functionality includes data persistence for users to add posts and upvote them. However, an ...

javascriptangularjsmongodbmean-stack

JQuery draggable and JavaScript functionality become disabled following an AJAX request

I have a click event declared as follows: $('body').on('click', 'input#searchVariables', function () { var datasetId = $('.TSDatasetID').val(); var term = $('#searchTextbox').val(); ...

javascriptjqueryajaxjquery-ui

Is it possible to use Selenium with Python for copying and pasting

Is there a way to use control + A in Selenium Python to select text and then retrieve the highlighted text? ...

javascriptpythonhtmlselenium-webdriverweb-scraping

Is there a way to specify object keys in alignment with a specific pattern that allows for a variety of different combinations

I am seeking a way to restrict an object to only contain keys that adhere to a specific pattern. The pattern I require is: "{integer}a+{integer}c". An example of how it would be structured is as follows: { "2a+1c": { // ... } } Is there a ...

javascripttypescript

Troubleshooting a Global Search Problem with Regular Expressions in Javascript

I am facing a minor problem. Here is the snippet of code I am working with: var result1=content.match("/<a [^>]*href\s*=\s*[\"']([^>\"']*)[\"'][^>]*>/gi")[1]; This code is not returning any value. Al ...

javascriptregexnode.jsoutput

Elements are not detected after applying display:none

Within the onLoad event, I implemented a function to hide multiple div elements by setting their CSS property display to "none" and assigning them the class name "invisible": function hideContent() { laElements = document.getElementById("content").chil ...

javascripthtmlcssdom