Animating meshes in Three.js with texture mapping

After conducting some research, I successfully exported an obj file to a .js file that can be imported by the JSON model of Three.js. However, I am now faced with the challenge of animating this model. Specifically, I have a bird model in .js format that I want to animate to flap its wings. Additionally, I encountered an issue when trying to import the obj file, which also contains texture images, into Blender 3D. Even though the texture image locations are correctly specified within the obj file, Blender 3D fails to load the textures. The same problem persists when I convert the file to .js format and try to load the model in WebGL using JSON Model.

I am seeking guidance on how to address these issues and would greatly appreciate it if someone could provide assistance. If anyone has immediate solutions or resources to help me overcome these challenges, please do share them. I am in urgent need of assistance from the community.

Here is an excerpt of the Js model file code:

{
    "metadata" :
    {
        "formatVersion" : 3,
        "generatedBy" : "Blender 2.66 Exporter",
        "vertices" : 2652,
        "faces" : 4798,
        "normals" : 2652,
        "colors" : 0,
        "uvs" : [1202],
        "materials" : 4,
        "morphTargets" : 0,
        "bones" : 0
    },

    "scale" : 1.000000,

    "materials" : [ {
        "DbgColor" : 15658734,
        "DbgIndex" : 0,
        "DbgName" : "_5___Default0",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
        "depthTest" : true,
        "depthWrite" : true,
        "mapDiffuse" : "n-201.bmp",
        "mapDiffuseWrap" : ["repeat", "repeat"],
        "shading" : "Lambert",
        "specularCoef" : 2,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },
    ... (remaining content of materials) ...
    ],
javascriptthree.jswebgl

Answer №1

Check out this interesting resource

http://example.com/3d-animation-1 http://example.com/3d-animation-2

If you look at the first link, pay attention to line 90

var loader = new THREE.JSONLoader();
                loader.load( "models/animated/unicorn.js", function( geometry ) {

                    convertColors( geometry );
                    geometry.computeMorphNormals();

                    var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading } );
                    var meshAnim = new THREE.MorphAnimMesh( geometry, material );

                    meshAnim.duration = 5000;

                    meshAnim.scale.set( 1.5, 1.5, 1.5 );
                    meshAnim.position.y = 150;

                    scene1.add( meshAnim );
                    animations.push( meshAnim );

                } );

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

The jqGrid colModel is failing to execute a function as expected

Within the given code snippet, the function attrSetting is invoked. However, when I modify it to {"name":"A", "index":"0", "cellattr":attrSetting}, the code executes smoothly. But here lies the issue - cellattr interprets it as a string rather than a fun ...

javascriptjsonjqgrid

Direct attention to the modal display

