CODEWITHSUNDEEP
javascriptthree.js
David
David

Reputation: 12

Adding a texture to a skinned mesh

I have Imported a simple extruded cube with 2 bones and a material from blender to threejs using the threejs exporter.

The model, material and bones export are fine. I can rotate the bones and the mesh and material are manipulated correctly.

Issue: When I apply a texture to the mesh then model disappears with following error.

type error material is undefined.

<html>
<head>
</head>
<body>


<script src="js/three.min.js"></script>
<script src="js/three.js"></script>
<script>

var scene,camera,renderer;
var skinnedMesh=[];
var material=[];
var texture=[];
var flag=0;
init();


function init() 
{
    renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize( window.innerWidth, window.innerHeight-125 );
    document.body.appendChild( renderer.domElement );

//////////
// CAMERA//
//////////
camera = new THREE.PerspectiveCamera( 70, window.innerWidth/Window.innerHeight, 1, 2000 );
    camera.position.z = 15;
scene= new THREE.Scene();
scene.add(camera);

    var loader = new THREE.JSONLoader;
    loader.load('blockbone.js',loadmesh); 

//////////
// LIGHT//
//////////
var light2 = new THREE.SpotLight(0xffffff);
light2.position.set(500,50,3000);
scene.add(light2);
render();
}

function loadmesh(geometry,material) {

//texture=(new THREE.MeshPhongMaterial( { map: 

//THREE.ImageUtils.loadTexture( "10.png" ) }));

//texture.needsUpdate = true;

//material[0] = new THREE.MeshFaceMaterial(texture);

skinnedMesh = new THREE.SkinnedMesh(geometry,material[0]);

geometry.dynamic = true;
material[0].skinning = true; 

scene.add(skinnedMesh);
}


function render() 
{

scene.traverse(function(child){
if (child instanceof THREE.SkinnedMesh)
{
    if (child.skeleton.bones[1].rotation.y<=1.5 && flag==0)
{ 
            child.skeleton.bones[1].rotation.y +=.02;
}
else
{
    flag=1;
}
if (child.skeleton.bones[1].rotation.y>=-3 && flag==1)
{ 
        child.skeleton.bones[1].rotation.y -=.02;
}
else
{
    flag=0;
}
child.skeleton.bones[0].rotation.y -=.01;
}
});

renderer.render(scene, camera);
requestAnimationFrame(render);
}

</script>
</body>
</html>

I have only manipulated textures on manually created meshes. Please suggest/advise what is going wrong.

Upvotes: 0

Views: 690

Answers (1)

David
David

Reputation: 12

I have solved this issue. The json file that I had exported from blender to use with Threejs was incomplete. In order to add an external texture to an externely loaded skinned mesh you must first add a texture in blender so that blender generates a UV map then export the json file.

Once the UV map is exported with json file you can then change the texture of the model.

Hope this helps other people.

Upvotes: 0

Related Questions