Threejs导入OBJ模型出错的一些经验之谈

本人第一篇博文，最近很多人咨询此问题，发篇博文仅供参考！

系统点，从3dmax建模导出obj到threejs显示过一遍。。。

做个简单的cube：

导出选项：

检查mtl文件（很多人导出的obj材质贴图路径出错，参考我上图导出选项）：

结构：

 index.html:

play.js:

(function () {
	"use strict";

	if (WEBGL.isWebGLAvailable() === false) {
		alert(WEBGL.getWebGLErrorMessage());
	}
	var container,
	camera,
	scene,
	renderer,
	controls,
	clock;

	var init = function () {
		container = document.createElement('div');
		container.id = 'container';
		document.body.appendChild(container);

		renderer = new THREE.WebGLRenderer({
				antialias: true
			});
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(window.innerWidth, window.innerHeight);
		container.appendChild(renderer.domElement);

		scene = new THREE.Scene();
		var gridHelper = new THREE.GridHelper(100, 10, 0x121c35, 0x121c35);
		scene.add(gridHelper);

		scene.add(new THREE.HemisphereLight(0xffffbb, 0x080820, 2));

		camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 200);
		camera.position.set(0, 50, 50);

		controls = new THREE.OrbitControls(camera, container);
		controls.autoRotate = true;

		new THREE.MTLLoader().load('models/cube.mtl', function (materials) {
			materials.preload();
			new THREE.OBJLoader().setMaterials(materials).load('models/cube.obj', function (object) {
				scene.add(object);
				animate();
			});

		});

		window.addEventListener('resize', onWindowResize, false);
	};

	window.onload = init();

	function onWindowResize() {
		var w = window.innerWidth,
		h = window.innerHeight;
		renderer.setSize(w, h);
		camera.aspect = w / h;
		camera.updateProjectionMatrix();
	}

	function animate() {
		requestAnimationFrame(animate);
		render();
	}

	function render() {
		controls.update();
		renderer.render(scene, camera);
	}

})();

前面的都很基础，干货在这里，也就是一些细节部分，你们苦苦百度不得的东西。哈哈哈哈、、、、

第一种失败原因：

由于浏览器same origin policy（同源策略）的安全限制，从本地文件系统载入外部文件将会失败，同时抛出安全性异常。

解决办法有二：

1.运行一个本地的服务器，最简单的下个nginx，本文不讲nginx，如需学习，自行百度。

2.打开file协议（chrome）

--allow-file-access-frome-files

桌面鼠标右击chrome，单击属性，在“目标”后面空一个填入以上代码，忽略我截图的-incognito，想知道自己百度。

然后点击应用，确定。

 

你如果以为完事大吉，那就错了！你双击index.html试试，还是报同样的错误，你需要拖动index.html到桌面chrome快捷方式打开、、、 

第二种失败原因：

中文编码导致找不到贴图文件，出现下图错误。

这个原因是因为我的贴图用了中文名称，所以、、、嘿嘿嘿

修改cube.mtl文件编码为utf-8、、、

最后运行界面如下： 

 

总结一下：

上述我尽所能的列举出一些关键出错地方，愿读者能解决问题，如果你还是不能成功运行，那么请检查自己的代码，如果还不行，留言我们一起解决。。。 

---

昨天写的匆忙 ，居然忘记写，max要使用默认的扫描线渲染器下的标准材质、、、

如果你那边是vray的材质，是不能直接使用的，包括在其他的引擎当中都不可以，你需要将其烘焙。具体做法后面再说了、、、