Enhance your scene with three.js' Buffer Geometry, incorporating aoMap textures and second uv coordinates

I am currently working on incorporating a SEA3D model into my project, which is loaded as BufferGeometry, and I'm trying to add an external aoMap.

However, I have encountered issues with both maps.

  • The aoMap does not seem to be influencing the color of the model at all.

According to the documentation for three.js:

The aoMap requires a second set of UVs.

In the case of BufferGeometry, I am aware that the UV information can be found in geometry.attributes.uv.

How can I obtain the necessary second set of UVs in order to successfully apply the aoMap?

Thank you

javascriptthree.js

Answer №1

To include an additional set of UVs in a BufferGeometry, you can follow this method:

var textureCoordinates = geometry.attributes.uv.array;
geometry.addAttribute('uv2', new THREE.BufferAttribute(textureCoordinates, 2));

(Please note that by using this approach, the second set of UVs will be identical to the first set.)

Implemented in three.js version 74.

Answer №2

Currently, I am utilizing r89 and it appears that the code provided above is no longer functional. Upon reviewing the three.js documentation, I discovered that there is no need to copy an array and then generate a new instance of BufferAttribute object. Instead, you can simply utilize the copy method of the BufferAttribute object.

This method has proven effective for me.

geometry.attributes.uv2 = geometry.attributes.uv.clone()

Similar to the previous solution, this approach will result in having two identical sets of UVs.

Answer №3

Similarly, you can assign textures to UV2 by following these steps:

//                map|aoMap|normalMap|metalnessMap|roughnessMap|alphaMap etc...
object3d.material.map.channel = 2;
object3d.material.needsUpdate = true;

Best regards,

Answer №4

Anthony Sychev, your advice has truly made a difference for me!

Solution:

object4d.material.map.channel = 2;
object4d.material.needsUpdate = 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

Vue datatable button event malfunctioning

I'm currently working with the Vue.js datatable. Most functionalities are operational, however, I am facing an issue where the `callmethod()` is not being executed upon clicking a button. When the button is clicked, no events seem to be triggered. Any ...

javascriptvue.jsvuejs2

Leveraging Javascript functions within AngularJS' ng-view

I'm facing an issue with running a JavaScript function in ng-view to display a loading animation before the page loads. I'm in search of a solution and would appreciate your support in resolving this problem. Looking forward to your assistance. ...

javascripthtmlangularjsngroute

Comparison of various approaches for invoking JavaScript/jQuery functions

