What steps are involved in generating a dynamic mesh with normal and UV attributes using three.js?

I am familiar with dynamically creating a mesh in three.js, but I am uncertain about how to incorporate custom UV and normals into the mesh. Could someone please explain how to programmatically add UV and normals to this custom mesh?

Thank you!

var texture = THREE.ImageUtils.loadTexture(image);
var geometry = new THREE.Geometry();

geometry.vertices.push(new THREE.Vector3(0.895813, 0.732893, 0));
geometry.vertices.push(new THREE.Vector3(-1.007173, 0.732893, 0));
geometry.vertices.push(new THREE.Vector3(0.895813, -1.390674, 0));
geometry.vertices.push(new THREE.Vector3(-1.007173, -1.390674, 0));

var triangle = new THREE.Face3(2, 3, 1);
geometry.faces.push(triangle);

triangle = new THREE.Face3(0, 2, 1);
geometry.faces.push(triangle);

var customMesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial(texture));
customMesh.doubleSided = true;
scene.add(customMesh);
javascriptwebglthree.js

Answer №1

The key to success lies in understanding where the normal and UVs belong. The normal is crucial for the face, while the UV coordinates are essential for defining texture mapping within the geometry.

var imgTexture = THREE.ImageUtils.loadTexture(image);
var avatarGeom = new THREE.Geometry();

avatarGeom.vertices.push(new THREE.Vector3(0.895813,0.732893,0));
avatarGeom.vertices.push(new THREE.Vector3(-1.007173,0.732893,0));
avatarGeom.vertices.push(new THREE.Vector3(0.895813,-1.390674,0));
avatarGeom.vertices.push(new THREE.Vector3(-1.007173,-1.390674,0));

var face = new THREE.Face3(2,3,1);
face.normal.set(0,0,1); // normal
avatarGeom.faces.push(face);
avatarGeom.faceVertexUvs[0].push([new THREE.UV(1,1),new THREE.UV(0,1),new THREE.UV(1,0)]); // uvs

face = new THREE.Face3(0,2,1);
face.normal.set(0,0,1); // normal
avatarGeom.faces.push(face);
avatarGeom.faceVertexUvs[0].push([new THREE.UV(0,0),new THREE.UV(1,1),new THREE.UV(1,0)]); // uvs

var avatar = new THREE.Mesh(avatarGeom,new THREE.MeshLambertMaterial(imgTexture));
avatar.doubleSided = true;
scene.add(avatar);

This approach of storing UVs in the geometry allows for flexibility with different channels, offering various sets of UV coordinates for the same geometry.

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

Initialize an array containing five zero elements

How can I initialize an array with 5 zero elements in JavaScript without using the classic var arr = [0, 0, 0, 0, 0] method? I've tried a few variations: var arr = new Array(5).map(() => 0); var arr = new Array(5).map(function () {return 0;}); va ...

javascriptarrayslambda

Tips for passing an array to a different function using Jquery

