使用three.js加载obj+mtl模型完整案例

使用three.js加载obj+mtl模型(本教程已经很老旧,three.js官网已做了很多更新,请各位看官酌情查看)

使用说明

这里我借鉴了threejs案例的部分代码 (传送门:https://threejs.org/examples/?q=obj#webgl_loader_obj_mtl
),但是这个案例并不能满足我们的需求,我们的需求是能在页面上随意盘弄模型。

资源下载

首先我先得先去下面这个页面下载threejs的所有demo,然后去掉所有的案例,替换上自己的demo文件
在这里插入图片描述

目录结构

这是我的目录结构
在这里插入图片描述
千万别把js文件删了,基本上大量的库都在这里
下面开始上代码

js部分

js是最关键的部分,记住,threejs加载模型需要启动一个服务 很重要+很重要+很重要
你可以找个前端编辑器比如hbuilder开启服务器访问,也可以将项目放在tomcat里

下面是需要引入的js文件 也很重要,路径别错了

		<script src="../three.js"></script>
		<script src="../js/loaders/DDSLoader.js"></script>
		<script src="../js/loaders/MTLLoader.js"></script>
		<script src="../js/loaders/OBJLoader.js"></script>
		<script src="../js/controls/TrackballControls.js"></script>
		<script src="../js/Detector.js"></script>
// 相关测试参数 
// path是绝对路径
// pathName是案例文件名
var objArr = {
	"test":{
		path:"../model/obj/fangkouping/",
		pathName:"fangkouping"
	},
};

// 设置名称
setName("test");
var path , pathName ;
function setName(name){
	path = objArr[name].path;
	pathName = objArr[name].pathName;
}
// 容器
var container,
// 控制器
controls;
// 镜头
var camera, 
// 场景
scene,
// 渲染
renderer;

// 检测浏览器兼容
   if(Detector.webgl){
       //alert('浏览器支持');
       init();
       animate();
   }else{
       alert('浏览器不支持');
   }


//初始化
function init() {
	
	container = document.createElement( 'div' );
	document.body.appendChild( container );
	
	//创建一个一个视角
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
	
	//设置视角离原点的位置(眼睛距离模型的距离) 
	camera.position.z = 700;

	//控制器
	controls = new THREE.TrackballControls( camera );
	//设置旋转速度
	controls.rotateSpeed = 3;

	// 使动画循环使用时阻尼或自转 意思是否有惯性 
	controls.enableDamping = true; 
	//是否可以缩放 
	controls.enableZoom = true; 
	//是否自动旋转 
	controls.autoRotate = true; 
	//设置相机距离原点的最远距离 
	controls.minDistance = 500; 
	//设置相机距离原点的最远距离 
	controls.maxDistance = 2000; 
	//是否开启右键拖拽 
	controls.enablePan = true;

	// scene 创建一个场景
	scene = new THREE.Scene();
	// 设置场景背景色 
	// scene.background = new THREE.Color( 0xffffff);
	scene.fog = new THREE.Fog( 0x000, 1000, 4000 );

	console.log(scene)
	//创建一个环境灯光
	var ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
	scene.add( ambientLight );

	//创建一个点灯光
	var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
	
	//给模型添加灯光
	camera.add( pointLight );
	
	//把视角放入环境
	scene.add( camera );

	// model  开始创建模型
	//进度通知
	var onProgress = function ( xhr ) {
			console.log(xhr)
		if ( xhr.lengthComputable ) {

			var percentComplete = xhr.loaded / xhr.total * 100;
			console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
			play(Math.round( percentComplete, 2 ))

		}

	};
	//报错通知
	var onError = function ( xhr ) { };
	
	// 添加操作器
	THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
	
	// 加载mtl
	var mtlLoader = new THREE.MTLLoader()
		.setPath( path )
		.load( pathName + '.mtl', function ( materials ) {
			console.log(materials)
			materials.preload();
			
			// 加载obj
			new THREE.OBJLoader()
				.setMaterials( materials )
				.setPath( path )
				.load( pathName + '.obj', function ( object ) {
					// console.log(object)
     						
     				// 设置旋转中心点
	                object.children[0].geometry.computeBoundingBox();

					object.children[0].geometry.center()

					object.position.y = 0;
					// 将模型加入到场景
					scene.add( object );

				}, onProgress, onError );
		});

	//创建一个webgl对象
	renderer = new THREE.WebGLRenderer({
		antialias: false,
     			alpha: true // 设置透明
	}
	);
	// 设置颜色
	renderer.setClearColor(0xffffff,0);
	// 设置分辨率
	renderer.setPixelRatio( window.devicePixelRatio );
	// 设置渲染尺寸
	renderer.setSize( window.innerWidth, window.innerHeight );
	container.appendChild( 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 );

}

// 获取参数
function GetUrlParam(paraName) {
	var url = document.location.toString();
	var arrObj = url.split("?");
	if (arrObj.length > 1) {
		var arrPara = arrObj[1].split("&");
		var arr;
		for (var i = 0; i < arrPara.length; i++) {
			arr = arrPara[i].split("=");
			if (arr != null && arr[0] == paraName) {
				return arr[1];
			}
		}
		return "";
	} else {
		return "";
	}
}

// 这是一个进度条函数进度条函数
function play(a){
	document.getElementsByClassName("trends")[0].style.width = a + "%";
	if(a < 100 ){
		document.getElementById("progress").style.display = "block";
	}else{
		document.getElementById("progress").style.display = "none";
	}
}

css