Do the following examples have a performance variation? Example 1: $(window).on('resize', abc); function abc(){ //some abc code } Example 2: $(window).on('resize', function(){ //some abc code }); If so, what are the positives ...

javascriptjqueryperformance

Is there a way to apply the style property only when a component is hovered in Next.js?

I would like the ability to hover over a component and have it display with unique CSS characteristics. For instance, if I hover on item A, I only want item A to stand out from the rest. Currently, I am using this method of changing the element's bac ...

javascripthtmlcssreactjsnext.js

Error with ThreeJs OrbitControls.js functionality not operating as expected

Despite my efforts to utilize OrbitControls.js from ThreeJs by creating a folder and saving necessary files (such as GLTFLoader.js, OrbitControls.js), I encountered errors when trying to use functions within them. This led to frustrations like the one show ...

javascripthtmlthree.js

React component encounters rendering issue with if-else statement

I'm attempting to use an if-else statement to check if the photo property contains an item, but for some reason, the code below is not working as expected. I can't seem to figure out what's wrong with it. Everything appears to be correct in ...

javascriptreactjs

Make the background disappear when the text field is left empty and the cursor is not present (onUnfocus)

When the text field is empty and there is no cursor in the text field, I want it to be transparent and for the spell checker not working. The result should be displayed a little to the left inside a <div>. Should this be done using CSS, JavaScript, ...

javascriptphpjqueryhtmlcss

Ways to halt the setInterval function after executing a specific function within it

Currently, I have a condition in place to verify if I am on a specific URL. If this condition is true, the setInterval() function will begin checking for a particular element on the webpage. Once the element is located, a designated function will be exec ...

javascriptsetinterval

Adding inline SVGs to a Nuxt 3 Vite project: A step-by-step guide

Hey there, I've been struggling with importing inline SVGs into my Nuxt3 Vite project. Any advice would be greatly appreciated. I discovered that using <img src="~/assets/images/icons/push-icon-chatops.svg" /> works, but I actually ne ...

javascriptvue.jssvgvitenuxtjs3

Arranging array based on the sequence of another array

There are two arrays that I am working with: Main array: const items = [ "Лопата 123", "Empty Forest", "Forever young", "My ears", "Most Important", "16 Tons", "Operation ...

javascriptarrayssorting

Add a JavaScript library to the header directly from the body of a webpage, ensuring it is exclusive to a single

I am using the Google Charts JS library on a single page within my project, with external and global headers and footers. The head tags are located in a head.php file, where all required JS libraries are included. The structure of my pages is as follows: ...

phpstructurejavascripthtml-head

I encountered an error of "Unexpected token '>'" while working with an

My code includes an ajax call and utilizes promises in the function: element.on("keypress", ".keyEvents", function(event) { if (event.which == 13) { // create the url and json object var putUrl = ...

javascriptjqueryajax

I'm looking to create a unique combination of a line and bar chart. Any advice on how to

When I stretch my Scale like this determineDataLimits: function () { var min = Math.min.apply(null, this.chart.data.datasets[0].data) console.log(this) console.log(defaultConfigObject) Chart.options.scales.rightSide.ticks.min = function ...

javascriptvue.jschartschart.js

Empty Data Table Search After Refresh While Filter Remains Active

After testing the data tables library using their example code in a jsfiddle, it seems like there might be a bug. To recreate the issue, follow these steps: Open the JS Fiddle link https://jsfiddle.net/t4rphnuc/ Click "Run" In any footer search box, fil ...

javascriptjquerydatatables

Troubleshooting issue with jquery.i18n.properties functionality

I am encountering an issue with implementing jQuery internationalization. I have included the files jquery.i18n.properties.js, jquery.i18n.properties-min.js, and jquery-min.js in my resources folder. In my jsp, I have added the following code: <script ...

javascriptjquery

Methods for concealing a single item in a Vue web form

I am a beginner with Vue and I am facing a challenge in hiding a specific element within a web form that is part of a loop. I am trying to use v-if along with a showHideEditComponent method call. However, when I invoke the showHideEditComponent method wi ...

javascriptvue.jsvuejs2vuejs3

I am looking to implement a post request feature in JavaScript and HTML that is similar to the functionality in my Python code

Although I am proficient in Python, I am struggling with JavaScript while trying to create an HTML page. I have a Python code snippet that I would like to replicate in JS. Can anyone provide some assistance? :) Here is my Python Code: import requests pos ...

javascriptpythonhtmljqueryrequest

There seems to be a problem with the output when trying to display the message "You said ${reply}"

In the following code snippet, vanilla.js is being used with ATOM as the text editor and running on nodejs via terminal: 'use strict'; const Readline = require('readline'); const rl = Readline.createInterface({ input:process.stdin, ...

javascriptnode.jsterminal

Encountering an issue in a Vue component: "(Promise/async): "TypeError: Object(...) is not a function"

After realizing that Vue CLI comes with a plethora of node_modules, I decided to create a Vue component that can run a shell command (such as ls -l). I integrated Electron using vue add electron-builder. For VueRouter, I have set mode: process.env.IS_EL ...

javascriptvue.js

Are you utilizing the User Extensions/Plug in feature with ExtJS 4?

In the process of developing a web application, I have decided to include a password strength meter feature. While there are numerous examples available, such as this one, I am encountering difficulties implementing the solution using Sencha Architect. My ...

javascriptextjsextjs4