Failed to apply a texture to model after exporting from Mixamo


I cannot apply a texture to model after exporting from Mixamo:

Playground: Plunker - Question for mario-mixamo-texture-threejs-js



import * as THREE from "three";
import { OrbitControls } from "orbit-controls";
import { ColladaLoader } from "collada-loader";

async function init()
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.y = 8;
    camera.position.z = 4;

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setClearColor(0x079bb0, 1);
    renderer.setSize(window.innerWidth, window.innerHeight);

    const orbitControls = new OrbitControls(camera, renderer.domElement); = new THREE.Vector3(0, 0, 0);

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

    const directionalLight = new THREE.DirectionalLight();
    directionalLight.position.set(-0.5, 0.9, 1);

    const loader = new ColladaLoader();

    let result = await loader.loadAsync("assets/models/happy-idle.dae");
    const mario = result.scene;
    mario.scale.set(1, 1, 1);
    const marioTexture = await new THREE.TextureLoader().loadAsync("assets/models/mario_main.png");
    mario.children[0] = marioTexture;

    result = await loader.loadAsync("assets/models/mario.dae");
    const staticMario = result.scene;
    staticMario.position.set(2, 0, 0);
    staticMario.rotation.set(0, 180 * Math.PI / 180, 0);
    const staticMarioTexture = await new THREE.TextureLoader().loadAsync("assets/models/mario_main.png");
    staticMario.children[0] = staticMarioTexture;

    result = await loader.loadAsync("assets/models/ground.dae");
    const ground = result.scene;
    const groundTexture = await new THREE.TextureLoader().loadAsync("assets/models/ground.png");
    ground.children[0] = groundTexture;

    window.addEventListener("resize", onWindowResize, false);
    function onWindowResize()
        camera.aspect = window.innerWidth / window.innerHeight;
        renderer.setSize(window.innerWidth, window.innerHeight);

    function render()
        renderer.render(scene, camera);




<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


        body {
            margin: 0;

    <script async src=""></script>

    <script type="importmap">
            "imports": {
            "three": "",
            "collada-loader": "",
            "orbit-controls": ""

    <script type="module" src="js/bundle.js"></script>



export default {
    input: "src/main.js",
    output: {
        file: "public/js/bundle.js"


  "name": "mario-mixamo-texture-threejs-js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "rollup -cmw",
    "build": "rullup -c"
  "keywords": [],
  "author": "",
  "license": "ISC"
} (561.6 KB)

try HDR based lighting maybe it will help you

It seems the plunker works as expected:

BTW: What is your motivation for using Collada instead of glTF? glTF is in many ways the better 3D standard and should always be the first choice unless there is a compelling reasons against it.

I don’t think HDR is related to to this issue

1 Like

Doesn’t it work for me only?

Okay got it…

Because in this case I will spend more time. I’m using Blender 2.67b which doesn’t support Collada. I will have to export to DAE, import to three.js editor, export to glTF, rename, copy to assets folder. I can’t use Blender 3, 2.79 or even 2.68 because my laptop (Asus K53SV) will be noisy and awkward to work with. I don’t have money for a new laptop or computer until I earn enough money.

Any ideas why this might not work?


Maybe it’s a bug and I need to create an issue on GitHub? It doesn’t work for me on localhost and on Plunker: Plunker - Question for mario-mixamo-texture-threejs-js

In addition, Plunker does not work the first time. I have to open and close the console, disable and start applications. I think this question is to the creators of Plunker.

Your skinnedMesh without normal array. Thats why light cant be computed. Work only basic material



1 Like

I remember there were different renderings on platforms when no vertex normals are defined.

@8Observer8 I guess you are on Windows, right?

1 Like

Yes, Windows 10. My laptop: Asus K53SV; 8 GB RAM, i3 2.2 GHertz (2 cores); Intel HD Graphics 3000; Nvidia Geforce GT 540M (1 GB);

Why is it work for you?

Just ensure normals are computed for your geometries and the problem should go away.

Not having normals but using a lit material is an error. The fact that it “works” on my device just means macOS/OpenGL uses no undefined values in the shader.

1 Like

I first checked mario.children[0].geometry.computeVertexNormals(); and then immediately marked the issue as solved.

@Chaser_Code, @Mugen87 Thank you very much, guys!

I got the 3D-model of Mario here: free mario bros 3d model


1 Like