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

程序员文章站 2022-05-03 11:01:26

...

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

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

做个简单的cube：

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

导出选项：

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

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

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

结构：

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

index.html:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<title>Cube</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
	body {
		margin: 0px;
		overflow: hidden;
	}

	</style>
</head>

<body>
	<script src="js/three.js"></script>
	<script src="js/OrbitControls.js"></script>
	<script src="js/OBJLoader.js"></script>
	<script src="js/MTLLoader.js"></script>
	<script src="js/WebGL.js"></script>
	<script src="js/play.js"></script>
</body>

</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（同源策略）的安全限制，从本地文件系统载入外部文件将会失败，同时抛出安全性异常。

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