Question

我正在使用3D模型开发应用程序，但我在three.js中使用.obj和.mtl文件。模型正在显示，但纹理没有显示。我不知道我做错了什么。

我尝试过以不同的方式展示它但没有任何东西。我试着使用下载模型，我也用fragmotion制作了一个模型。请帮帮我，谢谢

的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 );

}

无法从.obj和.mtl - Three.js加载纹理

0 个答案: