У меня возникает нечетная проблема при попытке загрузить OBJ и MTL-файл в Three.js с использованием его функции OBJMTLLoader() и просто не может показаться, или найти решение в Google. У меня есть файл index.html внутри папки, а также в той же папке находится моя папка js, которая включает в себя все внешние файлы js, которые я написал для моего проекта, и библиотеку three.js r68. Также в моей корневой папке проекта находится папка с именем «obj», которая включает в себя все мои obj-файлы и их соответствующие файлы mtl.Нужна помощь в загрузке OBJ и MTL-файла в Three.js
Первоначально я начал свой проект под системой Windows и смог загрузить все просто отлично, никаких проблем вообще, но теперь я переключился на свою личную систему Linux, и я начал видеть эту проблему и не могу загрузить ни один из моих obj/mtl.
Ошибки я получаю это «Uncaught TypeError: не определен не является функцией», и я попытался распечатывание моего «загрузчика» переменный и он просто показывает мне в консоли, что это объект типа OBJMTLLoader. Любые мысли по этому поводу?
EDIT: первый файл - js/main.js, а следующий - index.html.
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);
});
}<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>
Какая строка точно дает вам эту ошибку? – micnil
Я не уверен, так как это дает мне пару новых ошибок. Я отредактирую свой вопрос с новой информацией. – hRdCoder
Что находится в вашем js/main.js? добавьте контент. –