body {
				font-family: Monospace;
				color: #fff;
				margin: 0px;
				overflow: hidden;
			    background-color: #E9E9E9;
			    background-image: url(../img/background.jpg);
			    background-size: cover;
			    -moz-background-size: cover;
			    -webkit-background-size: cover;
			    -o-background-size: cover;
			}
			    
		html,body{
			margin: 0;
			padding: 0;
		}
		/* 进度条 */
		.progress{
			position: fixed;
			width:  100%;
			height: 100%;
		}
		.progress .mask{
			position: fixed;
			width:  100%;
			height: 100%;
			background:  rgba(0,0,0,0.2);
			z-index: 99;
		}
		.progress .loading{
			width: 30em;
			height: 1em;
			background: #fff;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 100;
			border-radius: 1em;
		}
		.progress .trends{
			width: 0;
			height: 100%;
			background: red;
			box-shadow: 1px 1px 10px red;
			border-radius: 1em;
		}

html

		<!--进度条-->
		<div id="progress" class="progress">
			<div class="mask"></div>
			<div class="loading">
				<div class="trends"></div>
			</div>
		</div>

效果图

加载中
在这里插入图片描述
效果一
在这里插入图片描述
效果二
在这里插入图片描述

后记

不同的模型的具体大小以及占据的空间是不一样的,所以我们就需要好好调节以下这几个参数
在这里插入图片描述

最后,假如需要加载别的模型,参考(传送门:https://threejs.org/examples
),替换一下引入的js文件以及更换一下加载模型的方法就行了,没了

  • 13
    点赞
  • 102
    收藏
    觉得还不错? 一键收藏
  • 33
    评论
### 回答1: 在使用three.js.obj和.mtl文件之前,您需要先确保您已经正确地导入了three.js库,并且已经创建了一个WebGL渲染器和一个场景。 .obj和.mtl文件的过程分为两个步骤: 第一步是.obj文件。您可以使用THREE.OBJLoader()来.obj文件。首先,创建一个OBJLoader的实例,并且使用load()方法来.obj文件。例如: var objLoader = new THREE.OBJLoader(); objLoader.load('model.obj', function(object) { // 成功后的回调函数 scene.add(object); // 将模型到场景中 }); 在上述代码中,我们使用.load()方法来.obj文件,并且在成功之后使用回调函数来添到场景中。 第二步是.mtl文件。.mtl文件是指定.obj文件材质的文件。您还需要使用MTLLoader来.mtl文件,并且与OBJLoader一起使用。首先,创建一个MTLLoader的实例,并且使用load()方法来.mtl文件。然后,在OBJLoader的回调函数中,使用setMaterials()方法来设置材质。例如: var mtlLoader = new THREE.MTLLoader(); mtlLoader.load('model.mtl', function(materials) { materials.preload(); // 进行预 objLoader.setMaterials(materials); // 设置材质 objLoader.load('model.obj', function(object) { // 成功后的回调函数 scene.add(object); // 将模型到场景中 }); }); 在上述代码中,我们首先.mtl文件,使用和设置材质,然后在.obj文件时使用OBJLoader,并将结果添到场景中。 以上就是使用three.js.obj和.mtl文件的基本过程。您可以根据实际场景和需求进行进一步的调整和扩展。 ### 回答2: 要OBJMTL文件,你首先需要在Three.js中导入OBJLoader和MTLLoader模块。你可以通过在HTML文件中包含相关的脚本来实现。一旦你导入了这些模块,你可以使用这些模块来并显示OBJMTL文件。 首先,你需要创建一个场景和渲染器。创建一个用于显示模型的渲染器实例,并将其添到页面中的某个元素上。然后,创建一个相机并设置其位置和方向。 接下来,你需要使用OBJLoader来OBJ文件。使用OBJLoader的load方法来OBJ文件,并指定完成后的回调函数。在回调函数中,你可以获取到的几何体数据。将几何体添到场景中,并根据需要设置其位置、旋转和缩放。 然后,使用MTLLoader来对应的MTL文件。使用MTLLoader的load方法来MTL文件,并指定完成后的回调函数。在回调函数中,你可以获取到的材质数据。将材质应用到之前的几何体上。 最后,将场景渲染到页面中。在渲染循环中使用渲染器的render方法来将场景与相机进行渲染。 总结来说,使用Three.jsOBJMTL文件需要导入OBJLoader和MTLLoader模块,创建场景和渲染器,OBJ文件并添到场景中,MTL文件并应用到OBJ几何体上,最后渲染场景到页面中。 ### 回答3: 要.obj和.mtl文件,我们可以使用Three.js库中的OBJLoader和MTLLoader。 首先,我们需要在HTML文件中引入Three.js库: ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js"></script> ``` 接下来,我们创建一个场景、相机和渲染器: ```javascript var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 然后,我们使用MTLLoader.mtl文件和OBJLoader.obj文件: ```javascript var mtlLoader = new THREE.MTLLoader(); mtlLoader.load('path/to/file.mtl', function(materials) { materials.preload(); var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials); objLoader.load('path/to/file.obj', function(object) { scene.add(object); }); }); ``` 在上面的代码中,我们需要将'path/to/file.mtl'和'path/to/file.obj'替换为实际的文件路径。 最后,我们可以添灯光和动画,并在渲染循环中更新场景: ```javascript var light = new THREE.PointLight(0xFFFFFF, 1, 100); light.position.set(0, 0, 5); scene.add(light); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 这样,我们就可以成功并显示.obj和.mtl文件了。 请注意,由于外部文件需要进行网络请求,所以在本地开发时需要确保跨域访问控制(CORS)设置正确。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 33
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值