three.js加载.obj文件和贴图.mtl

最新推荐文章于 2024-02-01 16:56:56 发布

qq_38974376

最新推荐文章于 2024-02-01 16:56:56 发布

阅读量9.5k

点赞数 2

文章标签： three.js .obj .mtl webgl加载模型 three加载模型

本文链接：https://blog.csdn.net/qq_38974376/article/details/79193356

版权

使用three.js加载obj文件和贴图.mtl

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - OBJLoader2 basic usage</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 {
				font-family: Monospace;
				background-color: #000;
				color: #fff;
				margin: 0 0 0 0;
				padding: 0 0 0 0;
				border: none;
				cursor: default;
			}
			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;
			}
			#info a {
				color: #f00;
				font-weight: bold;
				text-decoration: underline;
				cursor: pointer
			}
			#glFullscreen {
				width: 100%;
				height: 100vh;
				min-width: 640px;
				min-height: 360px;
				position: relative;
				overflow: hidden;
				z-index: 0;
			}
			#example {
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background-color: #000000;
			}
			#feedback {
				color: darkorange;
			}
			#dat {
				user-select: none;
				position: absolute;
				left: 0;
				top: 0;
				z-Index: 200;
			}
		</style>

	</head>

	<body>
		<div id="glFullscreen">
			<canvas id="example"></canvas>
		</div>
		<div id="dat">

		</div>
		<div id="info">
			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - OBJLoader2 direct loader test
			<div id="feedback"></div>
		</div>

		<script src="js/Detector.js"></script>
		<script src="../build/three.js"></script>
		<script src="js/controls/TrackballControls.js"></script>
		<script src="js/loaders/MTLLoader.js"></script>
		<script src="js/libs/dat.gui.min.js"></script>

		<script src="js/loaders/LoaderSupport.js"></script>
		<script src="js/loaders/OBJLoader2.js"></script>
		<script>

			'use strict';

			var OBJLoader2Example = (function () {

				var Validator = THREE.LoaderSupport.Validator;

				function OBJLoader2Example( elementToBindTo ) {
					this.renderer = null;
					this.canvas = elementToBindTo;
					this.aspectRatio = 1;
					this.recalcAspectRatio();

					this.scene = null;
					this.cameraDefaults = {
						posCamera: new THREE.Vector3( 0.0, 175.0, 500.0 ),
						posCameraTarget: new THREE.Vector3( 0, 0, 0 ),
						near: 0.1,
						far: 10000,
						fov: 45
					};
					this.camera = null;
					this.cameraTarget = this.cameraDefaults.posCameraTarget;

					this.controls = null;
				}

				OBJLoader2Example.prototype.initGL = function () {
					this.renderer = new THREE.WebGLRenderer( {
						canvas: this.canvas,
						antialias: true,   //是否执行考锯齿
						autoClear: true
					} );
					this.renderer.setClearColor( 0x050505 );

					this.scene = new THREE.Scene();

					this.camera = new THREE.PerspectiveCamera( this.cameraDefaults.fov, this.aspectRatio, this.cameraDefaults.near, this.cameraDefaults.far );
					this.resetCamera();				//重置相机
					this.controls = new THREE.TrackballControls( this.camera, this.renderer.domElement );

					var ambientLight = new THREE.AmbientLight( 0x404040 );
					var directionalLight1 = new THREE.DirectionalLight( 0xC0C090 );	
					var directionalLight2 = new THREE.DirectionalLight( 0xC0C090 );

					directionalLight1.position.set( -100, -50, 100 );
					directionalLight2.position.set( 100, 50, -100 );

					this.scene.add( directionalLight1 );	//添加方向光
					this.scene.add( directionalLight2 );
					this.scene.add( ambientLight );		//添加自然光

					var helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );//定义网格系统
					this.scene.add( helper );
				};

				OBJLoader2Example.prototype.initContent = function () {
					var modelName = 'female02';
					this._reportProgress( { detail: { text: 'Loading: ' + modelName } } );

					var scope = this;
					var objLoader = new THREE.OBJLoader2();
					var callbackOnLoad = function ( event ) {
						scope.scene.add( event.detail.loaderRootNode );
						console.log( 'Loading complete: ' + event.detail.modelName );
						scope._reportProgress( { detail: { text: '' } } );
					};

					var onLoadMtl = function ( materials ) {
						objLoader.setModelName( modelName );
						objLoader.setMaterials( materials );
						objLoader.getLogger().setDebug( true );
						objLoader.load( 'obj/female02/location_skybox.obj', callbackOnLoad, null, null, null, false );
					};
					objLoader.loadMtl( 'obj/female02/location_skybox.mtl', null, onLoadMtl );
				};

				OBJLoader2Example.prototype._reportProgress = function( event ) {
					var output = Validator.verifyInput( event.detail.text, '' );
					console.log( 'Progress: ' + output );
					document.getElementById( 'feedback' ).innerHTML = output;
				};

				OBJLoader2Example.prototype.resizeDisplayGL = function () {
					this.controls.handleResize();

					this.recalcAspectRatio();
					this.renderer.setSize( this.canvas.offsetWidth, this.canvas.offsetHeight, false );

					this.updateCamera();
				};

				OBJLoader2Example.prototype.recalcAspectRatio = function () {
					this.aspectRatio = ( this.canvas.offsetHeight === 0 ) ? 1 : this.canvas.offsetWidth / this.canvas.offsetHeight;
				};

				OBJLoader2Example.prototype.resetCamera = function () {
					this.camera.position.copy( this.cameraDefaults.posCamera );
					this.cameraTarget.copy( this.cameraDefaults.posCameraTarget );

					this.updateCamera();
				};

				OBJLoader2Example.prototype.updateCamera = function () {
					this.camera.aspect = this.aspectRatio;
					this.camera.lookAt( this.cameraTarget );
					this.camera.updateProjectionMatrix();//更新相机投影矩阵。参数更改后必须调用。
				};

				OBJLoader2Example.prototype.render = function () {
					if ( ! this.renderer.autoClear ) this.renderer.clear();
					this.controls.update();
					this.renderer.render( this.scene, this.camera );
				};

				return OBJLoader2Example;

			})();

			var app = new OBJLoader2Example( document.getElementById( 'example' ) );

			var resizeWindow = function () {
				app.resizeDisplayGL();
			};

			var render = function () {
				requestAnimationFrame( render );
				app.render();
			};

			window.addEventListener( 'resize', resizeWindow, false );

			console.log( 'Starting initialisation phase...' );
			app.initGL();
			app.resizeDisplayGL();
			app.initContent();

			render();

		</script>
	</body>
</html>

qq_38974376

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
three.js加载.obj文件和贴图.mtl

使用three.js加载obj文件和贴图.mtl three.js webgl - OBJLoader2 basic usage body { font-family: Monospace; background-color: #000; color: #fff; margin: 0 0 0 0; padding: 0 0
复制链接

扫一扫