0

I'm developing an app with model 3D but I'm using .obj and .mtl file in three.js. The model is showing but the texture doesn't show. I don't know what im doing wrong.

I Have tried in diferents ways to show it but nothing. I tried with a download model and I made a model with fragmotion too. Please help me and thanks

index.html

<!DOCTYPE html>
<html>
<head>model 3D</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/three.js"></script>
    <script src="js/MTLLoader.js"></script>
    <script src="js/OBJLoader.js"></script>
    <script src="js/Detector.js"></script>
    <script src="js/stats.min.js"></script>
</head>
<body background="img/fondo1.jpg">
    <canvas id="renderCanvas" >
        <script src="js/index.js"></script>
    </canvas>
</body>
</html>

index.js

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 245, 600 / 400, 1, 2000 );
camera.position.z = 130;
camera.lookAt( scene.position );

var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );

// model
var mesh = null;
var path = 'objetos/caja/';
var filename = 'kellog.mtl';
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl( path );
mtlLoader.setPath( path );
mtlLoader.load( filename, function( materials ) {

  materials.preload();

  var objLoader = new THREE.OBJLoader();
  objLoader.setMaterials( materials );
  objLoader.setPath( path );
  objLoader.load( filename.replace('.mtl', '.obj'), function ( object ) {

    mesh = object;
    mesh.position.y = -50;
    scene.add( object );

  }, null, null );

} );

var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( 600, 400 );
renderer.setClearColor(0xccccff);
document.body.appendChild( renderer.domElement );

animate();

function animate() {

  requestAnimationFrame( animate );

    if( mesh !== null ) {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
  }

  renderer.render( scene, camera );

}
gman
  • 100,619
  • 31
  • 269
  • 393
Hector
  • 29
  • 1
  • 6
  • 1
    First thing to try is set your materials to double sided. It may be that some of your face directions are inward depending on the winding order on the export. Then open your mtl file. Check the paths to the actual images, if there are any, and be sure the images are on the server in a place the mtl file can find them. Other than that, it's tough to say – Radio Aug 28 '16 at 21:48
  • Could you post an excerpt of the relevant parts of the MTL file as well? – geekonaut Aug 28 '16 at 21:49

0 Answers0