I need to pass an array to another function <div id="test"></div> <div id="test2"></div> <input type="button" value="chk" id="go" /> <script> $(function() { var c = 1; var i = 5; var dat ...

javascriptjqueryarrays

Metamorphosing gum in three.js

Is it possible for three.js to move teeth within a mouth and adjust the gums to fit the new tooth positions? ...

three.js

Increment field(s) conditionally while also performing an upsert operation in MongoDB

I need to perform an insert/update operation (upsert) on a document. In the snippet below, there is a syntactical error, but this is what I am attempting to achieve: $inc: { {type=="profileCompletion"?"profileCompletion":"matchNotification"}: 1}, If the ...

javascriptnode.jsmongodbexpressmongoose

jQuery/JavaScript - storing a pointer to an array instead of its values

I am attempting to consolidate several similar functions into a single function, which requires making calls to different arrays and variables. However, I seem to be missing something in my implementation. Here is the code snippet: var initialPreloadArray ...

javascriptjqueryarrays

Methods for removing and iterating through images?

I successfully programmed the image to move from right to left, but now I want to add a function where the image is deleted once it reaches x: 50 and redrawn on the left. I attempted to use control statements like "if," but unfortunately it did not work a ...

javascriptcanvas

What is causing my page to automatically refresh whenever I click on buttons?

The code snippet below shows the structure of my webpage : HTML : <button class="add-col"><i class="fas fa-columns"> Add a column</i></button> <div class="table-responsive"> <table class="table"> ...

javascriptjqueryhtmlcss

Unable to retrieve input using jquery selector

I am attempting to detect the click event on a checkbox. The Xpath for the element provided by firebug is as follows, starting with a table tag in my JSP (i.e. the table is within a div). /html/body/div[1]/div/div/div[2]/div/div[2]/div[1]/div/div[2]/table ...

javascriptjqueryhtmlcssxpath

The value of React state may be unpredictable, even if it appears to be defined on the

<li className="field-title">Role: </li> {console.log(this.state.userData.roles)} {this.state.userData.roles.map((role) => { return ( <li>{role.name}</li> ) })} Even though when I console log the state ...

javascriptreactjs

A guide on utilizing Material UI Fade for smoothly fading in a component when a text field is selected

I am facing an issue with a text field input and a helper component. My goal is to have the helper component fade in when a user focuses on the input field. The helper component is wrapped as follows: <Fade in={checked}> <DynamicHelperText lev ...

javascriptreactjstypescript

Using XmlHttpRequest to send a zipped file created with JSZip in JavaScript

I'm currently working on a web application where I need to generate a set of files based on user input, zip them using the JSZip library, and then post these files to a server using XHR. The code snippet for this functionality is as follows: var cont ...

javascriptjqueryajaxpostxmlhttprequest

Storing and retrieving an HTML editable array using COOKIES in JavaScript

In my code, I have created an editable array where you can input student information. A button computes the grade for each student at the end of the line. Additionally, there are buttons to add rows for students and columns for different assignments. Now, ...

javascriptarrayscookies

Creating a function generator using a string parameter in TypeScript

Is there a way to pass a string parameter to a function and retrieve an object with that key? function getFunction(name: string): { [name]: () => number } { return { [name]: () => { console.log(1); return 2; }, }; } const { m ...

javascripttypescriptfunctiondynamic

Showcase multiple examples of three.js on a single webpage

I need to showcase several 3D objects on my web app within different containers. Currently, I'm creating multiple three.js renderers, each for a separate container. However, I encountered an error message: "WARNING: Too many active WebGL contexts. Old ...

javascriptthree.jswebgl

What is the method for invoking the aggregate function within a different function?

I'm struggling to pass the data from t1 function to t2 function. I attempted a method but it resulted in 'undefined'. Could someone please assist me with this? Thank you! function t1() { db.users.aggregate( [{ ...

javascriptnode.jsmongodb

Combining various fragment shaders in THREE.js to create a single THREE.ShaderMaterial

I'm curious about blending multiple fragment shaders in THREE.js. I've successfully mixed one shader with different parameters, but now I want to combine different shaders as well. Here is the code for my current shader: uniform vec3 color; v ...

three.jsfragment-shaderalphablending

Utilizing Font Awesome for social icons in a Vue component display

Currently, I'm in the process of building my own website and making the switch from traditional HTML, CSS, and JS to using VueJs. I've hit a roadblock when trying to transfer some code from my original HTML file to a Vue JS component, specificall ...

javascripthtmlvue.jswebfont-awesome

Undefined boolean when passing to AngularJS directive

I developed a custom directive that allows for the addition of a gradient background color in AngularJS: .directive('colouredTile', function () { return { restrict: 'A', controller: 'ColouredTileController&apos ...

javascripthtmlangularjsangularjs-directivedirective

The Node.js application is up and running on the Node server, but unfortunately, no output is

Greetings, I am a beginner in nodejs. var io = require('socket.io').listen(server); users = []; connections = []; server.listen(process.env.PORT || 3000); console.log('server running....on Pro'); app.get ('/', function(re ...

javascriptnode.jsexpresssocket.io

The PHP table fails to show up on the screen

I've implemented a PHP script that connects to a MySQL database and is supposed to generate an HTML table. To achieve real-time updates, I've set up a long-polling AJAX script that polls the PHP script every second. Although everything seems to b ...

javascriptphpjqueryajax