three.js加载obj模型与mtl材质，实现自由旋转缩放

最新推荐文章于 2025-06-17 09:50:42 发布

包子源

最新推荐文章于 2025-06-17 09:50:42 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： webgl threejs

本文链接：https://blog.csdn.net/ziwoods/article/details/108538602

javascript 专栏收录该内容

48 篇文章

订阅专栏

本文介绍如何使用three.js加载OBJ模型与MTL材质文件，实现三维模型的自由旋转和缩放。通过加载材质和模型文件，设置光源，利用TrackballControls进行交互控制，实现了一个基本的三维场景展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

three.js加载obj模型与mtl材质，实现自由旋转缩放

<!DOCTYPE html>
<html lang="en">
<head>
	<title>three.js</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<script type="text/javascript" src="../lib/three.js"></script>
	<script type="text/javascript" src="../lib/MTLLoader.js"></script>
	<script type="text/javascript" src="../lib/OBJLoader.js"></script>
	<script type="text/javascript" src="../lib/TrackballControls.js"></script>
</head>
<body>
	<script type="text/javascript">
		var container, controls;
		var camera, scene, renderer;
		var mesh = null;
		var id = null;
		init();
		animate();
		function init() {
			container = document.createElement('div');
			document.body.appendChild(container);
			camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10);
			camera.position.z = 2;
			scene = new THREE.Scene();
			// 照相机
			camera = new THREE.OrthographicCamera(-5, 5, 8, -3.75, 0.1, 100);
			camera.position.set(2, 5, -20);
			scene.add(camera);
            //添加光源
			var directionalLight = new THREE.DirectionalLight(0xffeedd);
			directionalLight.position.set(0, 0, 5);
			scene.add(directionalLight);
			var directionalLightb = new THREE.DirectionalLight(0xffeedd);
			directionalLightb.position.set(0, 0, -5);
			scene.add(directionalLightb);
			// 材质
			var mtlLoader = new THREE.MTLLoader();
			mtlLoader.load('../lib/port.mtl', function(materials) {
				materials.preload();
				//模型
				var loader = new THREE.OBJLoader();
				loader.setMaterials(materials);
				loader.load('../lib/port.obj', function (obj) {
					obj.traverse(function (child) {
						if (child instanceof THREE.Mesh) {
							child.material.side = THREE.DoubleSide;
						}
					});
					mesh = obj;
					scene.add(obj);
				});
			});
			//渲染
			renderer = new THREE.WebGLRenderer();
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			renderer.outputEncoding = THREE.sRGBEncoding;
			container.appendChild(renderer.domElement);
			//控制
			controls = new THREE.TrackballControls(camera, renderer.domElement);
			//自适应
			window.addEventListener('resize', resize, false);
		}
		function resize() {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth, window.innerHeight);
		}
		function animate() {
			controls.update();
			renderer.render(scene, camera);
			requestAnimationFrame(animate);
		}
	</script>
</body>
</html>

最终效果：