Question

我尝试使用它的OBJMTLLoader（）函数在Three.js中加载OBJ和MTL文件时遇到一个奇怪的问题，似乎无法弄清楚，或者找不到谷歌的解决方案。我有一个文件夹里面的index.html文件，同样在同一文件夹中的是我的js文件夹，其中包括我为项目编写的所有外部js文件以及three.js r68库。在我的根项目文件夹中还有一个名为＆＃39; obj＆＃39;的文件夹，其中包含我的所有obj文件及其相应的mtl文件。

我最初在Windows系统下启动了我的项目，并且能够加载所有内容，没有任何问题，但现在我切换到我的个人Linux系统，我开始看到这个问题，无法加载我的任何obj / mtl文件不再。

我收到的错误是＆＃39; 未捕获的TypeError：undefined不是函数＆＃39;我已经尝试打印出我的装载机＆＃39;变量，它只是在控制台中显示它是OBJMTLLoader类型的对象。有什么想法吗？

编辑：第一个文件是js / main.js，下一个是index.html。

＆＃13;

const WIDTH = 1200;
const HEIGHT = 700;
const VIEW_ANGLE = 45;
const ASPECT_RATIO = WIDTH / HEIGHT;
const NEAR = 0.1;
const FAR = 10000;

var renderer,
  camera,
  scene;

var pointLight, pointLight2;
var xrot = 0.0025,
  yrot = 0.0025;

$(document).ready(function() {

  // setup renderer, camera, perspective, etc.
  initScene();

  $('#loadfile').change(getLoadedFile);
  $('input[type=range]').eq(0).change(showYRot);

  // lights
  pointLight = new THREE.PointLight(0xffffff);
  pointLight.position.x = -10;
  pointLight.position.y = 50;
  pointLight.position.z = 130;

  scene.add(pointLight);

  pointLight2 = new THREE.PointLight(0xffffff);
  pointLight2.position.x = 0;
  pointLight2.position.y = 50;
  pointLight2.position.z = 500;

  scene.add(pointLight2);

  var render = function() {
    window.requestAnimationFrame(render);

    $(scene.children).each(function() {
      if (this !== camera && this !== pointLight) {
        this.rotation.x = xrot;
        this.rotation.y += yrot;
      }
    });

    renderer.render(scene, camera);
  };
  render();

});

function initScene() {

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT_RATIO, NEAR, FAR);
  scene = new THREE.Scene();
  scene.add(camera);

  camera.position.z = 250;

  renderer.setSize(WIDTH, HEIGHT);

  $('div#container').append(renderer.domElement);
}

function getLoadedFile(evt) {
  var fileList = evt.target.files;
  var filename = fileList[0].name;

  if (filename.substring(filename.length - 4, filename.length) == '.obj') {
    var obj = filename;
    var mtl = filename.substring(0, filename.length - 4) + '.mtl';

    console.log('adding ' + filename + ' to scene.');
    loadOBJMTLModel(obj, mtl);
  }
}

function loadOBJMTLModel(obj, mtl) {

  var loader = new THREE.OBJMTLLoader();
  loader.load('obj/' + obj, 'obj/' + mtl, function(object) {
    scene.add(object);
  });
}

＆＃13;

<script src="https://threejs.org/examples/js/loaders/OBJMTLLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/MTLLoader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>OBJ Model Previewer</title>
  <style>
    body {
      background-color: lightgrey;
    }
    
    div#container {
      width: 1200px;
      height: 700px;
      border: 1px solid grey;
    }
  </style>
<!--  <script src="js/main.js"></script> //-->

  <body>
    <h3>Choose file to load</h3>
    <input id="loadfile" type="file" />
    <br />
    <div id="container"></div>
    <br />
    <span></span><br />
    <span></span><br />
    <br />
    <span>Y Rotation: </span><input type="range" min="0.0" max="0.1" step="0.001" />
    <span id="yrot"></span>
  </body>

</html>

＆＃13;

Answer 1

按要求。

不推荐使用OBJMTLLoader。你必须一起使用MTLLoader和OBJLoader。您可以在此处查看传统示例：view-source：threejs.org/examples/webgl_loader_obj_mtl.html

对@j https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/OBJLoader2.js

提供的objloader2.js也有很多更新

如需更多挖掘，请参阅我之前的自动MTL加载答案：Is there a way to load a mtl using the path in the obj file?

需要帮助在Three.js中加载OBJ和MTL文件

1 个答案: