Hi,
I cannot apply a texture to model after exporting from Mixamo:
Playground: Plunker - Question for mario-mixamo-texture-threejs-js
src/main.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);
document.body.appendChild(renderer.domElement);
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.target = new THREE.Vector3(0, 0, 0);
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight();
directionalLight.position.set(-0.5, 0.9, 1);
scene.add(directionalLight);
const loader = new ColladaLoader();
let result = await loader.loadAsync("assets/models/happy-idle.dae");
const mario = result.scene;
mario.scale.set(1, 1, 1);
console.log(mario);
scene.add(mario);
const marioTexture = await new THREE.TextureLoader().loadAsync("assets/models/mario_main.png");
mario.children[0].material.map = 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);
scene.add(staticMario);
const staticMarioTexture = await new THREE.TextureLoader().loadAsync("assets/models/mario_main.png");
staticMario.children[0].material.map = staticMarioTexture;
result = await loader.loadAsync("assets/models/ground.dae");
const ground = result.scene;
scene.add(ground);
const groundTexture = await new THREE.TextureLoader().loadAsync("assets/models/ground.png");
ground.children[0].material.map = groundTexture;
window.addEventListener("resize", onWindowResize, false);
function onWindowResize()
{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function render()
{
requestAnimationFrame(render);
orbitControls.update();
renderer.render(scene, camera);
}
render();
}
init();
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.141.0/build/three.module.js",
"collada-loader": "https://unpkg.com/three@0.141.0/examples/jsm/loaders/ColladaLoader.js",
"orbit-controls": "https://unpkg.com/three@0.141.0/examples/jsm/controls/OrbitControls.js"
}
}
</script>
<script type="module" src="js/bundle.js"></script>
</body>
</html>
rollup.config.js
export default {
input: "src/main.js",
output: {
file: "public/js/bundle.js"
}
}
package.json
{
"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"
}
mario-mixamo-texture-threejs-js.zip (561.6 KB)
