Vue引入Thee.js 加载obj文件和mtl文件并上纹理贴图

拼搏现实的明天。 2021-07-24 18:07 1204阅读 0赞

### 目录 ###

*  1.引入包三个包
 *  2.在vue 组件内 import文件
 *  3.在mound钩子函数内调用
 *  4.效果图
 *  部分加载报错
 *  另：HTML页面使用three加载obj文件和mtl文件

# 1.引入包三个包 #

![在这里插入图片描述][20200909211728445.png_pic_center]

npm i three
    npm i three-obj-mtl-loader
    npm i orbitcontrols

第三个是辅助控制缩放 移动的

# 2.在vue 组件内 import文件 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center]

# 3.在mound钩子函数内调用 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center 1]  
文件

let that = this;
    			this.windowHalfX = window.innerWidth / 2;
    			this.windowHalfY = window.innerHeight / 2;
    
    			let divs = document.createElement('div');
    			this.container = document.querySelector('.Modal');
    			this.container.appendChild(divs);
    			// 场景
    			this.scene = new THREE.Scene();
    			// 相机
    			this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    			this.camera.position.z = 1.5;
    			// 灯光
    			var light = new THREE.AmbientLight('#deebf7', 0.9); // soft white light
    			this.scene.add(light);
    			// 渲染器
    			this.renderer = new THREE.WebGLRenderer();
    			this.renderer.setSize(window.innerWidth, window.innerHeight);
    			// this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    			divs.appendChild(this.renderer.domElement);
    
    			var onProgress = function(xhr) {
    				if (xhr.lengthComputable) {
    					var percentComplete = (xhr.loaded / xhr.total) * 100;
    					console.log(Math.round(percentComplete, 2) + '% downloaded');
    				}
    			};
    			var onError = function(xhr) {
    				console.log(xhr)
    			};
    
    			var MTLLoaders = new MTLLoader();
    			var OBJLoaders = new OBJLoader();
    
    
    
    			var textureLoader = new THREE.TextureLoader();
    			MTLLoaders.load('https://xxxxxxxxx.com/18559677286/mesh.mtl', (materials) =>{
    				console.log(materials);
    				materials.preload();
    				// OBJLoaders.setMaterials(materials)
    				OBJLoaders.load(
    					'https://xxxxxxxxx.com/18559677286/mesh.obj',
    					(object)=> {
    						console.log(object);
    						// 设置旋转中心点
    						object.children[0].geometry.computeBoundingBox();
    						object.children[0].geometry.center();
    						object.scale.set(3, 3, 3);
    						object.position.y = 0;
    						// this.scene.add(materials);
    						this.scene.add(object);
    						this.renderer.render(this.scene, this.camera);
    						// requestAnimationFrame(anime);
    
    						textureLoader.load('https://xxxxxxxxx/18559677286/mesh.png', (texture)=> {
    							console.log(texture, object);
    							object.children[0].material.map = texture;
    							// object.children[1].material.map = texture;
    							object.children[0].material.needsUpdate = true;
    							// object.children[1].material.needsUpdate = true;
    							this.scene.add(object);
    							this.renderer.render(this.scene, this.camera);
    						});
    					},
    					onProgress,
    					onError
    				);
    			});
    
    			window.addEventListener('resize', onWindowResize, false);
    			const controls = new OrbitControls(this.camera, this.renderer.domElement)
    			controls.enableDamping = true
    			controls.dampingFactor = 0.25
    			controls.enableZoom = false
    			controls.addEventListener('change', render); //监听鼠标、键盘事件
    
    			function onWindowResize() {
    				windowHalfX = window.innerWidth / 2;
    				windowHalfY = window.innerHeight / 2;
    				this.camera.aspect = window.innerWidth / window.innerHeight;
    				this.camera.updateProjectionMatrix();
    				this.renderer.setSize(window.innerWidth, window.innerHeight);
    			}
    
    			function render() {
    				that.camera.lookAt(that.scene.position);
    				that.renderer.render(that.scene, that.camera);
    			}
    			render();

