What could be the reason a normalMap fails to render accurately while utilizing THREE.SubdivisionModifier?

When attempting to render a 'soft' cube with a normal map, I encountered an issue. Despite not receiving any errors or warnings while running the code, adding the normal map parameter resulted in a black object when refreshing the browser. Removing the normal map allowed me to successfully render a cube with a Phong material. Interestingly, changing the material to a Normal material and trying to texture the cube caused the actual RGB normal map to be applied unintentionally. Additionally, the normal map worked correctly when I omitted the THREE.SubdivisionModifier() on the cube and rendered a sharp-edged cube instead. Any suggestions on how to address this issue would be greatly appreciated. Here is the code snippet:

var cube_geo = new THREE.BoxGeometry(.1, .1, .1, 5, 5, 5);
   var smooth = cube_geo.clone();
   var modifier = new THREE.SubdivisionModifier(5);
     modifier.modify(smooth);
var cube_mat = new THREE.MeshPhongMaterial(
  {
    color: 0x000000,
    specular: 0x222222,
    normalMap: cube_normal_map,
  }
);
cube = new THREE.Mesh(smooth, cube_mat);
  scene.add(cube);  

Answer №1

Three.SubdivisionModifier is currently unable to process UVs.

Refer to the comment in SubdivisionModifier.js.

Version three.js r.70

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

Using jQuery, implement a functionality where a line break is added when the Enter key is pressed. Furthermore, the added

I have a text box where users can add cars to a list. Each car is entered on a new line, and when the user presses enter, jQuery adds a \n to move to the next line. However, when I collect this string, the \n characters are "hidden" and cannot b ...

Error: An unexpected identifier was encountered while executing my function

I've been trying to implement a function that I found online, but when I try to run it in the terminal, I keep getting this error: /home/simone/gekko/strategies/high.js:10 sma: function(name, price, points) ^^^ SyntaxError: Unexpected identifier I ...

Retrieving URL from AJAX Request in Express JS

Currently, I am in the process of developing an Express App and encountering a challenge regarding the storage of the user's URL from which their AJAX request originated. In simpler terms, when a website, such as www.example.com, sends an HTTP request ...

Display various elements depending on the size of the screen within Next.js

My goal is to display a component differently depending on whether the screen width is less than 768p or not. If the width is under 768p, I want to show the hamburger menu. Otherwise, I want to display the full menu. This is the code snippet I am using. ...

What is causing the warnings for a functional TypeScript multidimensional array?

I have an array of individuals stored in a nested associative array structure. Each individual is assigned to a specific location, and each location is associated with a particular timezone. Here is how I have defined my variables: interface AssociativeArr ...

Choosing a single row from a Bootstrap React table

i have successfully implemented the Async Function to display data, as shown in the image. the table starts empty but gets populated after the await. However, I am facing an issue in finding a property to retrieve the selected row from the table. Is there ...

What is the process for utilizing AngularJS's multiple $http calls to retrieve data from a single PHP file?

I'm currently experimenting with multiple AngularJS ajax calls to a single php file in order to retrieve different json data based on the request. Below is the code snippet I am working with: var myApp = angular.module('myApp', []); myApp ...

struggling to send variables to jade templates with coffeescript and express.js

As a newcomer to node and express, I am currently building the front end of an application that utilizes jade as its templating engine. Despite extensive searching online and within this community, I have not been able to find a solution to a particular is ...

Within Codesandbox using Vue, the error message 'The property or method "children" is not defined in the instance, but is referenced during rendering.' appeared

Currently, I am in the process of creating a versatile State Manager that can seamlessly integrate with various Frontend Frameworks, including Vue. In order to showcase how the State Manager can be utilized within Vue, I have set up a simple codesandbox de ...

The function is not functioning properly due to an issue with the HTTP request

I am working with an AngularJS Framework controller. var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { var locations =[]; var map; var markers = []; $scope.mappa = function(){ map = new g ...

Stop user from navigating to specific route using React-router

I am currently utilizing react-router with history useQueries(createHashHistory)(), and I have a requirement to restrict navigation to certain routes based on the route's configuration. The route configuration looks like this: <Route path="/" name ...

DiscordJS bot using Typescript experiences audio playback issues that halt after a short period of time

I am currently experiencing difficulties with playing audio through a discord bot that I created. The bot is designed to download a song from YouTube using ytdl-core and then play it, but for some reason, the song stops after a few seconds of playing. Bel ...

Unable to display an image prior to its upload

I'm facing an issue with changing the image for my second data. It's not updating, but when I try it with the first data, it works fine. I'm unsure why this is happening and would appreciate any help in resolving it. Here is the form where ...

How can you make a Tempory Drawer wider in Material Components Web?

Increasing the Width of a Temporary Drawer in Material-components-web Greetings! I am currently facing an issue with Material-components-web In the provided demo here, I would like to extend the width of the Temporary drawer to accommodate additional co ...

Vue 3 Options API makes handling empty this.$refs easy

Previously in Vue 2, I was able to retrieve a property from component children (rendered within a v-for loop) using this.$refs along with a dynamically-assigned :ref attribute. However, this code no longer works in Vue 3. Upon logging out this.$refs, I no ...

Transform Ajax response into dropdown menu option

I have made an ajax call and received HTML as a response. Now, I need to convert this output into options and add them to select tags on my webpage. <div class="views-element-container"> <div class="view view-contact-view-id-conta ...

Save the ID from the listview in the browser's localStorage

I have a listview that is generated by a loop: for(var i = 0; i < data.length; i++) { var garage = data[i]; $("#content-p").append( "<ul data-role=\"listview\">" + "<li><a href=\"#\" i ...

The URL may change, but the component remains constant when navigating back

My application consists of two primary components: the Project component and MainContainer. The MainContainer component regularly fetches data using a fetchData method. When moving forward, both the URL and component can change dynamically. However, when m ...

React JS high-performance asynchronous computations

I'm currently facing a challenge with JavaScript while trying to perform complex calculations. I am using React together with Redux. Although making fetch or server requests using libraries like fetch or jQuery ajax works asynchronously as expected, ...

The process of extracting data from a form and storing it as global variables

Consider the following example: This is our HTML form <form action="test1" method="GET" name="frm"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <i ...