I'm having trouble auto-focusing an input field when a modal is displayed. Here's what I've tried, but it doesn't seem to be working: jQuery(document).ready(function($) { $('#myModal').on('show.bs.modal', functi ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3

How to implement a for loop within a Vue.js method

Within Vuejs, I have a method that updates multiple variables based on user selection. methods: { updateChart(){ this.chart1.series[1].data = [this.$store.state.selectedcities[0].value[1]]; this.chart1.series[2].data = [this.$store.state.selecte ...

javascriptvue.jsfor-loopvuejs2vue-component

The process of combining identical data values within an array of objects

Can anyone help me with merging arrays in JavaScript? Here is an example array: [{ "team": team1, "groupname": "group1", "emp-data": [{ "id": 1, "name": "name1", }], }, { "team": team1, "groupname": "group1", " ...

javascript

What could be the reason that the close() method is not successfully closing the window that I have generated?

Although there are no error messages, I am encountering an issue where the function windowClose() does not execute when I click on the 'close window' button. Why could this be happening? Take a look at my code below: HTML <!DOCTYPE html> ...

javascript

Required environment variables are absent in the application form

Currently, I am working on developing a Next.js application and implementing CRUD functionality. However, I encountered an error while creating the "Create" page, which seems to be related to environment detection. Just to provide some context, I am using ...

javascriptreactjsnext.js

Can loading HTML and js through ajax be considered secure?

I am currently utilizing the Jquery load function $('#result').load('test.php'); in order to dynamically load a page within another page when clicking on a tab. The page being loaded contains javascript, php, and a form. Upon inspecting ...

javascriptajax

Showing AngularJS information on Views

After successfully implementing static HTML with views, as shown in this example: https://embed.plnkr.co/MJYSP01mz5hMZHlNo2HC/ I am now facing a challenge with integrating the angular-ui accordion within ng-view. You can view the accordion I am attemptin ...

javascriptangularjsng-viewangularjs-ng-includeng-app

Unleashing the power of dynamic column width in Material UI Grid

Is it possible to dynamically change the column width for grid items within the same container in material UI grid? Sometimes I have 2 grid items that need to display in the same row, and other times I have 4 grid items that I want to appear in the same r ...

javascriptcssreactjsmaterial-ui

What is the most effective way to bring in "server-side only" code in Next.js?

I am currently working on my index page's getServerSideProps function and I want to utilize a function called foo, which is imported from another local file. This function relies on a specific Node library that cannot be executed in the browser becaus ...

javascriptnode.jsnext.jsisomorphic-javascript

The Discord OAuth2 bot fails to assign roles to authenticated users

While working on OAuth2 login for my website, I encountered an issue. After a user successfully logs in through OAuth2, the bot should assign a role to them on my Discord server. However, when I tested the login process myself, the bot returned an error me ...

javascriptnode.jsdiscorddiscord.js

Is the runTest.ts class in the vscode-test setup ever utilized in the project? Its purpose remains unclear even in the example project

Being a novice to Typescript, JavaScript, and VScode Extensions I have set up a vscode-test following the guidelines provided here: https://code.visualstudio.com/api/working-with-extensions/testing-extension#custom-setup-with-vscodetest Based on the hel ...

javascripttypescriptvisual-studio-codevscode-extensionsvscode-debugger

Do you need to finish the Subject when implementing the takeUntil approach to unsubscribing from Observables?

In order to prevent memory leaks in my Angular application, I make sure to unsubscribe from Observables using the following established pattern: unsubscribe = new Subject(); ngOnInit() { this.myService.getStuff() .pipe(takeUntil(this.unsubscr ...

javascriptangularrxjs

Is there a way to extract data from the Redux state in a React component?

Seeking assistance with making an API request from Redux, followed by saving the data in my React state (arrdata). Although the API call is successful, I am facing challenges updating the App.js state based on the Redux API call. Any suggestions or insig ...

javascriptreactjsredux

Ensure that all links are opened in a new tab

When including _blank in the a href URL, my website contains various elements like iframes and ads from Adsense, Taboola,, etc. Currently, when a user clicks on an iframe or ad, it opens in the same window. Is there a way to ensure that all URLs (includin ...

javascripthtmljqueryajax

Implementing the Disabled Attribute on a Dynamically Generated Button Using React

My QWERTY keyboard is dynamically rendered through a component as Bootstrap buttons using bootstrap-react. Each button does not have an ID to avoid relying on IDs in React. When a letter button is clicked, it triggers an onClick event passed as props back ...

javascripthtmlreactjsjsxreact-bootstrap

Installing global confusion with NPM

npm install css-sprite --save npm install css-sprite -g I'm curious about the significance of these two commands. I understand that "-g" makes it global, but why is that important? And what does "--save" do exactly? ...

javascriptnode.jsnpm

Executing complex queries in mongoose using the $or operator

I'm in search of an efficient way to create clean code for executing multiple complex queries. Within my MongoDB database, I have two collections: followers and events. The first query involves retrieving all followers associated with a specific use ...

javascriptnode.jsmongodbmongoosemongodb-query

Edit the settings for the dual-axis line chart's parameters

After countless hours of scouring the Internet and numerous attempts, I have come to the decision to seek help by posting my issue on this forum. I must confess, I am not the best developer. My approach usually involves finding pre-existing code that I ca ...

javascriptchartsgoogle-apps-scriptgoogle-sheets

Using Rxjs to dynamically map values from an array with forkJoin

Greetings! I have a collection of Boolean observables and would like to apply a logical AND operation. Currently, I am passing static values 'a' and 'b', but I am unsure of the number of elements in the totalKeys array. import { forkJoi ...

javascriptangulartypescriptrxjsjavascript-objects