# 4.效果图 #

![在这里插入图片描述][20200909212543330.gif_pic_center]

# 部分加载报错 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center 2]  
在node\_module > three-obj-mtl-loader > index.js中找到第543行并注释掉。在 545行重新定义loader  
原代码:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center 3]  
新修改  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center 4]

# 另：HTML页面使用three加载obj文件和mtl文件 #

[20200909211728445.png_pic_center]: /images/20210724/ab07f4dca02549a996cc9affc8ddc2db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/dd79c98d6e144d62ae20f2ed8b9a3351.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/f2aa4a01d0734bdf990fa76cefb8673b.png
[20200909212543330.gif_pic_center]: /images/20210724/dafc075d30054dfba9e95770ed949eb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210724/594771fc28fa424ca56175c32665c1f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210724/136b28b9c40e4b97845e95d9e70d6599.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210724/94908950f02c4a3bb75c2f0a8c88461f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1204人围观）

还没有评论，来说两句吧...

相关阅读

相关 ProcessingJoy —— 加载本地 obj 文件和网格动画【JAVA】

效果图 ![20210126103422440.gif][] ![20210126103623804.gif][] ![20210126103811271.gif][

谁践踏了优雅/ 2023年01月11日 08:44/ 0 赞/ 154 阅读

相关 babyion 加载obj模型_加载MTL材质的Obj模型

Object Loader And MTL Loader body \{ margin: 0; overflow: hidden; \} init(); funct

拼搏现实的明天。/ 2022年10月26日 14:22/ 0 赞/ 213 阅读

相关 unity通过WWW方式加载.obj文件

using UnityEngine; using System.Collections; using System.IO; using

约定不等于承诺〃/ 2022年08月26日 11:15/ 0 赞/ 182 阅读

相关纹理贴图原理总结

![20151104000114709][] ![20151104000127404][] ![20151104000138744][] ![20151104000151403

左手的ㄟ右手/ 2022年08月09日 18:40/ 0 赞/ 203 阅读

相关动态加载贴图和模型

模型和贴图必需存在“Resources”文件夹下面 \[javascript\] [ view plain][view plain] [copy][view plain] [

﹏ヽ暗。殇╰゛Y/ 2022年05月13日 06:12/ 0 赞/ 196 阅读

相关 pcd，obj，mtl文件格式解析

pcd，obj，mtl文件格式解析 pcd文件解析 > PCD文件格式并非白费力气地做重复工作，现有的文件结构因本身组成的原因不支持由PCL库引进n维点类型机制处理

阳光穿透心脏的1/2处/ 2022年05月12日 01:44/ 0 赞/ 528 阅读

相关 UV纹理与贴图

文章转载自：[http://www.cnblogs.com/jenry/p/4083415.html][http_www.cnblogs.com_jenry_p_4083415

我就是我/ 2022年03月28日 05:45/ 0 赞/ 296 阅读

相关 OpenGL纹理贴图

1.纹理贴图的步骤 1）创建纹理对象，并为它指定一个纹理。 glGenTextures() glGenerateMipmap() 2）确定纹理如何应用到每个像素上 g

墨蓝/ 2021年11月01日 07:20/ 0 赞/ 343 阅读

相关 HTML版的使用three.js加载obj和mtl文件并上贴图

目录效果图全部代码另： \[Vue版的\](https://blog.csdn.net/weixin\_44601948/article/deta

心已赠人/ 2021年09月02日 03:59/ 1 赞/ 1137 阅读

相关 Vue引入Thee.js 加载obj文件和mtl文件并上纹理贴图

目录 1.引入包三个包 2.在vue 组件内 import文件 3.在mound钩子函数内调用 4.效果图部分加载报错另：HTML

拼搏现实的明天。/ 2021年07月24日 18:07/ 0 赞/ 1205 阅读