Explore the world of textures transferring from Maya to Three.js

Question

Explore the world of textures transferring from Maya to Three.js

I'm looking to convert a Maya model to JavaScript for a simple model with textures. The conversion works fine, but the textures are not showing up. Here is my code:

var loader = new THREE.JSONLoader();
loader.load( "models/t2.js", function(geometry) {
    var part1 = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
    mesh =new THREE.Object3D();
    mesh.add( part1 );
    mesh.position.set(0,0,0);
    mesh.rotation.set(0,0,0);
    mesh.scale.set(30,30,30);
    scene.add( mesh );
});

Check out the online demo: You can download the code here:

javascript three.js maya

Answer 1

Answer №1

To apply a texture to one of the material objects, you need to use either MeshLambertMaterial or MeshPhongMaterial and pass in a THREE.Texture. Start by loading the texture and including a callback function. Here's an example if you're trying to load the texture 'path/texture.png':

var modelTexture = THREE.ImageUtils.loadTexture('path/texture.png', false, loadModel);

function loadModel() {
    loader.load( "models/t2.js", function(geometry) {
    var part1 = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({ map: modelTexture });
        mesh =new THREE.Object3D();
        mesh.add( part1 );
        //var mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0,0,0);
        mesh.rotation.set(0,0,0);
        mesh.scale.set(30,30,30);
        scene.add( mesh );
    });
}

Answer 2

To apply a texture to one of the material objects, you need to use either MeshLambertMaterial or MeshPhongMaterial and pass in a THREE.Texture. Start by loading the texture and including a callback function. Here's an example if you're trying to load the texture 'path/texture.png':

var modelTexture = THREE.ImageUtils.loadTexture('path/texture.png', false, loadModel);

function loadModel() {
    loader.load( "models/t2.js", function(geometry) {
    var part1 = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({ map: modelTexture });
        mesh =new THREE.Object3D();
        mesh.add( part1 );
        //var mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0,0,0);
        mesh.rotation.set(0,0,0);
        mesh.scale.set(30,30,30);
        scene.add( mesh );
    });
}

Explore the world of textures transferring from Maya to Three.js

Answer №1

Similar questions

Stop dishonesty in a timed internet assessment

Issue encountered while incorporating a PHP file into Javascript code

Dropdown Menu with Bootstrap 4 Toggle Checkbox

Displaying multiple arrays using ng-repeat

Generating elements added at various depths within an HTML document with the help of JavaScript

Maintaining the highlight of the active row in Oracle Apex Classic Report even after the dialog window is closed

Whenever I attempt to run the NPM install command in the Terminal, it seems to generate multiple errors

Validating date parameter in Wiremock request - How to ensure dynamic date matching during testing?

Show brief tags all on one line

Secrets to concealing a Material UI column based on specific conditions?

JavaScript - Global Variable

Transferring account information to a function call in the near-js-api

What is the best way to incorporate a unique font with special effects on a website?

Is there a way to sequentially execute requests in a loop?

The perplexing phenomena of Ajax jQuery errors

Binding Events to Elements within an AngularJS-powered User Interface using a LoopIterator

How can I unselect a radio button by double clicking on it?

What is the best way to add the current date to a database?

Is it possible to determine if the user is able to navigate forward in browser history?

The step-by-step guide to implementing async/await specifically for a 'for loop'